Creating a mesh with multimaterials and transparency

[carolhmj]

Hello!

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: https://playground.babylonjs.com/#Y8HRP3#9

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: https://playground.babylonjs.com/#2Q4S2S#529

Any tips?

[slin]

Hi @carolhmj

Please see: https://playground.babylonjs.com/#Y8HRP3#10

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.

[carolhmj]

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