Hello,
We have this model with transparent materials.
map.gltf.zip (46.6 KB)
The problem is that in some angles the material breaks:
Are we doing something wrong with our model or?
Hi.
I suggest you check this out if you are interested on how transparent meshes are rendering and what is going on. Transparent Rendering | Babylon.js Documentation
In a nutshell, you will usually have issues with transparent meshes (especially when they are multiple like in your case), as webgl basically doesn’t know what is in front and what is in back.
One thing you can to is to use alphaIndex, you can somewhat think of this as zIndex, and set the order of rendering transparent meshes;
In some cases you can enable depthPrePass and get good result.
You can check this playground and see the effects of both, but in any case, one of these options (or both), should help to solve your issue.
https://www.babylonjs-playground.com/#FAGWBB
EDIT: You can use rendering groups as well, but I usually go with alphaIndex
2 Likes
Hmm, this is a hard one. The glTF loader by default creates mesh instances for glTF nodes that point to the same glTF mesh. Mesh instances are not sorted individually when they need alpha blending. You can turn off instances by setting a glTF loader option which will mostly make it work, but that still won’t solve the problem completely since we sort meshes which can still result in the wrong order in specific views.
