Different transparency while using thin instances

Dear Community,

today, I found this recent topic (Different transparency for mesh instances).

I wanted to recreate this example with thin instances.
To my surprise, I am only able to set different transparency in version 4.2.1 but not in version 5.7.0.

Am I missing here something?

Here is my playground: https://playground.babylonjs.com/#8L50Q3#129

@greg97 it is definitely a bug, I will try to have it fix ASAP.

Fix will be available here: Fix Instances Color Alpha by sebavan · Pull Request #12555 · BabylonJS/Babylon.js · GitHub


Thank you for the quick fix.

1 Like

Hi @sebavan.

While the transparency works fine now, I realized today that there is still something strange going on.

As you can see in the attached picture, you frequently run into cases where you look at a transparent mesh instance (annotated as 1) and you can’t see the opaque mesh instance (annotated as 2) behind it. In the most extreme case, you are also able to see another opaque mesh (annotated as 3), even though it should be hidden, as 2 is in front of it.

You can reproduce this by running the initial playground. You should find cases like this really easy.

Do I have a mistake in my code related to the sorting of the meshes or is this another bug?

Let s see if @Evgeni_Popov has some ideas on this one ?

1 Like

The Mesh.INSTANCEDMESH_SORT_TRANSPARENT property only works for InstancedMesh, not for thin instances.

For thin instances, you give an array of transformation matrices for each thin instance and the system simply use them “as is”. If you want to sort the thin instances, you will have to sort these transformations matrices and pass them to the engine through a box.thinInstanceSetBuffer("matrix", ...); call each frame.

An alternate way to make transparency work with thin instances is to use the new OIT setting in 5.0 (Transparent Rendering | Babylon.js Documentation):


Got it. Thanks to both of you :slightly_smiling_face: