Modern OpenGL, billboarding, alpha transparency

Question

I'm having some transparency issues when rendering billboards in modern OpenGL.

I've created two billboard sprites, each one with alpha transparency, just for testing.

When I render two sprites without any transparency, it all works as expected:

Whenever I render two sprites with alpha transparency, part of one of the sprites is blocked by the other:

At first I though it had something to do with the render order, so I tried to change the order by simply render the second sprite before the first one, but then the issue is on the first sprite instead:

Blending is enabled by calling glEnable(GL_BLEND); at the start of the application.

I feel like I've tried every glBlendFunc() combination (glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA) etc) that exist in OpenGL but nothing helps.

I've also tried disable the depthmask by calling glDepthMask(GL_FALSE);but that doesn't help either.

I am using VBO's (one per sprite) when rendering.

In the vertex- and fragment shader I'm not doing anything more than setting the vertex position, the texture coordinate and the pixel color.

Answer 1

With the help of Bálint, I successfully got the issue fixed.

Bálint suggested using the discard keyword in GLSL to discard pixels that are not visible (i.e, transparent).

So inside my fragment shader, I'm checking the pixel's alpha value and if it's below a certain threshold, the pixel is discarded and therefore not rendered.

vec4 PixelColor = texture2D(Colormap, FragmentUV);

if(PixelColor.a < 0.1)
    discard;

Result:

Answer 2

Yes it's the render order, but not in the way you think. The depth buffer only contains 1 dimensional data, it can't represent transparency.

Even if part of the texture is transparent, it will still write in the depth buffer. Because of this when the other plane gets rendered, it'll get obstructed.

It's very hard to solve it in this case, you probably have to slice the plane up into 4 squares and render them separately at which point you could just make the models have an L shape.