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.
2 Likes
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 
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:
1 Like
Confirming this fixes the problem! Thanks
scene.clearColor = new BABYLON.Color4(1,1,1,0);
The strange thing is that this does not work:
scene.clearColor = new BABYLON.Color4(0,0,0,0);
But by adding a small percentage of color and keeping alpha 0, it works very well.