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: https://playground.babylonjs.com/#4VQX0J#3
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:
Interesting, looks like setting order independent transparency fixes the issue in the example
scene.useOrderIndependentTransparency = true;
https://playground.babylonjs.com/#4VQX0J#4
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?
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
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: https://playground.babylonjs.com/#4VQX0J#9
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.
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).
Doing:
mesh.parent = null;
parent.dispose();
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).
