Search the Community

Hy everyone! I'm making a game and need a little help with the transparency stuff. So, in the game I have one material that has a texture (a png image that contains transparent parts). The mashes are made out of planes, merged together and the planes shows parts of the texture (think about it like Minecraft). I can set the colors of each plane in the mesh with the colorKind vertexdata.. except the alpha part. So I tried to find some topics about it and saw somewhere a tip to set the hasVertexAlpha on the mesh to true and add the texture to the opacityTexture. That worked, now I can set the RGBA on any parts of the mesh but the rendering order goes wrong Here's an image: the red and the green are one mesh (that has two planes, the green is above the blue), the blue is the other mesh. The green is half transparent using the colorKind alpha : It's cool, this is the result I'm looking for! But when I rotate the camera, the blue is displayed above the green. And here is playground link to what I'm experiencing in the game: https://playground.babylonjs.com/index2_5.html#8XDI7F#2 So in short, I want to have a material with a diffuseTexture that has transparent parts and use the colorKind RGBA on every plane in every mesh. What am I doing wrong and how can I fix it? Thanks for the help!

In trying to create a PG to solve another topic I came across the strange phenomenon (well it might not be strange just not what I expected) Having used MeshBuilder to create some small boxes and big box to fit them in I decided to make the box lidless by making the top transparent. Did this by setting a faceColor for the top face as faceColors[4] = new BABYLON.Color4(0,0,0,0); and realised that I then needed to set hasVertexAlpha to be true for the bigbox. http://www.babylonjs-playground.com/#1KH9RY#6 but the the rear and side faces disappear depending on camera angle. Ahah a moment of inspiration, I needed to make the sideOrientation DOUBLESIDE but then the front side disappeared. To check what was happening I made the rear face red faceColors[0] = new BABYLON.Color4(1,0,0,1); As you rotate the box so that you can view towards the rear red face, the red face disappears but the redness is applied to the inner small boxes (or so it appears) STRANGE http://www.babylonjs-playground.com/#1KH9RY#4 Any explanations, corrections, advice very welcome perhaps one for @jerome