Dynamic Textures in glb model

Hi, @bghgary
One Question. I would like to insert a dynamic text into my glb model. s. Example:

https://playground.babylonjs.com/#8LFTCH#971

It worked with the “Floor”:

let wall = scene.getMeshByName("wall 2"); // "Floor" is ok

//Create dynamic texture
var textureGround = new BABYLON.DynamicTexture("dynamic texture", {width:512, height:512}, scene);   
 var textureContext = textureGround.getContext();
    
 //Add text to dynamic texture
 var font = "bold 88px monospace";
 textureGround.drawText("Hello", 155, 155, font, "green", "red", true, true);
        
 var materialGround = new BABYLON.StandardMaterial("Mat", scene); 				
 materialGround.diffuseTexture = textureGround;
 wall.material = materialGround;

But not with the wall_2.
Why?

The UVs of your wall sounds incorrects and won t help display the textures:

1 Like

Do you mean UV coordinates? Should I rotate the texture 180 degrees?
Best

I think you need to rebuild your UVs in the creation tool of your choice to ensure your texture would fit where you expect on the walls.

1 Like

@bghgary
But I want to add a DynamicTexture in the code for dynamic text.

Yes but this is not related, as long as your UV mapping is correct your texture creation will be ok

3 Likes

Hi, @ryantrem
yes, it worked. the solution was:

textureGround.uAng = Math.PI * 200 / 180;

https://playground.babylonjs.com/#8LFTCH#986

Now try it in react native on android smartphone.
And dynamic text “Igor Roman” is not shown. :frowning:

@Cedric, do you see any reason the DynamicTexture in that playground wouldn’t work in Babylon Native?

I don’t know. It only runs in the browser.
Can there be another reason?
Does it change UV mapping between browser and mobile?

Hi guys @bghgary @Cedric @sebavan
I need your help.
It works with the DynamicTexture in the browser:

https://playground.babylonjs.com/#8LFTCH#986

But on android smartphone with babylonjs react native my dynamic text “Igor Roman” is not shown.
Please help

I am not sure text is currently supported in BabylonNative fully, @DarraghBurke might be able to provide more info.

1 Like

Text rendering should theoretically be supported since this PR: Canvas polyfill by CedricGuillemet · Pull Request #441 · BabylonJS/BabylonNative (github.com)

But I do repro your issue. Let’s wait for @Cedric to get back in January and see what he thinks :slight_smile:

2 Likes

Thanks @DarraghBurke
I also have a problem in the browser. The color of the DynamicTexture was there, but the text was not. Then I found the solution:

textureGround.uAng = Math.PI * 200 / 180;

Now it’s similar on android: color is shown. But text is not.
My solution does not work. or do you have to do something similar?

@igorroman777

Have you added code to load a .ttf font ? Some code like this:

3 Likes

If you are using Babylon React Native we have also added a partial implementation for the FontFace Web API, to help make the loading of fonts easier. This supports loading fonts from either a valid URI or ArrayBuffer.

Here is an example of how to use it with the same font Cedric used above, and a link to the Playground with the sample code:

One thing to note is that we hope to eventually move this to a true polyfill which does not require an explicit import of the Babylon React Native implementation of FontFace, so the consumption of this may change in a future release of Babylon React Native.

5 Likes

Great, thank you @AlexTran and @Cedric
It works. Unfortunately, it is never described anywhere.

This is a WIP. API contract might change in the future for easier integration and use.

That would be the right solution :slight_smile: