I understand that in OpenGL early depth test can be performed in the rasterizer (before running the fragment shader), but is it the same case for WebGL? If so, how is early depth test enabled in WebGL?


In my answer I relate to WebGL 2 / Opengl ES 3.0.

As far as I know ARB_shader_image_load_store is not supported. But there is discard available for fragment shaders in WebGL 2! So what you can do is to

  1. make a depth pass with a straight-forward fragment shader and
  2. then in a second pass test gl_FragCoord.z against the value of the depth texture.

It's up to you, if it's worth the additional texture lookup and rendering the scene twice.

| improve this answer | |
  • $\begingroup$ Could you please explain me what do you mean by second pass? $\endgroup$ – Anisa May 15 at 22:17
  • $\begingroup$ You would first render the whole scene to a float texture using a simple fragment shader just to store the depth values, that would be the first pass. Then you would map the obtained texture to a full screen quad and bind it to the sampler of your main fragment shader that does all the heavy stuff (adding an early discard if the depth is not equal +- epsilon) and draw the whole scene once again, that would be the second pass with output set to screen. $\endgroup$ – Isolin May 16 at 13:19
  • $\begingroup$ Maybe this can help (it is old OpenGL but still applies to current WebGL) stackoverflow.com/questions/23362076/…. $\endgroup$ – Isolin May 16 at 13:19
  • $\begingroup$ This thread discusses the depth test in fragment shader: gamedev.net/forums/topic/… $\endgroup$ – Isolin May 16 at 13:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.