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
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
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.