AdvancedDynamicTexture.CreateForMesh not showing up in babylon react native

Questions
,
1

Hi!

I want to have some floating text in my project, and I found AdvancedDynamicTexture.CreateForMesh to do this with. I made the following proof of concept and copy pasted that into my react native application.

Unfortunately it doesn’t show up there, any idea why? I also tried the DynamicTexture, which also works in the playground but not on a device.

I’ve got these versions:
“@babylonjs/core”: “5.0.0-alpha.65”,
“@babylonjs/gui”: “5.0.0-alpha.65”,
“@babylonjs/react-native”: “0.4.0-alpha.47”,

Thanks!

2

Adding @Cedric about the babylon gui in native as I can not remember the current set of limitations. I think one of the main one is to load a font in the system ?

3

You need to load a .TTF font before using it with BabylonNative/ReactNative.

See this thread for more infos : Dynamic Textures in glb model - #16 by Cedric

1 Like
4

Ah, I thought I might be missing something. Thanks!

1 Like
5

Hi! I unfortunately got ill before I could test it all out. The thread you linked helped, the implementation shared by Alex there does work. I can’t make it work with AdvancedDynamicTexture though, I only see a small square with what seems like either all the text on top of eachother, or just some random stuff. The square is the size of a single character.
Here’s the implementation copied to a playground:

I also don’t seem to be able to change the fontsize using DynamicTexture. I found here:

that I should put the fontsize in the font string, but it doesn’t seem to get picked up.
Is this because it’s still being worked on? If possible, I’d like to be able to work with AdvancedDynamicTexture since I can then use TextBlock for the formatting of text.

Thanks in advance!

6

A quick test I’ve just done in Babylon Native:

with var font = "bold 88px monospace";

image
image1381×829 40.9 KB

with `var font = “bold 44px monospace”;

image
image1391×831 28 KB

And the script I did:


var textureGround;
var font = "bold 44px monospace";
BABYLON.Tools.LoadFile("https://raw.githubusercontent.com/CedricGuillemet/dump/master/droidsans.ttf", (data) => {
    _native.Canvas.loadTTFAsync("droidsans", data);

    var ground = BABYLON.MeshBuilder.CreateGround("ground1", { width: 1, height: 1, subdivisions: 2 }, scene);
    ground.rotation.x = -Math.PI * 0.5;
    ground.position.z = 2;

    //Create dynamic texture
    var textureResolution = 512;
    textureGround = new BABYLON.DynamicTexture("dynamic texture", textureResolution, scene);

    var materialGround = new BABYLON.StandardMaterial("Mat", scene);
    materialGround.diffuseTexture = textureGround;
    ground.material = materialGround;
    materialGround.backFaceCulling = false;

    textureGround.clear();
    textureGround.drawText("BabylonNative", 0, 246, font, "White", null, true, true);
    
}, undefined, undefined, true);
1 Like
7

Hi!

Thank you so much for checking, I think I might have gotten it wrong with setting the font then, I put the font name there instead of ‘bold’. Sorry about that.

One more question, how do I turn the background of the texture clear, like transparent?

8

You need 2 things, well mostly 1 actually.
You need to create a transparent material and use the dynamic texture as the diffuse. it how the quad is rendered that determines if it’s transparent or not. not just the texture itself.

1 Like