three.js - Three.js 中的深度组件 readRenderTargetPixels？

Question

可以从 THREE.WebGLRenderer 中提取深度像素数吗？ ，类似于.readRenderTargetPixels功能？基本上，this question有更新吗？ 。我的起点是 Three.js r80。如果我也可以转换为距离，则标准化值就可以了。

相关方法:

• 我看到 WebGL 的 gl.readPixels不支持gl.DEPTH_COMPONENT就像 OpenGL 的 .glReadPixels是的。

• THREE.WebGLRenderTarget确实支持.depthTexture通过THREE.WebGLRenderer的WEBGL_depth_texture扩大。虽然THREE.DepthTexture不包含.image.data喜欢 THREE.DataTexture做。

• 我还看到 THREE.WebGLShadowMap使用.renderBufferDirect与 THREE.MeshDepthMaterial .

数据类型:

• 非渲染 Canvas ，可以使用.getContext('2d')与 .getImageData(x,y,w,h).data对于 topToBottom 像素为 Uint8ClampedArray .
• 对于渲染的 Canvas ，render()使用getContext('webgl')并且上下文只能查询一次，因此getImageData无法使用。
• 而是渲染到目标并使用.readRenderTargetPixels(...myArrToCopyInto...)访问(复制)Uint8Array 中的从底部到顶部的像素。
• 任何 Canvas 都可以使用.toDataURL("image/png")返回 String在模式"data:image/png;base64,theBase64PixelData" .

Answer 1

您无法使用 readPixels 直接获取 FrameBuffer 深度附件的内容。无论是渲染缓冲区还是(深度)纹理。您必须在颜色附件中写入深度数据。

• 您可以使用 MeshDepthMaterial 渲染场景，例如阴影映射技术。您最终会得到颜色附件中编码的深度 RGBA。您可以使用 readPixels(仍然是 RGBA 编码)来获取它。这意味着您必须渲染场景两次，一次用于深​​度，一次用于在屏幕上显示场景。

• 如果您想要的深度与屏幕上显示的深度匹配(相同的相机/视角)，您可以使用 WEBGL_depth_texture 来渲染深度并在一个渲染循环中显示。如果您的场景包含大量对象/ Material ，速度可能会更快。

• 最后，如果您的硬件支持 OES_texture_float，您应该能够将深度数据绘制到 LUMINANCE/FLOAT 纹理而不是 RGBA。这样就可以直接获取浮点深度数据，并跳过js中昂贵的解码过程。