# How to get depthtexture on WebGLRenderTarget that contains only opaque objects

**URL:** <https://discourse.threejs.org/t/how-to-get-depthtexture-on-webglrendertarget-that-contains-only-opaque-objects/60842>\
**Category:** Questions\
**Tags:** depth-texture\
**Created:** [January 29, 2024, 10:33am UTC](https://discourse.threejs.org/t/how-to-get-depthtexture-on-webglrendertarget-that-contains-only-opaque-objects/60842 "2024-01-29T10:33:34Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![QiuBin1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/qiubin1/32/43166_2.png) [@QiuBin1](https://discourse.threejs.org/u/QiuBin1)\
**Post date:** [January 29, 2024, 10:33am UTC](https://discourse.threejs.org/t/how-to-get-depthtexture-on-webglrendertarget-that-contains-only-opaque-objects/60842/1 "2024-01-29T10:33:35Z")

</div>

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

```javascript
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!

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [January 29, 2024, 4:22pm UTC](https://discourse.threejs.org/t/how-to-get-depthtexture-on-webglrendertarget-that-contains-only-opaque-objects/60842/2 "2024-01-29T16:22:17Z")

</div>

[This thread](https://discourse.threejs.org/t/unlit-water-shader-with-foam/11641) 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.

---

<div class="post-metadata">

**Author:** ![QiuBin1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/qiubin1/32/43166_2.png) [@QiuBin1](https://discourse.threejs.org/u/QiuBin1)\
**Post date:** [January 30, 2024, 2:52am UTC](https://discourse.threejs.org/t/how-to-get-depthtexture-on-webglrendertarget-that-contains-only-opaque-objects/60842/3 "2024-01-30T02:52:07Z")

</div>

Thanks for the answer.

```javascript
  // 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.