How to get depthtexture on WebGLRenderTarget that contains only opaque objects

Questions
1

Hi all,
I’m trying to get a depth texture that contains only opaque objects and color texture contains all. I do as follows:

let target = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight );
target.texture.minFilter = THREE.NearestFilter;
target.texture.magFilter = THREE.NearestFilter;
target.depthTexture = new THREE.DepthTexture();
target.depthTexture.format = THREE.DepthFormat;
target.depthTexture.type = THREE.UnsignedShortType;

//set transparent objects material.depthWrite = false

renderer.setRenderTarget(renderTarget);
renderer.render(scene, camera);

// reset transparent objects material.depthWrite

In this way, I can get desired depth texture and color(only drew the scene once).The only problem is transparent objects will be drawn in the wrong order.
So there is a way to get the depth texture with opaque objects and draw the transparent component correctly(It’s better to draw scene only once)?
Any help greatly appreciated!

2

This thread and the attached example code may be helpful - you can switch off certain elements, render the depth texture, then switch the elements back before color is rendered.

3

Thanks for the answer.

  // depth pass

  water.visible = false; // we don't want the depth of the water
  scene.overrideMaterial = depthMaterial;

  renderer.setRenderTarget(renderTarget);
  renderer.render(scene, camera);
  renderer.setRenderTarget(null);

  scene.overrideMaterial = null;
  water.visible = true;

  // beauty pass

  var time = clock.getElapsedTime();

  water.material.uniforms.threshold.value = params.threshold;
  water.material.uniforms.time.value = time;
  water.material.uniforms.foamColor.value.set(params.foamColor);
  water.material.uniforms.waterColor.value.set(params.waterColor);

  renderer.render(scene, camera);

Is this the code? I think it’ll work.But I need to draw the opaque object twice.