Draw Text Dynamic Texture On PBR Material

Questions
1

So I want to drawText() on a pbr material. The way I do it right now is create Dynamic Texture, the do context.drawText() then I assign the dynamic texture to the PBR material’s Albedo Texture.

The problem is that, the background of the dynamic texture is Black.

I set the:

texture.hasAlpha = true;
material.useAlphaFromAlbedoTexture = true;
texture.drawText(text, left, top, drawFont, style.fontColor, "transparent", true, true);

But it seems that the dynamic texture does not use alpha. So I cannot set it to alpha = 0;

How can I make the background transparent and the text solid colored?

2

Is this getting close to what you want https://www.babylonjs-playground.com/#TMHF80#154?

2 Likes
3

Make sure you clear the texture with a color having alpha component = 0.

I think a PG would help too.

1 Like
4

Thank you @JohnK and @Evgeni_Popov

This is my playground link writing transparent dynamic texture to pbr material

I suppose the:

tex.drawText('TEXT', null, null, font, '#f54242', 'transparent', true, true);

will overwrite the material background color. If it is working then, it must be something that is black colored overlay my material color.

Please someone advise.

5

I just realized that turning the Blend Mode into Alpha Blend from blender fix this issue. I wonder what has changed in the material properties which makes this works?

Can I replicate the alpha blend by setting it from babylon js code?

6

Likely

material.transparencyMode = BABYLON.PBRMaterial.PBRMATERIAL_ALPHABLEND;
1 Like
7

Indeed, setting transparencyMode does work but you also need to set useAlphaFromAlbedoTexture to true:

https://www.babylonjs-playground.com/#7FYWYL#7

1 Like