javascript - 如何访问 three.js 中的深度数据

Question

我见过着色器根据边缘处像素的深度(从相机到表面的距离)与相邻像素的深度(深度较小)之间的差异动态地围绕边缘创建轮廓可能意味着更细的轮廓或根本没有轮廓)。喜欢这些渲染:

我有兴趣在我的 three.js 渲染器上使用这样的着色器，但我认为我需要弄清楚如何访问每个像素的深度数据。

Three.js 文档 mentions a depth setting :

depth - whether the drawing buffer has a depth buffer of at least 16 bits. Default is true.

但我不确定具有深度缓冲区的绘图缓冲区是什么意思。我熟悉的图像缓冲区是像素缓冲区，没有深度信息。我应该在哪里访问这个深度缓冲区？

Answer 1

有 an example in the Three.js website将场景渲染到 THREE.WebGLRenderTarget 并将其 depthBuffer 属性设置为 true。这使您可以访问深度数据。

思路如下:

1. 将主场景渲染到 WebGLRenderTarget。该目标将包含 RGB 和深度数据，可通过其 .texture 访问。和 .depthTexture相应的属性。
2. 获取这 2 个纹理，并将它们应用到带有自定义着色器的平面上。
3. 在飞机的自定义着色器中，您可以访问纹理数据以执行任何您想要的颜色和深度计算。
4. 将第二个场景(仅包含平面)渲染到 Canvas 。

Here's the link to source code of that example请注意，您可以注释掉第 73 行的代码以允许显示颜色数据。