Hi, @bghgary
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.
1 Like
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?
sebavan
December 7, 2021, 10:15pm
5
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
Yes but this is not related, as long as your UV mapping is correct your texture creation will be ok
3 Likes
Hi, @ryantrem
textureGround.uAng = Math.PI * 200 / 180;
https://playground.babylonjs.com/#8LFTCH#986
Now try it in react native on android smartphone.
@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.
Hi guys @bghgary @Cedric @sebavan
https://playground.babylonjs.com/#8LFTCH#986
But on android smartphone with babylonjs react native my dynamic text “Igor Roman” is not shown.
sebavan
December 21, 2021, 12:30pm
12
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
2 Likes
Thanks @DarraghBurke
textureGround.uAng = Math.PI * 200 / 180;
Now it’s similar on android: color is shown. But text is not.
Cedric
January 3, 2022, 10:26am
16
@igorroman777
Have you added code to load a .ttf font ? Some code like this:
}
recursiveRunTest(i);
});
}
recursiveRunTest(index);
}
}, false);
BABYLON.Tools.LoadFile("https://raw.githubusercontent.com/CedricGuillemet/dump/master/droidsans.ttf", (data) => {
_native.Canvas.loadTTFAsync("droidsans", data).then(function () {
_native.RootUrl = "https://playground.babylonjs.com";
console.log("Starting");
TestUtils.setTitle("Starting Native Validation Tests");
TestUtils.updateSize(testWidth, testHeight);
xhr.send();
});
}, undefined, undefined, true);
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:
});*/
}
}, [engine]);
// Add some text.
useEffect(() => {
if (!scene) {
return;
}
const fontFace = new FontFace('droidsans', 'https://raw.githubusercontent.com/CedricGuillemet/dump/master/droidsans.ttf');
fontFace.load().then(() => {
const mat = new StandardMaterial('Name', scene);
const texture = new DynamicTexture('testText', { width: 256, height: 256 }, scene);
texture.drawText('TestText', 96, 128, '', 'black', 'white', true, true);
mat.diffuseTexture = texture;
const plane = Mesh.CreatePlane('testPlane', 1, scene, true);
plane.material = mat;
plane.position.z = 2;
plane.position.y -= 0.5;
});
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
Cedric
January 19, 2022, 9:04am
19
This is a WIP. API contract might change in the future for easier integration and use.
That would be the right solution
