Using depth texture in ShaderPass

Questions
1

Not sure at all if I said this correct, but, I´m trying to use the depth buffer within the “effect composer” for a custom shader. I understand that I need to render to a renderTarget first to get the depthbuffer from the renderer…

Now, when I want to use the depthTexture of the renderTarget in my shader, I´m failing… I think ´cause I do not unpack/pack the depthTexture correctly in the shader?

I used the fragment-shader from the threejs´s “wegl_depth_texture” example, but, I only get a black screen without any errors (in the console)…

		#include <packing>
		varying vec2 vUv;
		uniform sampler2D tDiffuse;
		uniform sampler2D tDepth;
		uniform float cameraNear;
		uniform float cameraFar;
		float readDepth( sampler2D depthSampler, vec2 coord ) {
			float fragCoordZ = texture2D( depthSampler, coord ).x;
			float viewZ = perspectiveDepthToViewZ( fragCoordZ, cameraNear, cameraFar );
			return viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );
		}
		void main() {
			//vec3 diffuse = texture2D( tDiffuse, vUv ).rgb;
			float depth = readDepth( tDepth, vUv );
			gl_FragColor.rgb = 1.0 - vec3( depth );
			gl_FragColor.a = 1.0;
		}

I use this shader in a/as a ShaderPass, but it´s not working… or I do it wrong!?

2

It seems you are using the code from the official depth texture example. Try to demonstrate the problem with a live example. Please keep in mind that no member of this community has telepathic abilities. Without providing an option for debugging, you probably won’t get any help.

2 Likes
3

I don’t know, I have my doubts sometimes.

1 Like
4

Sorry! And sure …so here we go:

If I setup the depthShader and in the fragmentShader set tDiffuse to be the result, it´s working:
http://jsfiddle.net/blackInk/tf1hdvLa/14/

If I setup the depthShader and in the fragmentShader set depth to be the result, it´s not working aka, think the depth´s value is just “0”, so… :
http://jsfiddle.net/blackInk/tf1hdvLa/16/

Same shader, but my “reading depth”, taken 1:1 from the working example “webgl_depth_texture” is not working here?

I´m for sure mistaken something!?

5

Your first fiddle throws the following warnings so it’s not working correctly:

image
image1558×170 46.7 KB

Are you aware that this.width and this.height are undefined?

6

Well, this had “not so much” to do with the not rendered depth… but I corrected it so the warnings go away.

!!!Still, diffuse from depthShader works:
http://jsfiddle.net/blackInk/tf1hdvLa/24/

Use/Show depthTexture from depthShader fails:
http://jsfiddle.net/blackInk/tf1hdvLa/25/

7

Here is your updated fiddle: BLOOM ADVANCED - JSFiddle - Code Playground

  • It does not make sense to call clear() right after rendering to depthRenderTarget. This will clear its content.
  • You have to be aware that passing a shader to ShaderPass means it’s uniforms are cloned (meaning the texture of the WebGLRenderTarget which does not work). So you have to assign the values right after the pass creation.
  • It’s not necessary to assign tDiffuse since it’s automatically assigned by ShaderPass. It represents the contents of the EffectComposer’s read buffer right before the pass is executed. In your particular case, it’s the result of RenderPass.
1 Like
8

How cool is that, thanks a lot for helping and more, explaining!!!