ShaderMaterial: make it hide itself

[gkjohnson]

@Mugen87 I believe in this OIT case would render the overlapping section of both spheres rather than just rendering the closest face as transparent like the second image.

@felixmariotto You can use a depth prepass approach to render transparent objects like you have shown in your second image. See this other forum post for an example of the implementation and how it works:

Does anyone know how the "depth pre-pass" option of babylonjs is implemented?

For transparent objects you can add two versions of the transparent object to the scene with the same transform (or make a multi material mesh) with one material that writes only to depth first and one that draws the blended transparent object. Here’s a js fiddle showing how: With multiple overlapping transparent objects there are couple ways to do it. You could draw all transparent depth prepass objects first and then draw the blended materials afterward which will result in no transparent o…

The gist of it is that the transparent object is first rendered to depth only with out writing to color first. Then the transparent material is rendered and because depth has already been written to only the closest pixels will be rendered.

I’ve submitted PR #20673 to enable this more easily with a material flag because transparency artifacts are a common problem and this is a performant approach that I think improves things quite a bit.