Question

My question is to draw a polygon or some other OpenGL primitives above or over a background image. Summarizing like paint in different layers, but in OpenGL i think there is no layers.

Now i’m doing some test trying to draw a triangle and a line over the background image.

To draw the background i use a square with OpenGL window size and then apply the png image in this square as a texture.

After that I try to paint the triangle and the line with different colors but I don’t see anything except the background image.

I play with the alpha channel but i don’t see anything.

Code:

void init() 
{
    // glClearColor(0.0, 0.0, 0.0, 0.0);
    glEnable(GL_DEPTH_TEST);

    // The following two lines enable semi transparent
    glEnable(GL_BLEND);
    glBlendFunc (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

    int width, height;
    bool hasAlpha;
    char filename[] = "prueba-luz.png";
    bool success = loadPngImage(filename, width, height, hasAlpha, &textureImage);

    if (!success) 
    {
        cout << "Unable to load png file" << endl;
        return;
    }

    cout << "Image loaded " << width << " " << height << " alpha " << hasAlpha << endl;

    glPixelStorei(GL_UNPACK_ALIGNMENT, 1);

    glTexImage2D(GL_TEXTURE_2D, 0, hasAlpha ? 4 : 3, width,
                height, 0, hasAlpha ? GL_RGBA : GL_RGB, GL_UNSIGNED_BYTE,
                textureImage);

    // glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP);
    // glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP);
    // glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    // glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
}

void display(void) 
{
    glEnable(GL_TEXTURE_2D);
    glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE); // Igual que GL_REPLACE pero se le puede aplicar transparencias a la textura
    glEnable(GL_BLEND);
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

    glPushMatrix();

    glColor4f(1, 1, 1, 1);

    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glBegin(GL_QUADS);
        glTexCoord2i(0,0); glVertex2i(10, -10);
        glTexCoord2i(1,0); glVertex2i(-10, -10);
        glTexCoord2i(1,1); glVertex2i(-10, 10);
        glTexCoord2i(0,1); glVertex2i(10, 10);
    glEnd();

    glPopMatrix();

    glDisable(GL_TEXTURE_2D);

    glBegin(GL_POLYGON);
        glColor4f(1.0, 1.0, 1.0, 0.8);
        glVertex3f(-1.0f, -3.0f, 0.0f);    // A
        glVertex3f( 1.0f, -3.5f, 0.0f);    // B
        glVertex3f( 0.0f,  0.5f, 0.0f);    // C
    glEnd();

    glBegin(GL_LINES);
        glColor4f( 1.0, 0.0, 0.0, 0.8 );
        glVertex2f(-8.0,  6.0);
        glVertex2f (5.0, -3.0);
    glEnd();

    glutSwapBuffers();
}

How can i draw one image over the background image ???

Answer 1

Some things spotted :

• Try to disable depth test. You are drawing everything at Z=0 and your application is definitely writing to the depth buffer. I’m not sure why you enable depth testing here since everything you draw is on Z=0.
• By default all fragments written to the same or higher Z value will be discarded when depth testing is enabled. This can be changed with glDepthFunc (Default value GL_LESS). This is probably why your geometry is discarded in this example.
• Drawing 2D geometry do not mean that the depth buffer will not be affected. OpenGL will draw this geometry with Z=0 and write that to your depth buffer.

Currently there is no reason for your application to use depth testing unless you draw your geometry on different z positions. You can use depth testing in 2D drawing to make “layers” by assigning different z values to each object.

A good practice for 2D drawing with z-culling is to draw the closes layer first, then draw the layers further in. This makes sure your write fewer fragments.

For example :

• Z = 0 : Draw non-transparent overlays
• Z = -1 : Draw stuff hidden behind the overlays
• Z = -2 : Draw background

However, transparent objects need special rules.

You need to get control over your depth buffer. There are options :

• glEnable/Disable(GL_DEPTH_TEST) : Enable or disable z-culling
• glDepthMask(GL_TRUE/GL_FALSE) : Enable or disable writing to the the depth buffer
• (glDepthFunc can be used to define how fragments are discarded)

Note here that the two first functions give you way more options than you might think

• Depth culling and depth write when drawing objects
• Depth culling, but your object do not affect the depth buffer
• No depth culling, but your object will write to the depth buffer
• No depth culling and no depth write

If you want to draw all your transparent objects in a last pass you can for example enable depth testing so the objects are not drawn on top your your overlays, but you disable depth writes because you want to be able to draw several overlapping objects in that layer.

Use your creativity and learn to love the depth buffer 😀