Three.js渲染深度到纹理

时间:2016-01-19 11:07:25

标签: three.js depth-buffer render-to-texture

我在threejs中有大量的网格物体。为了有效地渲染它们,我将它们按材料合并。但是,我想用鼠标选择它们。

我的方法如下:在一个渲染过程中,我将合并的网格物体烘焙成纹理,在第二遍中,我只渲染突出显示的透明叠加层。到目前为止,它几乎可以工作,除了错误的可见性问题是,当我使用WebGLRenderTarget时,它只将FBO存储到纹理中。我实际上需要第二个纹理来获取DepthBuffer,理想情况下没有第三个渲染过程。我没有在Three.js文档中找到任何相关内容。有什么想法吗?

1 个答案:

答案 0 :(得分:1)

我认为你需要以不同的方式思考。您无法使用深度纹理写入深度缓冲区。写入深度缓冲区的唯一方法是渲染基元。

这个怎么样:

  • 将场景烘焙到纹理中,但将深度渲染到屏幕深度缓冲区中。
  • 在第二遍中保留深度缓冲区
  • 使用深度测试渲染已烘焙纹理并禁用深度写入:gl.disable(gl.DEPTH_TEST); gl.depthMask(false);
  • 使用突出显示材料
  • 渲染所选对象