Render different color by depthMap with shader

[Evgeni_Popov]

Welcome aboard!

There’s a simply way to do this, which is to clone the plane and apply a material with an inverted depth function (GREATER). This way the plane will only be rendered when it is occluded by something.

For this to work, the plane must be rendered last, after all possible occluders have updated the depth buffer.

In this PG, I used a rendering group id of 1 for the sprites, to make sure that they are rendered last:

Babylon.js Playground

Also, this could help:

Adding "floating labels"

You can easily generate 2D coordinates from 3D coordinates to position your label on screen with HTML/CSS. Have a look at this thread Check if a point is in front or behind the mesh and PG https://playground.babylonjs.com/#CUH660#3. In this PG, I draw in CSS two squares, given two 3D positions. If you need that the “i” icons be transparent when they are behind something (which was the purpose of the thread), don’t do it as I did, copying the zbuffer is taxing to do each frame. Do it as @Makc3…