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

3 Likes
8

Hi! Using the exact same solution on the PG, with my project tree-shaken from 7.49.0, the color does not reflect on the material. If I were to try with StandardMaterial, then background would not be transparent. It is working with 6.39.0.

Do I need to import something else? Or am I missing anything?

9

It’s hard to tell, as this PG still works with 7.49.0. Are you able to repro the problem in the Playground?

10

I would but I don’t know how to reproduce tree-shaking in the Playground. But figured out something else though, when I change the roughness to 1, and metallic to 0. I started to see some results. Also tried to reduce the roughness to 0 in the PG, but it still works there.

Wanted to point out I’m using the same light settings with the PG.

I think I am good to go from this point. Thank you anyways!

3 Likes