Semitransparency in custom material

Hello, I have a question about procedural textures with semitrasparent parts. I know that the transparency topic is quite complex and I went through the babylon docs, but still cannot solve one problem. I tried to localise it in the playground here:
So, I have a mesh and in this example I want everything below 0 by Y axis to be opaque, and everything above with alpha 0.2.
I set alpha of the material to 0.9999 just to force it out of the depth buffer.
However the bottom part (blue-ish one) looks not as opaque as I’d expect:

I played with different alpha modes, but couldn’t get a desired result.
I hope that I’m just missing some part like setting a face rendering order.

Interesting, looks like setting order independent transparency fixes the issue in the example

scene.useOrderIndependentTransparency = true;
But, as I understand this is something new, I cannot see the parameter in v5.0.0-alpha.55
Perhaps there are another way of solving the problem?

In your case, setting mat.separateCullingPass = true; will work:

That will render first the back faces then the front faces. As your object is convex that will fix the rendering artifacts.

1 Like

Thank you @Evgeni_Popov it definitely solves the issue in the example, however didn’t work on my real case scenario. By some reason the opaque part from the back side is rendered on top of front.
I’ll try to play with it and fix or reproduce in another example.
Anyways it is a good hint :+1:

Here it is, reproduced partially:
These 2 areas rendered in front even though they are from the back side of the mesh.

This mesh is not convex so you can’t avoid having artifacts depending on the camera position.

There is a last thing you can try to use, it is facet sorting: Facet Data | Babylon.js Documentation

However, it’s still possible to get artifacts and be warned that it consumes some CPU because it sorts the facets of the mesh each frame:

Thank you again
I tried mustDepthSortFacets before and yes it worked, but I had to refuse this solution as in my case the geometry of the mesh is complex (~500k indices) and I need to avoid loading CPU with extra calculation on such a big mesh. I think in my case cloning the mesh and just make the bottom part opaques and clip the upper part will be better for performance.
I’ll give it a test when on a laptop.

A quick try with a working result is here:
But I also encounter 1 weird side effect. If you take a close look on the mesh, it is rotated by Y axis on 180 degrees. The transformation matrix was not touched so. And if I open an inspector tool and try to rotate it on a fraction of degree it flips to a correct position. The cloning is synchronous process, so it shouldn’t be a case.

computing world matrix solves the issue. Apparently clonning doesn’t copy the transformations.

When loading a gltf file in the default left-handed system of Babylon, a node is created which is doing a 180° rotation on Y axis and Z=-Z so that the mesh is displayed correctly.

You should set scene.useRightHandedSystem = true; if you want this transformation to be removed (in fact the root node still exist but its transformation is the identity transformation).


mesh.parent = null;

on meshes loaded in left-handed system may lead to problems for materials that have been loaded from the file and that are applied to meshes (it’s a problem you avoid in the PG because you create separate materials that you apply on the meshes but you should be aware it’s a potential problem).


great, thank you very much for support