Prevent transparent meshes from overlapping

Questions
1

Hi all,

In my project I want to prevent overlapping transparent meshes (only show the nearest one).

This is my mesh material:

const baseMaterial = new StandardMaterial('baseMaterial', this.scene)
baseMaterial.needDepthPrePass = true
baseMaterial.alpha = 0.4

'needDepthPrePass = true’ obscures subsequent transparent faces in the same mesh.
Left image is single mesh without depth pre pass, middle one is single mesh with depth pre pass, and right one is how it looks right now with several meshes each with depth pre pass enabled.

Screenshot 2020-08-25 at 15.52.03
Screenshot 2020-08-25 at 15.52.033300×926 345 KB

Does anyone know of a way to enable depth pre pass inbetween meshes in a scene (in the same rendering group)?

Thanks!
Oscar

2

Doc: https://doc.babylonjs.com/resources/transparency_and_how_meshes_are_rendered#concave-meshes-and-transparency

I think using separateCullingPass is probably the solution here

3

Hmm, for me the meshes are still overlapping, would you mind elaborating?

https://playground.babylonjs.com/#1PLV5Z#21

Thanks!

4

For this to work, I think you would need to sort the transparent meshes from front to back and a flag like needDepthPostPass.

You can change the way transparent objects are sorted by calling:

scene.setRenderingOrder(0, undefined, undefined, 
         BABYLON.RenderingGroup.frontToBackSortCompare);

However, needDepthPostPass does not exist, so I have overloaded RenderingGroup.renderSorted to implement it:

https://playground.babylonjs.com/#1PLV5Z#22

I don’t know if needDepthPostPass should be added to the core engine, however, as it seems to be quite a specific need…

1 Like
5

That worked almost perfectly, many thanks!

Another idea I had was to try to set the alpha on the rendering group as a whole instead of on each individual mesh. Don’t know if that’s possible but perhaps it could be a cleaner solution in my case.

6

That would not work because objects drawn after another one and over it (so closer from the camera) will blend with it.

See this PG:

https://playground.babylonjs.com/#1PLV5Z#25

It’s setting the alpha mode “by hand” on each mesh, but the meshes themselves are not flagged with transparency, so they are rendered as opaque meshes: depth writing and testing are both enabled.

At first sight you would think it works but:
image

The cylinder is drawn before the torus, so the torus will blend with it.

For this to work, I think you would either need to sort the meshes from front to back or need the back faces to be drawn as usually, meaning without transparency so that they won’t blend with whatever is behind, and then draw the front faces with transparency.

With front to back sorting:

https://playground.babylonjs.com/#1PLV5Z#24

It does work, but it could fail depending on the position of your objects and their bounding infos, as the sorting is based only on the bounding info.

1 Like