Showing highlighted silhouette of mesh ONLY when it is occluded

Welcome aboard!

What you could is drawing the object at the end (after all other objects) this way:

  • draw the object with zTest=Greater / disable z writing / use the shader with the x-ray effect. This pass will draw the parts of the object using the x-ray shader where the object is occluded by some other objects from the scene
  • draw the object normally with its normal shader. This pass will draw the parts of the object that are not occluded.

In Babylon.js, you will need to clone the object to be able to draw it two times with a different shader each time. To make sure the objects are drawn in the right order, you can set Mesh.renderingGroupId=1 for the cloned objects and Mesh.renderingGroupId=2 for the regular object. That way, all normal objects will be drawn first (because their renderingGroupId is 0 by default), then the objects with the x-ray shader will be drawn, then the objects without the x-ray shader.

Here’s an example:

I have used a node material for the x-ray shader. Feel free to use whatever you want for this shader.

Note that you will need those lines to avoid having the zbuffer cleared between the render groups:

scene.setRenderingAutoClearDepthStencil(1, false, false, false);
scene.setRenderingAutoClearDepthStencil(2, false, false, false);

Note also that you could use a simplified mesh for the x-ray pass, you don’t have to use a clone of the original mesh.

7 Likes