Depth test with two transparent images causes strange artifacts

Question

I am rendering a bush composed of two same images crossed as you can see on the image underneath :

But when we turn around the bush, on of the two images has visibly big problems with it's depth test :

I tried disabling the depth test but it was even worse(background bushes overlapping the front one). I simply use this code to render a bush (with m_tex and m_vertex the coordinates of a bush loaded in a file):

//Scene initialisation
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

//Then we render objects one per one
glBindTexture(GL_TEXTURE_2D, m_texture);
glBegin(GL_QUADS);
    glTexCoord2d(m_tex[0][0], m_tex[0][1]); glVertex3d(m_vertex[0][0] + coordinates[0], m_vertex[0][1] + coordinates[1], m_vertex[0][2] + coordinates[2]);
    glTexCoord2d(m_tex[1][0], m_tex[1][1]); glVertex3d(m_vertex[1][0] + coordinates[0], m_vertex[1][1] + coordinates[1], m_vertex[1][2] + coordinates[2]);
    glTexCoord2d(m_tex[2][0], m_tex[2][1]); glVertex3d(m_vertex[2][0] + coordinates[0], m_vertex[2][1] + coordinates[1], m_vertex[2][2] + coordinates[2]);
    glTexCoord2d(m_tex[3][0], m_tex[3][1]); glVertex3d(m_vertex[3][0] + coordinates[0], m_vertex[3][1] + coordinates[1], m_vertex[3][2] + coordinates[2]);
glEnd();

How can I manage to fix this bug and have a relevant depth test working with the two images?

score 2 · Accepted Answer · answered Apr 18 '18 at 09:21

2

First of all, immediate mode (glBegin(), glEnd(), etc) is deprecated now, so I would suggest to avoid it, especially if you are learning OpenGL now (have a look at the documentation here).

Apart form that, you should post a complete example (have a look here), because there are several things that can cause the effects you describe (how your scene is initialised?, how you load the textures?, are they really RGBA?, etc).

answered Apr 18 '18 at 09:21

Sergio Monteleone

2,776
9
21

1

First of all the bush is composed of two same images with the same loaded texture and one of the two is perfectly working so I assume that the problem doesn't come from there. The textures are RGBA and the fact that only one of the two isn't working even if they are rendered the same way makes me think it is the depth test causing this effect. When I disabled it this problem was solved but several other ones appeared so this wasn't the accurate solution... – Louis de Bussac Apr 18 '18 at 09:34
You should read about **Order independent transparency** ([here](https://en.wikipedia.org/wiki/Order-independent_transparency)). The problem is, you should ensure that the primitives are rendered from the far to the closer in respective to the point of view. That's why sometimes it works and sometimes is not. Most modern techniques to address this issue involve shaders, that's why my comment on the immediate mode... – Sergio Monteleone Apr 18 '18 at 09:40
But in my case the two images intersect so will Order independant transparency work in this case? – Louis de Bussac Apr 18 '18 at 09:44
The point is, the order on which the fragments are rendered **matters**. For billboards there are a few old tricks, like the one posted [here](https://gamedev.stackexchange.com/questions/51202/how-do-you-display-non-cutout-transparent-2d-textures-with-a-depth-buffer-open). – Sergio Monteleone Apr 18 '18 at 09:50
But my remaining problem is that I have a quite high amount of structures to render and I don't know if sorting objects will be very efficient with the amount to sort. I'm going to look at your trick and see if it is implementable... – Louis de Bussac Apr 18 '18 at 10:29
1

That's why techniques like **depth peeling** exist. But again, in your case it's just the classic billboarding. [here](https://stackoverflow.com/questions/4127242/opengl-rendering-two-transparent-planes-intersecting-each-other-impossible-or) there's another question about it, and I'm sure you will find tons about it... – Sergio Monteleone Apr 18 '18 at 10:36
For some reasons I have to implement this with opengl 2.2 and I couldn't find it on the net. How could we render only the opaque part of the texture without opengl 3.3 and shaders? – Louis de Bussac Apr 18 '18 at 17:05
Have you tried to: 1) disable depth writes and depth test; 2) enable alpha blending; 3) draw the two quads of each tree two times ? – Sergio Monteleone Apr 18 '18 at 17:12

Depth test with two transparent images causes strange artifacts

1 Answers1