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

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

<ol>
<li>make a depth pass with a straight-forward fragment shader and </li>
<li>then in a second pass test <code>gl_FragCoord.z</code> against the value of the depth texture.</li>
</ol>

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

CC BY-SA 4.0
2022-01-07T17:56:22.070Z
@Isolin alternatively, without rendering to a texture, or generally to a secondary framebuffer: the scene is rendered to the default framebuffer (or whatever FBO), with trivial fragment shaders, then clear only the color (before when calling `gl.clear(flags)`, `gl.COLOR_BUFFER_BIT` is set, but `gl.DEPTH_BUFFER_BIT` isn't) and then render a second time to the same framebuffer, with more elaborate fragment shaders
Robert Monfera
CC BY-SA 4.0
2022-01-07T18:36:22.057Z
... forgot to mention, it's worth prefixing the fragment shader(s) that participate in such multipass rendering with `#pragma STDGL invariant(all)` otherwise there's a chance for subtle differences even if the vertex source is identical. Also, the first pass needs to write in the depth buffer, while the 2nd pass needs not; only the depth testing is needed
Robert Monfera
CC BY-SA 4.0
2022-01-15T19:54:15.910Z
@RobertMonfera Nice suggestion :) Then for the second pass it's the best to set the `gl.depthFunc` to `gl.EQUAL`.
Isolin
CC BY-SA 4.0
2020-05-15T22:17:14.980Z
Could you please explain me what do you mean by second pass?
Anu
CC BY-SA 4.0
2020-05-16T13:19:31.657Z
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.
Isolin
CC BY-SA 4.0
2020-05-16T13:19:33.950Z
Maybe this can help (it is old OpenGL but still applies to current WebGL) https://stackoverflow.com/questions/23362076/opengl-how-to-access-depth-buffer-values-or-gl-fragcoord-z-vs-rendering-d.
Isolin
CC BY-SA 4.0
2020-05-16T13:52:04.117Z
This thread discusses the depth test in fragment shader: https://www.gamedev.net/forums/topic/624260-depth-testing-in-the-fragment-shader/
Isolin
CC BY-SA 4.0
2020-05-15T20:46:28.547Z
2020-05-16T20:09:02.207Z
2020-05-16T20:09:02.207Z
Isolin
<p>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?</p>

<webgl><rasterizer>
Early depth test in WebGL
Anu
# Early depth test in WebGL

(Asked by: username_0 on 2020-05-13)

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?

**Tags:** webgl, rasterizer


---

## 1 answers

### Answer by username_1 on 2020-05-15. Score: 2

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.

> **Comments:**
> **username_0**: Could you please explain me what do you mean by second pass?  
> **username_1**: 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.  
> **username_1**: Maybe this can help (it is old OpenGL but still applies to current WebGL) https://stackoverflow.com/questions/23362076/opengl-how-to-access-depth-buffer-values-or-gl-fragcoord-z-vs-rendering-d.  
> **username_1**: This thread discusses the depth test in fragment shader: https://www.gamedev.net/forums/topic/624260-depth-testing-in-the-fragment-shader/  
> **username_2**: @username_1 alternatively, without rendering to a texture, or generally to a secondary framebuffer: the scene is rendered to the default framebuffer (or whatever FBO), with trivial fragment shaders, then clear only the color (before when calling `gl.clear(flags)`, `gl.COLOR_BUFFER_BIT` is set, but `gl.DEPTH_BUFFER_BIT` isn't) and then render a second time to the same framebuffer, with more elaborate fragment shaders  
> **username_2**: ... forgot to mention, it's worth prefixing the fragment shader(s) that participate in such multipass rendering with `#pragma STDGL invariant(all)` otherwise there's a chance for subtle differences even if the vertex source is identical. Also, the first pass needs to write in the depth buffer, while the 2nd pass needs not; only the depth testing is needed  
> **username_1**: @username_2 Nice suggestion :) Then for the second pass it's the best to set the `gl.depthFunc` to `gl.EQUAL`.  

---

