Depth Renderer

BABYLON.DepthRenderer is a tool used to generate a depth texture (a texture that contains the depth buffer and can be used to read scene depth values).

Using it is pretty straightforward:

const renderer = scene.enableDepthRenderer();

Starting from there, the scene will fill the renderer with depth values for you. All active meshes (meshes that are visible from the current camera's point of view) are drawn by the DepthRenderer.

Warning: Transparent meshes are not drawn because they are not written to the depth buffer

You can then use the texture associated with the renderer like any other texture by using the getDepthMap() function:

import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial";
const mat = new StandardMaterial("mat01", scene);
mat.emissiveTexture = renderer.getDepthMap();

If you want to disable the renderer, just call the following code:

scene.disableDepthRender();

As you can see, you can use the depth map associated with the DepthRenderer with any materials or post-processes.

Note: By default, the generated texture uses float components thanks to the WebGL OES_texture_float extension. If this extension is not supported, Babylon.js reverts to byte components, which means less precision for depth values.