Merged Meshes with transparency sometimes doesn't render what's behind

Hi, I have a problem with merged planes and transparency when the meshes are stacked on top of each others. If the camera is sort of below the merged meshes it will not be transparent and if above it’ll behave as expected. Instanced Meshes renders correctly.

using the scene.useOrderIndependentTransparency does fully solve the rendering issue but we get 1 FPS so :slight_smile:
Using needDepthPrePass improved it but didn’t solve it and setting the mesh.alphaIndex in correct order will solve the issue but when moving camera it needs a different order.

Playground with reproduced issue and camera is setup so it initially renders incorrectly and if you tap back arrow it will render correctly and if you press forward it’ll render incorrectly.
The left group are the merged meshes and the right group are the instanced meshes for comparison.
Also the left group is made up of 3 rows where each row is its own set of merged meshes, so 3 groups of merged meshes in total.
https://playground.babylonjs.com/#U0DWD2#4

And here is an image that demonstrates the issue:

Hopefully I missed something simple if anything comes to mind :slight_smile:

Adding @Evgeni_Popov to have a look.

That’s the problem with transparency, and unfortunately there are only more or less good workarounds, unless you can use OIT. But, as you’ve seen, this takes a heavy toll on performance and isn’t always applicable.

See this page for further explanations and how to remedy the situation (up to a point):

Thanks, I had another look.

Maybe this is what happens in our case then as we have meshes consisting of merged planes and rotation.

  • Avoid having heavily-stretched alpha blended meshes (i.e. large planes); since the center of its bounding sphere is used for depth sorting, doing this may result in a mesh being sorted as far away from the camera but actually closer to many other meshes.

This is indeed one problem. But in your case, if you merge several meshes, some faces may be further apart than others but will be rendered first, as the faces in a mesh are rendered in the order in which they are described in the index buffer and does not depend on the camera parameters. You can try to improve matters in this case by enabling facet sorting, but this is detrimental to performance (and not foolproof).

Just an update to not leave the thread without an answer! In my case I solved it by merging the cloned meshes and set needDepthPrePass = true if the planes are rotated at a non 90-degree rotation.

I did try the facet sorting but either I didn’t understand it or didn’t work in my case. But it’s nice to know about the feature! The mesh got some odd rendering issues like the plane was cut in half and ultimately the performance of calling updateFacetSorting() was not good enough performance for our use case.