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
- make a depth pass with a straight-forward fragment shader and
- then in a second pass test
gl_FragCoord.zagainst the value of the depth texture.
It's up to you, if it's worth the additional texture lookup and rendering the scene twice.
$\begingroup$ Could you please explain me what do you mean by second pass? $\endgroup$– AnisaMay 15, 2020 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$ May 16, 2020 at 13:19
$\begingroup$ Maybe this can help (it is old OpenGL but still applies to current WebGL) stackoverflow.com/questions/23362076/…. $\endgroup$ May 16, 2020 at 13:19
$\begingroup$ This thread discusses the depth test in fragment shader: gamedev.net/forums/topic/… $\endgroup$ May 16, 2020 at 13:52
1$\begingroup$ @RobertMonfera Nice suggestion :) Then for the second pass it's the best to set the
gl.EQUAL. $\endgroup$ Jan 15, 2022 at 19:54