CODEWITHSUNDEEP
three.jsdepth-bufferrender-to-texture
Isolin
Isolin

Reputation: 876

Three.js Render Depth to Texture

I'm having a large number of meshes in threejs. In order to render them efficiently I merge them by materials. However, I want to select them with mouse.

My approach is the following: In one rendering pass I bake the merged meshed into a texture and in a second pass I render only the highlighted as a transparent overlay. So far, it almost works except for wrong visibility. The problem is that as I use WebGLRenderTarget it stores only the FBO into the texture. I would actually need a second texture to fetch DepthBuffer, ideally without a third rendering pass. I did not find anything related in the Three.js documentation. Any ideas?

Upvotes: 0

Views: 2996

Answers (1)

kintel
kintel

Reputation: 435

I think you need to think differently. You cannot use a depth texture to write into the depth buffer. The only way to write into the depth buffer is to render primitives.

How about this:

  • Bake your scene into a texture but render depth into the on-screen depth buffer.
  • Keep the depth buffer in the second pass
  • Render your baked texture with depth tests and depth writes disabled: gl.disable(gl.DEPTH_TEST); gl.depthMask(false);
  • Render your selected object(s) with the highlight material

Upvotes: 1

Related Questions