Glitching HeightMap MaterialTexture with Alpha

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


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.

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

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