Transparency blending and non-blending in 1 material

Questions
1

Repro: Babylon.js Playground

I made a simple mesh, unwrapped it and gave it a texture using bjs playground assets (cloud and palm.png). The cloud texture is applied on the ground, the cube is a single color and the palm texture applied to a single plane just in front of the cube. You should see 2 palm images.

Problem: comment on and off cube_mat.opacityTexture = cube_mat.diffuseTexture;

I need the alpha blending on the ground (ie, cloud texture) but also need the palm image to show (ie, when opacityTexture is commented out) on a single material. Have tried toggling a bunch of settings to no avail, hence asking for help. Anyone have ideas what I might be missing ?

2

One way is to:

  • make sure the 2 tris of the palms are drawn last when the mesh is drawn
  • use separateCullingPass = true

First step is necessary because when the object is drawn the zbuffer is not updated as the mesh is using transparency. If the tris from the palms are drawn before some other tris (like the ones from the cube), they will disappear depending on the rotation of the camera. To have the tris from the palms drawn last we simply need to update the indices of the mesh so that the 2 tris are the last ones of the array.

2 Likes
3

In fact you can avoid using separateCullingPass by setting back backFaceCulling to true:

[EDIT]
My bad, the cloud on the ground disappears! However it should work, I think it’s because the tris of the ground are not in the right order, they are CW instead of CCW.
[/EDIT]

1 Like
4

ok, thanks! I get it now. Unfortunately, the pg is a simplified example. The actual mesh is more complex. Reordering tris isn’t feasible and it must have back faces set to false. I think I will go with the multimat route or some other way. Many thanks again @Evgeni_Popov and happy holidays to you ! Cheers !

1 Like