如何在WebGL中读取深度缓冲区？

Question

使用WebGL API,我如何从深度缓冲区获取值,或以任何其他方式从屏幕坐标确定3D坐标(即找到点击的位置),而不是通过执行我自己的光线投射？

Answer 1

我不知道是否可以直接访问深度缓冲区,但如果你想在纹理中获得深度信息,你必须创建一个rgba纹理,将它作为颜色附件附加到帧缓冲区对象并将深度信息渲染到纹理,使用片段着色器将深度值写入gl_FragColor.

有关更多信息,请参阅我之前的一个问题的答案:WebGL - 渲染深度到fbo纹理不起作用

如果你谷歌的opengl es和阴影映射或深度,你会发现更多的解释和示例源代码.

Answer 2

几年过去了,这些天WEBGL_depth_texture扩展广泛可用......除非你需要支持IE.

一般用法:

制备:

1. 查询扩展名(必填)
2. 分配单独的颜色和深度纹理(gl.DEPTH_COMPONENT)
3. 将两个纹理合并到一个帧缓冲区(gl.COLOR_ATTACHMENT0,gl.DEPTH_ATTACHMENT)中

渲染:

1. 绑定帧缓冲区,渲染场景(通常是简化版)

2. 取消绑定帧缓冲区,将深度纹理传递给着色器并像任何其他纹理一样读取它:

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