GUI Text with Texture

Questions
1

Hello,

I am looking for a way to have a customizable Text on a Mesh with a material like in this image:

Screenshot 2021-07-20 at 09.58.46
Screenshot 2021-07-20 at 09.58.46658×862 361 KB

I know we can use GUI to draw text on any Mesh but I did’nt find a way to have PBRMaterial applied on it. Is it possible?
Maybe using something like a dynamicTexture? https://playground.babylonjs.com/#5ZCGRM#2

Thanks a lot for your ideas and help :wink:

2

Gui is using canvas 2d to draw the text so nope it can not be rendered with a pbr material.

Nevertheless why not using it to generate your pbr textures or coupled to Node Material to achieve the desired effect ?

3

How can I do that?

I guess the idea is to use the GUI as an opacity texture and apply it to a mesh that has a PBRMaterial? Would it work?
I am not an expert with node material so I would prefer a code solution :wink:

4

yup it should work.

1 Like
5

Tempted to make a demo for this myself. Will be back… :wink:

1 Like
6

I made some first test here: https://playground.babylonjs.com/#ZI9AK7#1505
But for now I don’t really understand what is happening haha

7

With this is it the UV wrapping that is not correct. I’m still playing around with a sphere atm. This might be easier to start.

https://playground.babylonjs.com/#2FDQT5#14

8

Well at least it works on a sphere and with the metallic: https://playground.babylonjs.com/#2FDQT5#985
I put the background in blue and the text in green to follow PBR rules.

Next: doing that on a model and with opacity :muscle:

1 Like
9

So I tried with the opacityTexture but I can’t make it work, now the background is black and the text white for opacity: https://playground.babylonjs.com/#2FDQT5#986

I tested to change alphaMode, transparencyMode or needAlphaBlending values but none have worked. Any ideas?

10

I manage to make it work using albedoTexture but not with opacityTexture:
https://playground.babylonjs.com/#2FDQT5#987

But my material already has a defined albedoTexture so I don’t want to modify it.
What am I missing to make it work with opacityTexture?

11

Ok here we go: https://playground.babylonjs.com/#2FDQT5#988

Playing with the PBR parameters made it work:

    pbr.alphaMode = BABYLON.Engine.ALPHA_ADD
    pbr.useRadianceOverAlpha = false;
    pbr.useSpecularOverAlpha = false;
    pbr.opacityTexture.getAlphaFromRGB = true
12

If I do the exact same thing on a model, it stops working: https://playground.babylonjs.com/#ZI9AK7#1506

But I can’t see why?

13

The model UVs need to fit with the texture you are trying to apply

14

How can make my texture and model UVs match?

I need to place the texte wherever I want on the mesh. I should be able to do that playing with texture offset and scale right?

15

Not really, as what you are describing here is more a decals

16

Indeed @sebavan the solution is maybe to use decal: https://playground.babylonjs.com/#1BAPRM#537

17

Working with an opacityTexture: https://playground.babylonjs.com/#1BAPRM#538
:boom:

Now I just have to figure out how to place and scale precisely the decal!

1 Like
18

@PichouPichou

so, finally, how to place the decal for a Irregular mesh？

19

Hi @jtcheng,

If your mesh is irregular, the decal above it also will.
For my case, I have a flat object where I just set the position so that the text is at the right place and scale it so that it has the correct size.

Hope that helps

20

@PichouPichou
totally unrelated to anything, but if you ever need a stunt double or something, my brothers best friend can do the job

image

2 Likes