Get depth in post processing shader

Questions
, , , , ,
1

I have attempted to use this fiddle (which is basically a working version of this one), this example and this explanation to integrate into my own fiddle the ability to have a post processing shader redrawing things using the scene’s depth, but all I get is a white canvas and I don’t know what to do to make it work.

Can someone help me identify what is missing or done wrong in my fiddle (maybe a working fork if that’s not too much to ask)? For the record, I use a single camera and want that simple shader to modify the original image presented to the user based on depth. The final aim is to use the original color, the depth value and some other parameters which will be added later on to construct a “volumetric layer” that would simulate an atmosphere.

P.S. No need to bother with the terrain, clone and raycaster parts in my code, they’re working fine. You can easily test how things work correctly at a basic level by either uncommenting the /* Working Shader Test */ part in the fragment shader (this will draw a red “layer” over the scene), or initialize the global compose variable with false (to toggle the post processing / composer stuff off and draw the original outcome).

2

Nevermind, I figured it out. Apparently, I was doing everything right and the desired outcome was already displayed on the screen. However, because I used such extreme values for camera.near and camera.far and enabled its logarithmic depth buffer, the values of the depth variable in the fragment shader were exceptionally small, almost 0, so the colors were indistinguishable variations of white.

Multiplying depth with a large factor like 360000000000.0 when getting the RGB of the final color in the shader helps in illustrating this. A minimal example of using depth to fade colors based on distance to the camera here.

EDIT: I also adjusted the WebGLRenderTarget instantiation from the 5th link in my original post to make it more compact (since lots of defaults were used) and in the process I got rid of some mistakes in definining the object tree there.

2 Likes