Advancedtexture line black border

I’m creating lines on a plane with the advancedtexture. My lines are shown on top of a white background. This all works great, except for a clearly visible dark edge around the lines: https://playground.babylonjs.com/#ZI9AK7#1123
This edge doesn’t appear when using the fullscreen advancedtexture. But in my case I need the advancedtexture on a mesh.
Is there a way to avoid this dark outline around the lines?

Huh. That seems weird. Let me take a look.

Alright I’m not sure why this fixes it but if you change the line to:

scene.clearColor = new BABYLON.Color4(1,1,1,0);

it removes the black line. Perhaps someone might be able to explain why.

1 Like

This is because the texture is used as opacity and diffuse on the plane. Because it is used a Opacity it will enable alpha blending and thus it will blend with the background. By setting the background alpha to 0 you simply exclude the background which is clever :wink:

1 Like

It blends with the background color of the canvas which happens to be white by default, but if you change it it does not work anymore:

https://playground.babylonjs.com/#ZI9AK7#1133

You can try to use a custom material and set the final color to white as soon as the alpha value is less than 1:

https://playground.babylonjs.com/#ZI9AK7#1134

By doing so, however, you loose the anti-aliasing which is more visible with another background color:

https://playground.babylonjs.com/#ZI9AK7#1135

In those cases, you can try to mix the line color with the background color:

https://playground.babylonjs.com/#ZI9AK7#1136