# Shader use scene's depthmap to displace a plane

**URL:** <https://discourse.threejs.org/t/shader-use-scenes-depthmap-to-displace-a-plane/70028>\
**Category:** Questions\
**Tags:** shaders\
**Created:** [August 28, 2024, 6:59pm UTC](https://discourse.threejs.org/t/shader-use-scenes-depthmap-to-displace-a-plane/70028 "2024-08-28T18:59:32Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gaelle\_Berton](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gaelle_berton/32/47621_2.png) [@Gaelle\_Berton](https://discourse.threejs.org/u/Gaelle_Berton)\
**Post date:** [August 28, 2024, 6:59pm UTC](https://discourse.threejs.org/t/shader-use-scenes-depthmap-to-displace-a-plane/70028/1 "2024-08-28T18:59:32Z")

</div>

the plane needs to be always over the background landscape, how can in use the scene’s depthmap to displace the geometry?

---

<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:** [August 29, 2024, 3:49am UTC](https://discourse.threejs.org/t/shader-use-scenes-depthmap-to-displace-a-plane/70028/2 "2024-08-29T03:49:24Z")

</div>

You can’t access the depth buffer directly. If you want to access is, you have to create/manage/render to/use… a WebGLRenderTarget with a depth attachment, then pass the depth target.texture as a uniform for a custom shader to displace with, or you might be able to get away with using it in plane.material.displacementMap = depthTarget.texture  
Your plane may need many subdivisions to get something interesting.

---

<div class="post-metadata">

**Author:** ![Gaelle\_Berton](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gaelle_berton/32/47621_2.png) [@Gaelle\_Berton](https://discourse.threejs.org/u/Gaelle_Berton)\
**Post date:** [August 30, 2024, 8:22pm UTC](https://discourse.threejs.org/t/shader-use-scenes-depthmap-to-displace-a-plane/70028/3 "2024-08-30T20:22:31Z")

</div>

Thanks! so i add a camera to the scene, render a depth texture to use it? wouldnt there be a simpler way to get it (like in unity/unreal)?

---

<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:** [August 30, 2024, 8:29pm UTC](https://discourse.threejs.org/t/shader-use-scenes-depthmap-to-displace-a-plane/70028/4 "2024-08-30T20:29:48Z")

</div>

I just re-read your question and I might be overthinking what you need.

You sure you don’t just want:

depthTest:false,depthWrite:false,transparent:true.  
and mesh.renderOrder = 10;

on your plane? (causing it to always render last, and on top of what was there before)

Or are you trying to actually warp a mesh to a depth buffer?

By default in webGL you can’t access the contents of the main display buffer, only rendertargets.

---

<div class="post-metadata">

**Author:** ![Gaelle\_Berton](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gaelle_berton/32/47621_2.png) [@Gaelle\_Berton](https://discourse.threejs.org/u/Gaelle_Berton)\
**Post date:** [September 11, 2024, 6:28pm UTC](https://discourse.threejs.org/t/shader-use-scenes-depthmap-to-displace-a-plane/70028/5 "2024-09-11T18:28:40Z")

</div>

> [@manthrax](#):
>
> r are you trying to actually warp a mesh to a depth buffer?

Sorry for the late reply, yes I am trying to warp the mesh to the depth Buffer, is there an example of the dpeth target used for displacement?

---

<div class="post-metadata">

**Author:** ![Gaelle\_Berton](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gaelle_berton/32/47621_2.png) [@Gaelle\_Berton](https://discourse.threejs.org/u/Gaelle_Berton)\
**Post date:** [September 11, 2024, 10:16pm UTC](https://discourse.threejs.org/t/shader-use-scenes-depthmap-to-displace-a-plane/70028/6 "2024-09-11T22:16:32Z")

</div>

Im using a shaderMaterial, i will have to implment this in the shader, how can i get the height of the depthTexture, the following code seems to return on the Z, i need Y!

- the camera is a Perpective Camera
- the Depth Texture has the default values

```javascript

float readDepth( sampler2D depthSampler, vec2 coord ) {
				float fragCoordZ = texture2D( depthSampler, coord ).x;
				float viewZ = perspectiveDepthToViewZ( fragCoordZ, cameraNear, cameraFar );
				return viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );
			}

```

---

<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:** [September 12, 2024, 3:17am UTC](https://discourse.threejs.org/t/shader-use-scenes-depthmap-to-displace-a-plane/70028/7 "2024-09-12T03:17:47Z")

</div>

Depth textures are only a single value… but you can use it as Y.

Are you reading this in your vertex shader? You would just add this to “position.y” before you run it through the modelView + proj matrices.

---

<div class="post-metadata">

**Author:** ![Gaelle\_Berton](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gaelle_berton/32/47621_2.png) [@Gaelle\_Berton](https://discourse.threejs.org/u/Gaelle_Berton)\
**Post date:** [September 12, 2024, 4:19am UTC](https://discourse.threejs.org/t/shader-use-scenes-depthmap-to-displace-a-plane/70028/8 "2024-09-12T04:19:27Z")

</div>

I dont understand what is a Depth Texture it seems.

---

<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:** [September 12, 2024, 5:13am UTC](https://discourse.threejs.org/t/shader-use-scenes-depthmap-to-displace-a-plane/70028/9 "2024-09-12T05:13:22Z")

</div>

A depth texture is just a texture that you happen to store depth information in.

It’s just a name. The texture itself isn’t much different than other textures… except…

it might be a single channel… instead of RGB

or it might be a Float channel… whereas often textures are 8 bit rgb

---

<div class="post-metadata">

**Author:** ![Gaelle\_Berton](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gaelle_berton/32/47621_2.png) [@Gaelle\_Berton](https://discourse.threejs.org/u/Gaelle_Berton)\
**Post date:** [September 13, 2024, 8:02pm UTC](https://discourse.threejs.org/t/shader-use-scenes-depthmap-to-displace-a-plane/70028/10 "2024-09-13T20:02:27Z")

</div>

Thanks, so… i should make the depthTextrue withthe camera pointed specifically to my needs so the depth equates the elevation in my case?  
wouldnt it be easier to save the scenes vertex position?

---

<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:** [September 13, 2024, 10:36pm UTC](https://discourse.threejs.org/t/shader-use-scenes-depthmap-to-displace-a-plane/70028/11 "2024-09-13T22:36:42Z")

</div>

I don’t know what you’re building, so it’s hard to say.  
I’m not sure what’s hard/easy about rendering a depth buffer.  
A shader can’t effectively read from an array unless it’s written to a texture.  
If you have such an array you can also create a single channel DataTexture from it?

[https://threejs.org/docs/#api/en/textures/DataTexture](https://threejs.org/docs/#api/en/textures/DataTexture)

---

<div class="post-metadata">

**Author:** ![Gaelle\_Berton](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gaelle_berton/32/47621_2.png) [@Gaelle\_Berton](https://discourse.threejs.org/u/Gaelle_Berton)\
**Post date:** [September 17, 2024, 7:26pm UTC](https://discourse.threejs.org/t/shader-use-scenes-depthmap-to-displace-a-plane/70028/12 "2024-09-17T19:26:44Z")

</div>

> [@manthrax](#):
>
> shader can’t effectively read from an array unless it’s written t

thanks, interesting ideas. i will look into this.