Problems when the two overlapping meshes are alpha blend

Hello :slight_smile:

I got a question about alpha blend mode when two different mesh is overlapped.

Here’s the playground. (Because I can’t share the asset, I made a playground with default ground and cylinder).
https://www.babylonjs-playground.com/#1MSIXB#212
The cylinder blinks every time I change the angle of the camera, is there any way to solve it?

I already tried “depth functions”, “need depth pre-pass” and “useOrderIndependentTransparency” but I couldn’t find the way.
(useOrderIndependentTransparency is to heavy to use in my environment :disappointed_relieved:)


I really appreciate any help you can provide.

You can set alphaIndex value of your ground mesh to 1 for example.

3 Likes

Also, this doc can help regarding rendering artifacts with transparent meshes.

3 Likes

Hi,
I could talk about this for hours as I’m currently building a scene that’s nearly entirely made from glass-like objects. If you don’t want to use OIT (because of all its current restrictions and bugs), you are left with a manual sorting to final fix your alpha blending issues. But before you do that, you really need to take a look at the section of the doc shared above by @Evgeni_Popov. This is a pre-requirement if you want to be able to final fix it using manual sorting. Once this is done, sort your meshes using the alphaIndex. The process is a bit painful when you have multiple objects/layers of transparency, but apart from using OIT, it’s the only way I found to have it fixed.

3 Likes

I tried to avoid it, but I think I need to adjust the alphaIndex manually.
Thank you all for your advice :grin: