Webgl: an alternative to writing gl_FragDepth

Question

In WebGL, is it possible to write the fragment depth value or change the fragment depth value in some other way?

As far as I can find, gl_FragDepth is missing in webgl 1.x, but I'm wondering if there is another way (extensions, browser support, etc.) to do this.

What I want to archive is to reproduce an object with ray tracing along with other elements drawn using a normal model, representation, projection.

Answer 1

There is an extension EXT_frag_depth

Since this is an extension, it may not be available everywhere, so you need to check its existence.

 var isFragDepthAvailable = gl.getExtension("EXT_frag_depth"); 

If isFragDepthAvailable not false, you can enable it in your shaders with

 #extension GL_EXT_frag_depth : enable 

Otherwise, you can manipulate gl_Position.z in your vertex shader, although I suspect that this is not a really viable solution for most needs.

Answer 2

Brad Larson has a smart solution for this, which he uses in Molecules ( full blog post ):

To get around this, I implemented my own custom depth buffer, using which I was bound to the texture, screen size. For each frame, I first render, where only the value that is displayed is the color value corresponding to the depth at this point. To handle multiple overlapping objects that could write in the same fragment, I enable color mixing and use GL_MIN_EXT, the blending equation. This means that the color components used for this fragment (R, G and B) are the minimum of all the components that the objects tried to write to this fragment (in my coordinate system, the depth of 0.0 is near the viewer, and 1.0 is far away). To increase the accuracy of the depth values ​​recorded in this texture, I encode the color depth so that as the depth increases, the red one is filled first, then green and finally blue. This gives me 768 depth levels that work quite well.

EDIT: The newly implemented WebGL does not support minimal mixing, so it’s not very useful. Unfortunately.