EdgesRenderer with transparent ALPHABLEND mats and new BABYLON.PBRMaterial

Questions
, ,
1

Hi everyone :slight_smile:
I’m trying to make edge rendering work with meshes using transparent PBR materials. This code is at the top of my forEach(mesh in setupModel

const edgesRenderer = new BABYLON.EdgesRenderer(mesh, 0.5, true);
edgesRenderer.color = new BABYLON.Color3(1, 0, 0);
edgesRenderer.width = 5;
edgesRenderer.renderingGroupId = 1; // force edges to render in group w trans meshes

It doesn’t have any effect, playing around with all of the numbers in here.
I read that it has to be grouped with the meshes, but no groupID seems to work.

            pbrMaterial.alpha = this.transparencyMap.get(mesh.name) ?? 0.5;
            pbrMaterial.transparencyMode = BABYLON.Material.MATERIAL_ALPHABLEND;
            pbrMaterial.useSpecularOverAlpha = true;
            pbrMaterial.forceDepthWrite = true;
            pbrMaterial.disableDepthWrite = false;
            pbrMaterial.disableDepthTest = false;
            pbrMaterial.separateCullingPass = true;
            pbrMaterial.backFaceCulling = false;
            pbrMaterial.alphaMode = BABYLON.Engine.ALPHA_COMBINE;
            pbrMaterial.isTransparent = true;
            pbrMaterial.useAlphaFromAlbedoTexture = false;
            pbrMaterial.useSpecularOverAlpha = true;
            pbrMaterial.alphaFromRedChannel = false;
            pbrMaterial.zOffset = 0;
            pbrMaterial.zOffsetUnits = 0;
            pbrMaterial.depthFunction = BABYLON.Engine.LEQUAL;
            pbrMaterial.depthWrite = true;
            pbrMaterial.depthTest = true;

Any ideas? Thanks

2

I believe you need to enable EdgesRendering for a mesh.

mesh.enableEdgesRendering()

Example - Babylon.js Playground

1 Like
3

That worked! Thank you!

Before I had tried that, but with my other const instead of ‘mesh’. I’m new to babylon, coming from other world.

4

Now I need to figure out how to control the color, width, and angle tolerance. Aliasing might be an issue also. Edit: I figured it out.

1 Like