Glitching HeightMap MaterialTexture with Alpha

Questions
1

FIXED: Using rendering groups like “greenAlgae.renderingGroupId = 2;” does the trick.

Hello. Please, if you have any idea what modes this would be suited for …

I have a HeightMap with a StandardMaterial. (its supposed to cover the game level (beach) with algae on the floor). The Texture is a .png with alpha-layer.

This is the create (sorry my code is spread over many files, so there is no sandbox)

var bMat2 = new BABYLON.StandardMaterial("bMat2", scene);
bMat2.diffuseTexture = new BABYLON.Texture("./graphics/greenalgae.png", scene);
bMat2.specularColor = new BABYLON.Color3(0, 0, 0);
bMat2.diffuseTexture.hasalpha=true;
bMat2.useAlphaFromDiffuseTexture = true;
bMat2.alpha = 1;

greenAlgae.material = bMat2;

greenAlgae.visibility = 0.5;

Now this kinda works, but changing the camera angle glitches the alpha appearance

Screenshot 2023-12-19 000032
Screenshot 2023-12-19 0000321182×766 147 KB

Screenshot 2023-12-19 000049
Screenshot 2023-12-19 0000491188×767 23.1 KB

So far I could rule out camera.MinZ and MaxZ and I know that “scene.useOrderIndependentTransparency = true;” fixes the issue. (But as my scene stretches beyond 1500 I get weird z-fighting in the distance with this method). I’m lost in alpha, blend and transparency modes. Any push in the right direction, what would be the approach. Thank you in advance.

2

Transparency are hard to deal with, especially if you have large geometries with transparent materials, as you seem to have.

See this page for some solutions:

2 Likes
3

Thank you. After trying all sorts of combinations from this doc - what worked was the assingment of rendering groups like “greenAlgae.renderingGroupId = 2;” Top!

1 Like