Reverse Depth Buffer question

Hello everyone!

I have been looking at the discussion around the reverse depth buffer (Reverse Depth Buffer (z-buffer)) and was very excited to see it is actually implemented in the engine!

I did not find documentation about how to use it so I tried setting the useReverseDepthBuffer property of the engine to true ( and displaying the depth map as a postprocess.

The expected result is, as I undestrand, that objects far away have a depth of 0 (hence should be black) and closer ones have depth closer to 1 (hence should be white).
Yet in my playground I have the same colors as with the regular depth buffer. What did I do wrong?

cc @Evgeni_Popov

1 Like

The depth texture generated by the depth renderer is the same in the normal or reverse depth buffer mode, so that your code does not break if you reuse the texture in some other processes and you want to switch between normal/reverse mode.

If you really want to get the true z value when in the reverse depth buffer mode, you should do 1-z in the shader.


Wow, that’s actually impressive that it is seemless for the user. I made a small playground demo to show that it works just by changing the useReverseDepthBuffer property here: Babylon.js Playground

I am a bit struggling to see how the increased precision is not lost when transforming the inverted depth to its linear counterpart, but it just works in the end haha

Actually, it does not really work in WebGL (even if the reverse depth buffer mode is a little better in your PG, but there are still artifacts), because the Z range in NDC is [-1,1] and not [0,1].

In WebGPU, however, reverse depth buffer fully works, and if you switch to WebGPU you will see there are not artifacts even when you move.

1 Like

Hopefully WebGPU reaches greater adoption soon then!

I made a PG to solve the depth buffer in the context of a small postprocess. My goal is to get the same result with and without reverse depth:

When changing the type of depth buffer, the postprocess will change its calculation (line 87) to compute the true depth of the scene. As you can see if you toggle the reverse depth buffer, the result is not the same.

What is the formula to get the true depth of the scene with the reverse depth buffer in BabylonJS?

As explained in my previous post, the depth texture generated by the depth renderer is the same in both mode, so you don’t need to make a special case, you can remove the #ifndef / #else.

The reverse depth buffer mode only impacts the values stored in the zbuffer used to generate and test the meshes, not the texture produced by the depth renderer (which is different from the zbuffer attached to the framebuffer for rendering purpose!).

I am a bit confused here, when I remove the special case: i do not get the same result with and without the depth buffer.

Maybe it is just me, this is what I see:

Reverse depth buffer = false

Reverse depth buffer = true

Do you see the same pictures in both cases on your computer?

Sorry, I forgot to say you have to change the worldFromUV function: in reverse depth buffer mode, you should use z=1 and not z=-1 (in ndc), as now the near and far planes are reversed.

1 Like

My savior! My problem is now gone thank you :heart: Here is the final PG with the working solution