WebGL: Will zero-alpha pixels in a texture necessarily update the depth buffer?

Question

I'm trying to render a texture which has a mix of fully-transparent pixels, and fully-opaque pixels. It seems like my only option is to render them distance-wise back-to-front (after all fully opaque polygons), because even the fully-transparent pixels update the depth buffer, but I'm not sure that's accurate. Is it?

It seems like the fragment shader could be told to leave the depth buffer alone for transparent pixels, but apparently not. Am I missing anything?

Is there some other sensible way to render highly-irregularly-shaped images other than lots of polygons that I'm not thinking of?

Fancywork

Answer 1

Now that I've asked the question, I seem to have found at least one answer. The discard statement in the fragment shader seems to do what I need:

void main(void) {
  vec4 textureColor = texture2D(uSampler, vTextureCoord);
  if (textureColor.a < 0.5) 
    discard;
  else
    gl_FragColor = vec4(textureColor.rgb * vLighting, textureColor.a);
}

Fancywork

Yes, this is the correct solution. In fixed-function OpenGL this was known as an alpha test. By the way, your vec2() is redundant if vTextureCoord is a vec2, and if it isn't, vTextureCoord.st suffices. – Histrionism

Thanks, Kevin! Good to know I'm on the right track. (I got rid of that copypasta garbage you mentioned too, so thanks again.) – Fancywork

Answer 2

When you reach the fragment shader it is already decided that there will be a pixel, whether you output alpha or not. The only way to avoid it is to use options like glEnable(GL_ALPHA_TEST). However that is only usable for alpha values of 0 or 1, like when you draw sprites with hard borders. If you want soft borders or you want semi transparent objects you need to draw back to front. And you might need to cut up geometry for this.

Ossuary

I do indeed have hard borders. However apparently WelGL doesn't support this capability. Quoth Chrome: WebGL: INVALID_ENUM: enable: invalid capability – Fancywork