Transparency issue with several objects on top of other transparent objects?

I put a question mark at the end because i cant tell if transparency of multiple objects all on top of each other is the primary issue but it seems to happen in multiple game engines too…

Anyway so i created a playground to show you guys what is happening, does anyone know what is wrong here?

if you rotate the camera you will see the blocks appear and disappear.

Im not sure how to solve this issue, ive tried for a long time now.

https://www.babylonjs-playground.com/#1SLLOJ#1109

Please help

It’s a common problem with transparency, look for “transparency” in this forum. For eg:

In your case, you can make the small blocks always drawn after the water by setting the renderingGroupId property:

https://www.babylonjs-playground.com/#1SLLOJ#1110

You can also have a look at this doc:
https://doc.babylonjs.com/resources/transparency_and_how_meshes_are_rendered

2 Likes

Thanks for posting the fix. Its sorted the issue for me. I hope its useful for anyone else too.

I realised it was quite a common problem when i saw other engines with the same issue.