0
\$\begingroup\$

So I have a webgl application where I render all kinds of objects, but in this specific example, I have two shaders. One that renders sprites and one that renders colored polygons. In this example I draw a rectangle and two sprites. The rectangle is drawn first and the sprites are drawn second. The rectangle has a lower z and the the sprites have the same z that is higher then the rectangle. This is the result with depth test function of gl.LESS and gl.BLEND enabled with blend function gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA). The texture is a png. Here is the result

enter image description here

This is not the correct result obviously as the sprite below is somewhat cut off. Also, if I draw the sprites before the rectangle, I get this

enter image description here

At first, I figured that that black around the sprites was just the pixel not being blended as alpha, but as it turns out from changing the clear color, that black is actually the background, so it looks like the rectangle is literally being cut out.

What could cause this behavior?

There is a lot of code, so tell me what is relevant and I will post it.

Improve this question
\$\endgroup\$

1 Answer 1

Reset to default
1
\$\begingroup\$

This is due to depth testing.

You need to order your sprite rendering back to front and either disable depth test or set it to gl.LEQUAL.

Sprites will not render if the pixel depth is equal to a previously drawn sprite when the depth function is set to gl.LESS.

Improve this answer
\$\endgroup\$
2
  • \$\begingroup\$ isn't the point of depth testing so that I do not have to worry about the order that they are drawn? Also, setting them to gl.LEQUAL does indeed cause the sprites to render correctly, but they still cut through the rectangle. Is this expected behavior? \$\endgroup\$
    – FatalCatharsis
    Apr 27, 2016 at 4:18
  • 1
    \$\begingroup\$ If the two sprites are rendered at the exact same depth then the dept test will make one of them fail to render since the depth not less than the other one. The other issue is that the transparent pixels are still updating the depth buffer. For this you need to add an alpha test in the fragment shader and if the alpha is lower than a certain value or equal to zero use the discard statement to skip updating the depth buffer. \$\endgroup\$
    – Stephane Hockenhull
    Apr 27, 2016 at 4:28

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .