Opengl es 如何读取WebGL中的深度缓冲区？

使用WebGL API，除了执行我自己的光线投射之外，我如何从深度缓冲区中获取值，或者以任何其他方式从屏幕坐标中确定3D坐标（即找到单击的位置？

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

有关更多信息，请参阅我的一个旧问题的答案：

如果你在谷歌上搜索opengl es和阴影映射或深度，你会找到更多的解释和示例源代码。

在第节中，你似乎无法直接读取深度缓冲区，因此也许Markus的建议是最好的方法，尽管你可能不需要FBO来完成这项工作

---

但是如果你想做一些像采摘的事情，还有其他的方法。正如经常被问到的那样，只需浏览一下就可以了。

实际上不是重复的，但也请参见：

除了取消投射和投射光线（然后根据需要对其执行相交测试），您最好的选择是查看“拾取”。这不会给出精确的3D坐标，但当您只关心单击了哪个对象，而不需要真正的每像素精度时，它是一种非常有用的无投影替代方法

在WebGL中拾取意味着使用特定着色器渲染整个场景（或至少渲染您关心的对象）。着色器使用不同的唯一ID渲染每个对象，该ID在红色和绿色通道中编码，使用蓝色通道作为关键帧（非蓝色表示没有感兴趣的对象）。场景渲染到屏幕外的帧缓冲区中，以便最终用户看不到该场景。然后使用gl.readPixels（）读回感兴趣的一个或多个像素，并查看在给定位置编码了哪个对象ID

---

如果有帮助，请参阅。该实现拾取像素的矩形区域；传入1x1区域会导致拾取单个像素。另请参见第146、162和175行的函数。

自2012年1月23日起，有一个草案WebGL扩展以启用深度缓冲区读取。我没有关于它在实现中可用性的信息，但我不希望它在这么早就出现。

几年过去了，现在，

WEBGL\u depth\u texture

扩展已经广泛可用。。。除非你需要支持IE

一般用法：

准备：

查询扩展名（必需）

分配单独的颜色和深度纹理（

gl.depth\u组件

）

将两种纹理合并到一个帧缓冲区中（

gl.COLOR\u ATTACHMENT0

，

gl.DEPTH\u ATTACHMENT0

）

渲染：

绑定帧缓冲区，渲染场景（通常是简化版本）

解除帧缓冲区绑定，将深度纹理传递给着色器，并像读取任何其他纹理一样读取它：

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

---

现在，我终于实现了光线投射。这个链接已经死了，但我在网站上发现了：问题是如何从JS代码中读取深度值，而不是GLSL。