Use actual depthBuffer as texture in shader

Questions
1

Hi,

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?

?

2

This example should do exactly what you need:

https://threejs.org/examples/webgl_depth_texture

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
3

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, this.camera ) );

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?