Dynamic texture with transparent albedo color has a border

Questions
,
1

I’m trying to use a multimaterial to have a text over a mesh which can change it’s background color and the text color.

My first approach was to usea single PBR material with an albedo color and a dynamic texture as albedo texture, but it seems to multiply the colors of the texture and the albedo color, so it’s altered, also, I’ve the need to use another albedo texture as background of my mesh, so I decieded to work with another approach.

I’ve been readign on this forum and I found some interesting topics like this one

So I decide to use a similar solution but usin multi-materials. It works somehow, but I notice when putting both text and backround material as white that the text has a dark border, you can see this in this playground:

I wonder if there is a way to avoid that or you can point me to another solution that fits best for my use case.

Thanks in advance!

2

It seems it is the anti-aliasing of the font which is black when you use “transparent” as the background color.

We are using the functions from the canvas to draw the text, so we can’t do much here… However, it seems it’s possible to trick the algorithm by providing a clear color that is not fully transparent like #ffffff01:

Note also that:

box.subMeshes.push(
    new BABYLON.SubMesh(0, 0, verticesCount, 0, box.getTotalIndices(), box)
);

will add the submesh two times because new ... already adds it.