React-Native: Can anyone explain why some time dynamic texture is not rendering properly

Suman · February 16, 2023, 3:40pm

Hello,
Most of the times, Dynamictexture context fill with black. Also sometime getting error like:
internalValidateCopyFromTexture:sourceSlice:sourceLevel:sourceOrigin:sourceSize:toTexture:destinationSlice:destinationLevel:destinationOrigin:options:]:384: failed assertion `Copy From Texture Validation

and app getting crashed!!
Thanks

sebavan · February 16, 2023, 10:45pm

I love what you are doing here !!! is it a game or a tracker ??? adding the @BabylonNative team regarding the issue

Suman · February 17, 2023, 6:54am

It’s realtime location tracker inside the golf course. But I’m facing such types of issue in react-native, But on the web it run smoothly

Cedric · February 17, 2023, 8:46am

Might be related to React native update dynamic texture error occurring

@Suman Can you please try to repro in a sample like GitHub - BabylonJS/BabylonReactNativeSample
It will be so much easier to fix it with an example. Also, does it happen on Android and iOS? Can you post a callstack when that crash happens?

Suman · February 17, 2023, 10:31am

Hey,

This is happening on both of android and IOS and more particularly when using more dynamicTexture context to drawImage, fillText etc. But It is working smoothly with less DynamicTexture. Providing a repo will take lot of time right now and it would be really helpful if you can kindly provide any solution for now.

Cedric · February 17, 2023, 10:36am

I’d be glad to provide you a solution …but without a repro, it’s close to impossible.

Suman · February 17, 2023, 2:06pm

Hey

Here is the repo @Cedric

Multiple time hit click on the button the sphere texture get black. I just try to implement my scenario where I’m getting the issue.

Thanks

Cedric · February 17, 2023, 2:13pm

Thanks! I’ll take care of this bug in the coming days!

Cedric · February 17, 2023, 2:44pm

I’ve open a Github issue to not lose track of it : Dynamic texture lifecycle · Issue #1205 · BabylonJS/BabylonNative · GitHub

Suman · February 24, 2023, 11:21am

Hello, anyone have any suggestions for avoiding such scenario until the bug is fixed ?

Suman · March 1, 2023, 7:17am

Hi @Cedric is there have any alternative of DynamicTexture for 2D drawing on a mesh and adding text to the scene.

Cedric · March 1, 2023, 8:54am

I think you can still use DynamicTexture if you do updates less frequently.
There is also this possibility : Fast, dynamic 3D text in any TrueType font
If you use a baked texture, it will work for sure.

Suman · March 1, 2023, 10:54am

Does this scenario occurs only for frequently updating dynamicTexture or dispose dynamicTexture + update DynamicTexture ?

Cedric · March 1, 2023, 11:00am

I think so.
You can try this code snippet :

github.com

BabylonJS/BabylonNative/blob/master/Apps/ValidationTests/Scripts/text_rendering_test.js#L37-L55


      
          var ground = BABYLON.MeshBuilder.CreateGround("ground1", { width: 0.5, height: 0.5, subdivisions: 2 }, scene);
          ground.rotation.x = -Math.PI * 0.5;
          ground.rotation.y = Math.PI;
          ground.position.z = -0.25;
          ground.position.x = 0.25;
          
          
//Create dynamic texture
          var textureResolution = 512;
          textureGround = new BABYLON.DynamicTexture("dynamic texture", textureResolution, scene);
          //var textureContext = textureGround.getContext();
          
          
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);

Also, don’t forget to read the .ttf font before :

github.com

BabylonJS/BabylonNative/blob/08cec4cacf4d187eb839b6318a7414860f8fde77/Apps/ValidationTests/Scripts/text_rendering_test.js#L33


      
          
          
var engine = new BABYLON.NativeEngine();
          var scene = new BABYLON.Scene(engine);
          
          
scene.createDefaultCamera(true);
          CreateInputHandling(scene);
          scene.createDefaultLight(true);
          
          
console.log("Reading font");
          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: 0.5, height: 0.5, subdivisions: 2 }, scene);
              ground.rotation.x = -Math.PI * 0.5;
              ground.rotation.y = Math.PI;
              ground.position.z = -0.25;
              ground.position.x = 0.25;
          
          
    //Create dynamic texture

You will have to adapt it a bit with react native but the core will be the same.

Topic		Replies	Views
React native update dynamic texture error occurring Questions material , texture	9	560	February 27, 2023
context.Clip(... not working on Babylon React Native Dynamic Texture context Questions documentation , material , multimaterial , texture	11	532	January 26, 2023
Issue in canvas context "update(*)" Bugs material , texture , canvas	1	483	December 28, 2022
React-Native Dynamic Texture context.strokeText(... not working Bugs material , texture	5	512	December 27, 2022
Can't clear DynamicTexture to transparent in BabylonReactNative Bugs react , native	22	1457	April 6, 2022

React-Native: Can anyone explain why some time dynamic texture is not rendering properly

Related topics