Use actual depthBuffer as texture in shader


I want to use the actual depth(Texture) from my scene as texture in a (fragment) shader. Is it relatively easy to get the actual depth/depthTexture/depthMaterial from a whole scene, render it as a texture and use it in shader as input/texture uniform?


This example should do exactly what you need:

It renders the scene into a render target. The depth information is stored into an instance of DepthTexture which is then visualized on a full-screen quad.

Notice that DepthTexture requires the WebGL extension WEBGL_depth_texture. However, the support is quite good now so I would say it’s safe to use (without fallback).

1 Like

I see what is going on there. In fact I´m still stuck.
My setup by now: I´m using the EffectComposer, and I add shaders there, like fxaa and halftone, now, I want to use the depthTexture in one of that shaders in that existing pipeline, how may I achieve this?

this.composer = new EffectComposer( this.renderer );
this.composer.addPass( new RenderPass( this.scene, ) );

var depthShader = {

    uniforms: {
        depthTexture: { type: "t", value: 0, texture: null },

    vertexShader: [

      "varying vec2 vUv;",

      "void main() {",
          "vUv = uv;",
          "gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);",

    ].join( "\n" ),

    fragmentShader: [

        "uniform sampler2D depthTexture;",
        "varying vec2 vUv;",
        "void main() {",         
           ////////////////// do something with depthTexture here.... 

    ].join( "\n" )  


Any help?