How can I read the depth buffer in WebGL?

Question

Using the WebGL API, how can I get the value from the depth buffer or in some other way determine the 3D coordinates from the screen coordinate (i.e. find the found location), except for doing my own raycasting?

Answer 1

Several years have passed, today the WEBGL_depth_texture extension WEBGL_depth_texture widely available ... if you do not need IE support.

General use:

Cooking:

• Request extension (required)
• Select a separate color and depth texture ( gl.DEPTH_COMPONENT )
• Combine both textures into one framebuffer ( gl.COLOR_ATTACHMENT0 , gl.DEPTH_ATTACHMENT )

Rendering:

• Bind framebuffer, visualize your scene (usually this is a simplified version).

• Untie the framebuffer, pass the depth texture to your shaders and read it like any other texture:

   texPos.xyz = (gl_Position.xyz / gl_Position.w) * 0.5 + 0.5; float depthFromZBuffer = texture2D(uTexDepthBuffer, texPos.xy).x; 

Answer 2

I don’t know whether it is possible to directly access the depth buffer, but if you want to get information about the depth in the texture, you will need to create an rgba texture, attach it as a color binding to the frame buffer object and visualize the depth information in the texture using a fragment shader, which writes the depth value to gl_FragColor.

For more information, see the answers to one of my old questions: WebGL - rendering depth for fbo texture does not work

If you google for opengl es and shadow mapping or depth, you will find more explanations and sample source code.

Answer 3

From section 5.13.12 of the WebGL specification, it seems that you cannot read the depth buffer directly, so maybe Marcus's suggestion is the best way to do this, although you don't need FBO to do this.

But if you want to make something like a choice, there are other methods for it. Just browse through SO as it has been asked very often.

Answer 4

It doesn't look like a duplicate, but see also: How to get an object in 3DG WebGL space with the mouse click

In addition to non-designing and casting the beam (and then performing intersection tests with it as necessary), it is best to look at the “collection”. This will not give accurate 3D coordinates, but it is a useful alternative to non-designing, when you only need to care about which object you clicked on and don’t need pixel accuracy.

Choosing in WebGL means rendering the entire scene (or at least the objects you need) using a specific shader. The shader displays each object with a different unique identifier, which is encoded in the red and green channels using the blue channel as the key (not blue means that the object is not of interest). The scene turns into an offshore framebuffer so that it does not appear to the end user. Then you read back, using gl.readPixels (), the pixel or pixels of interest, and see which object identifier was encoded at that position.

If this helps, see my own implementation of WebGL selection . This implementation selects a rectangular region of pixels; transmission in the 1x1 region results in the selection of one pixel. See also functions on lines 146, 162, and 175.

Answer 5

As of January 23, 2012, there is a WebGL extension project to enable reading of the depth buffer, WEBGL_depth_texture . I have no information about its availability in implementations, but I do not expect this at this early date.