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

Question

我已经看到着色器会根据边缘像素的深度（相机到表面的距离）与相邻像素的深度（深度较小）之间的差异动态创建边缘周围的轮廓可能意味着更薄的轮廓或根本没有）。像这些渲染：

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

Three.js文档mentions a depth setting：

  

depth - 绘图缓冲区是否具有至少16的深度缓冲区   位。默认为真。

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

Answer 1

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

这个想法如下：

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

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

Answer 2

Three.js已经有一个MeshToonMaterial，没有必要创建一个新的。

https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_variations_toon.html

IWorker

html, body, iframe {margin:0;width:100%;height:100%;border:0}