How can I read the depth buffer in WebGL?

opengl-es webgl depth-buffer
Kevin Reid picture Kevin Reid · Sep 7, 2011 · Viewed 8.8k times · Source

Using the WebGL API, how can I get a value from the depth buffer, or in any other way determine 3D coordinates from screen coordinates (i.e. to find a location clicked on), other than by performing my own raycasting?

Answer

Markus picture Markus · Sep 7, 2011

I don't know if it's possible to directly access the depth buffer but if you want depth information in a texture, you'll have to create a rgba texture, attach it as a colour attachment to an frame buffer object and render depth information into the texture, using a fragment shader that writes the depth value into gl_FragColor.

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

If you google for opengl es and shadow mapping or depth, you'll find more explanations and example source code.

Related questions

What does `precision mediump float` mean?

In the learningwebgl tutorial1 I've found an interesting line in the fragment shader. precision mediump float; I've found an article about it here, but I still can't understand what does it mean? And if I remove this line, nothing changes. …

Read More
Tools for GLSL editing

I'm looking for some kind of tool to work with GLSL. I want to experiment with shaders in the WebGL application, so what I'm looking for is something like RenderMonkey. As far as I know - RenderMonkey is not supported …

Read More
How to cast int to float in GLSL (WebGL)?

My code is (inside the void main): float res; for(int i=0; i<15; i++) { res = float(i)/15.0; //... } Unfortunately I get a syntax error at float(i)/15.0 If I just write i/15.0, then the error is: wrong operand types no …

Read More