Why depth renderer texture only gave me 0 and 1?

Hi! I’m trying to get the depth buffer to use in multi-pass.

I followed this Depth Renderer document and trying to just print the depth texture data (r channel) on screen.

            vec4 depth = texture2D(depthTexture, vUV);
            float x = depth.r;
            gl_FragColor = vec4(x, x, x, 1.);

I expect to see a gradient from black to white, where things closer to the camera is darker and farther to the camera is whiter. But I actually only see all objects are black and the background is white, which means it only gives me 0 and 1 (tried with float x = fract(depth.r) and showing all black, meaning there’s no float in between).
I am using the new Edge and chrome.

Why is that?

code here:
https://www.babylonjs-playground.com/#RL5CX0#2

1 Like

You don’t see a gradient because the camera Z range is too big. Try to tighten the minZ and maxZ values:

https://www.babylonjs-playground.com/#RL5CX0#4

5 Likes

Thanks so much! That’s awesome! Now I can see the gradient with your code!

    camera.minZ = 1;
    camera.maxZ = 17;

In case other readers encounter the same thing, FYI:

The camera minZ, maxZ: Camera | Babylon.js Documentation (babylonjs.com)
They define the near and far clipping plane of the camera.
By default (the doc doesn’t say it, but I test it in the playground), minZ is 1, maxZ is 10000.
The depth buffer will map that to a r value of 0 to 1 (the g b a values are just 1).

2 Likes

Hello, I think this can help you to understand why.
This is how bbl write depth value to gl_FragColor :grin:


1 Like

If unpacking, only R is output. If packing, bll store depth (linear0_1) with r (low 8bit) g(middel1 8bit) b (middel2 8bit) a(hight 8bit)

1 Like

Awesome! Thanks for the in-depth explanation!