# WebGPU: Proper way to get depth from a Node

**URL:** <https://discourse.threejs.org/t/webgpu-proper-way-to-get-depth-from-a-node/68271>\
**Category:** Questions\
**Tags:** tsl\
**Created:** [July 17, 2024, 7:49pm UTC](https://discourse.threejs.org/t/webgpu-proper-way-to-get-depth-from-a-node/68271 "2024-07-17T19:49:11Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![cmhhelgeson](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/cmhhelgeson/32/47626_2.png) [@cmhhelgeson](https://discourse.threejs.org/u/cmhhelgeson)\
**Post date:** [July 17, 2024, 7:49pm UTC](https://discourse.threejs.org/t/webgpu-proper-way-to-get-depth-from-a-node/68271/1 "2024-07-17T19:49:11Z")

</div>

More of an API question. Is there a way with the node system to use depth values in a fragment shader without the MRT system or defining a depth texture, or is MRT the way to go?

---

<div class="post-metadata">

**Author:** ![Attila\_Schroeder](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/attila_schroeder/32/36097_2.png) [@Attila\_Schroeder](https://discourse.threejs.org/u/Attila_Schroeder)\
**Post date:** [July 17, 2024, 11:31pm UTC](https://discourse.threejs.org/t/webgpu-proper-way-to-get-depth-from-a-node/68271/2 "2024-07-17T23:31:06Z")

</div>

Hi cmhhelgeson,

If you want to have the depth texture of the scene with the node system in a fragment shader without a MRT and without defining a depth texture, this is how it works:

```javascript
import {depthPass, viewportTopLeft, attribute, uv} from "./three/nodes";

const sceneDepthPass = depthPass( scene, camera );
const sceneDepthPassColor = sceneDepthPass.getTextureDepthNode();

const fragmentShader = wgslFn(`
   fn main_fragment(
      uv: vec2<f32>,
      viewportDepthTexture: texture_depth_2d,
      viewportDepthSampler: sampler
   ) -> vec4<f32> {

      return textureSample(viewportDepthTexture, viewportDepthSampler, uv) + vec4<f32>(1, 0, 0, 1);
   }
`);

const shaderParams = {
   uv: viewportTopLeft, //or attribute("uv") or uv()
   viewportDepthTexture: sceneDepthPassColor,
   viewportDepthSampler: sceneDepthPassColor
}

```

sceneDepthPassColor is then the depthTexture of the scene. Here is a code pen:

https://codepen.io/Spiri0/embed/preview/vYwJKER?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=vYwJKER

The advantage over renderTargets is that you have no frame delay.  
I use this in postprocessing to reconstruct the world coordinates with the depth values and create atmosphere. It works better than with a renderTarget depthtexture in webgl. The terrain doesn’t have any color yet, but this is about the effect with the depth texture:

 ![131k_4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/7/073665f447a6080f39dcd31c0c53df8f51cb1dd1.jpeg)

I don’t yet know how fxaa works in WebGPU, but the node for the depthTexture is very practical compared to the renderTarget method that I did first and is also more efficient.

---

<div class="post-metadata">

**Author:** ![dubois](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dubois](https://discourse.threejs.org/u/dubois)\
**Post date:** [July 17, 2024, 11:31pm UTC](https://discourse.threejs.org/t/webgpu-proper-way-to-get-depth-from-a-node/68271/3 "2024-07-17T23:31:56Z")

</div>

I think the question was is it possible to somehow obtain the depth value without rendering to any depth targets? Which i was wondering too if it could be possible past webgl 1.

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [July 18, 2024, 12:05am UTC](https://discourse.threejs.org/t/webgpu-proper-way-to-get-depth-from-a-node/68271/4 "2024-07-18T00:05:41Z")

</div>

gl\_FragCoord.z ?

---

<div class="post-metadata">

**Author:** ![cmhhelgeson](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/cmhhelgeson/32/47626_2.png) [@cmhhelgeson](https://discourse.threejs.org/u/cmhhelgeson)\
**Post date:** [July 18, 2024, 1:53am UTC](https://discourse.threejs.org/t/webgpu-proper-way-to-get-depth-from-a-node/68271/5 "2024-07-18T01:53:03Z")

</div>

I think maybe I need to be more specific in what I’m trying to do. I’m trying to replicate MeshDepthMaterial within the node system ( i.e a MeshDepthNodeMaterial class ), which I think would necessitate applying the depth values to the diffuseColor of a material without necessarily using the MRT.

---

<div class="post-metadata">

**Author:** ![Attila\_Schroeder](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/attila_schroeder/32/36097_2.png) [@Attila\_Schroeder](https://discourse.threejs.org/u/Attila_Schroeder)\
**Post date:** [July 18, 2024, 2:51am UTC](https://discourse.threejs.org/t/webgpu-proper-way-to-get-depth-from-a-node/68271/6 "2024-07-18T02:51:40Z")

</div>

You can also choose an object instead of the scene. This means that only the depth of the object is written into the texture, but maybe I’m misunderstanding you

```javascript
const material = new MeshBasicNodeMaterial();
material.colorNode = vec4(0, 0.25, 0.75, 1); 
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const box = new THREE.Mesh( geometry, material );
scene.add( box ); 
  
const boxDepth = depthPass( box, camera );
const depthPassTexture = boxDepth.getTextureDepthNode();

```

Otherwise I can only think of

```javascript
var fragDepth = position.z / position.w;

```

in the vertex shader and pass it via a varying to the fragment shader but that has nothing to do with the node system but is purely a shader thing. I also know that you are pretty smart and if you had meant that you wouldn’t have asked in the first place 😄