Creating a mesh with multimaterials and transparency


I was trying to achieve an effect like this: I have a mesh with multiple faces, and I want to animate each face appearing sequentially (to show a quickhull being constructed). To this pupose, I tried creating a mesh with one material for each face, but I’m having a problem with the transparencies.

In this example, I have the red face as the first one, and the blue face as the second one. If I set the alpha of both faces to the same value, let’s say 0.5, the effect is as expected:

If I increase the alpha of the second face and decrease the first, it also makes sense (0.2 to red, 1.0 to blue):

However, if I increase the alpha of the first face and decrease the second, I can’t see anything behind the second face anymore:

Here’s the playground link for the example above:

I also tried a slightly more complex 3D object and got the same result. Setting the alpha of the first face material to 1.0 makes the whole object opaque:

: Babylon.js Playground
However, if I try the same with the MultiMaterials demo, I can achieve the desired effect with no problems, so I assume there is a way to achieve this effect and I’m doing something wrong:

Any tips? :slightly_smiling_face:

Hi @carolhmj

Please see:

You miss one line:

`mesh.subMeshes = [];`

Without this line, I saw this mesh had 3 submeshes in the inspector. I guess there was a full square mesh rendered with its material set to red (1st submaterial). This full square was affecting the alpha value.


Can’t believe it was something so simple, thank you very much! :sweat_smile:

1 Like