可以从 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"
.
最佳答案
您无法使用 readPixels 直接获取 FrameBuffer 深度附件的内容。无论是渲染缓冲区还是(深度)纹理。 您必须在颜色附件中写入深度数据。
您可以使用 MeshDepthMaterial 渲染场景,例如阴影映射技术。您最终会得到颜色附件中编码的深度 RGBA。您可以使用 readPixels(仍然是 RGBA 编码)来获取它。这意味着您必须渲染场景两次,一次用于深度,一次用于在屏幕上显示场景。
如果您想要的深度与屏幕上显示的深度匹配(相同的相机/视角),您可以使用 WEBGL_depth_texture 来渲染深度并在一个渲染循环中显示。如果您的场景包含大量对象/ Material ,速度可能会更快。
最后,如果您的硬件支持 OES_texture_float,您应该能够将深度数据绘制到 LUMINANCE/FLOAT 纹理而不是 RGBA。这样就可以直接获取浮点深度数据,并跳过js中昂贵的解码过程。
关于three.js - Three.js 中的深度组件 readRenderTargetPixels?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40050477/