AlphaFunctions in WebGL?

Question

Is it possible to achieve an transparency effect where fragments with alpha lower than 0.5 are discarded and fragments with alpha higher than 0.5 are rendered rendered opaque? From what I've read,

glEnable(GL_ALPHA_TEST);
glAlphaFunc(GL_GREATER, 0.5); 

would be what I'm looking for but unfortunately, AlphaFunction is not defined in WebGL. Is there a workaround?

My problem is, that transparent fragments write into the depth buffer and thus prevent farther fragments from beeing rendered: alpha_error http://gebackene-ente.at/nudelsalat/sonstiges/pointcloud_alphaerror.jpg

Sorting is not an option because there are way too much points.

Hydrothorax

Answer 1

Use your shader to do it. At the bottom of your fragment shader, after setting the output color:

if(gl_FragColor.a < 0.5)
  discard;

Bountiful

Note, you must put the "discard" at the bottom after setting output colour as Nicol Bolas says. Placing "discard" earlier seems to be ignored in some situations. – Felixfeliza

Answer 2

You can completely discard fragments in the fragment shader using the discard statement. So just look up there alpha from the texture (or somewhere else) and then just call

if(alpha < 0.5)
    discard;

So you don't even need to propagate the alpha to the color or you can make the test dependent on something else. That is the modern way of doing alpha test, as it's also deprecated in desktop GL 3+.

Cradle