Babylon Native SceneLoader.LoadAsync stalls when referencing file from app:///

Bugs
,
1

Hello,

I’ve run into an issue when trying to load a GLTF file from the app:/// scheme.

I have an application based off of the Babylon React Native Sample (GitHub - BabylonJS/BabylonReactNativeSample)

Currently loading the following versions
“@babylonjs/core”: “5.20.0”,
“@babylonjs/gui”: “5.20.0”,
“@babylonjs/loaders”: “5.20.0”,
“@babylonjs/react-native”: “^1.3.2”,
“@babylonjs/react-native-iosandroid-0-69”: “^1.3.5”

I can load my GLTF using `react-native-fs and it works, the file loads and I am able to see it with the exception of the referenced texture images (JPG & PNG)
const file = require(‘…/assets/blend_seperated2.gltf’);
const uri = Image.resolveAssetSource(file).uri;

It’s my understanding that the texture files can’t be loaded this way since React-Native does not serve those files rendered. So after some research i found that the app:/// is supported. However, when I try this the SceneLoader.LoadAsync promise never gets returned it just seems to stall with no error.

When i change the file name to a file that does not exist i do get an error as expected so, I can confirm the loader see’s my file.

I have also tried to load the files through a static server using react-native-static-server but i get the same stalled response nothing loads or errors.

I’m hoping for any guidance on if there is a better way of loading my file with the textures or a way to better diagnose the stalling issue.

Thanks!
Drew

2

cc @BabylonNative

3

The app: scheme is very specific. Depending on the target platform, it will use the standard way of accessing assets (e.g. AssetManager for Android). Unfortunately, this method doesn’t work that well in React Native because it deploys assets differently.

It should never hang though, so that’s a bit weird. Can you put up a repro on GitHub?

Besides this, there has been a few threads regarding how to load assets in Babylon React Native that hasn’t really reached a full resolution, but you might be able to get some information from them. Many, if not all, are linked from this issue:
importing a .glb file fails if only local path is provided and not served through HTTP · Issue #165 · BabylonJS/BabylonReactNative (github.com)

4

@bghgary - Thanks! I was able to figure our the stall… IOS was blocking access. After making some changes to the plist file the GLTF file loads however, the texture files still don’t display. I do see them referenced in the scene data.

I will try to get a repo up shortly.

5

Are you trying to load a .gltf with external references to textures? If so, the glTF loader will try to load the files relative to the rootUrl parameter when using SceneLoader. If you can get those assets to load using the full url, it should work with the glTF loader also.

6

@bghgary - Yes, that’s my goal. Loading a combined .gltf file seems to crash the emulator since our model is very large.

I have a static server running on http://192.168.4.109/ and I can see the reference to the images with the full url in the material data when I log them to the Metro console. The images will also throw an error if they are not accessible so it seems to load them just not display them. My repo is uploading now. I will send a link once it is ready

1 Like
7

@bghgary Sorry for the delay -

I had to remove a lot of client material before i could share.

Files located in the www folder get loaded into the static server (setup in app.tsx) which is where I am loading the GLTF. I have tried to load it through an image asset with React Native but, I get the same result of no textures being loaded. Using the App:/// scheme does not work at all for me.

I appreciate any direction you can point me in, hopefully it’s something simple i am over looking.

9

I don’t see anything specifically wrong. I tried building on Windows for Android, but it gave me a whole bunch of gradle errors about missing plugins and then missing configuration names.

10

@bghgary - Currently I am only targeting IOS, I will keep fighting with it.

11

I tried with iOS and I’m unable to run pod install in the iOS folder.

[!] Invalid `Podfile` file: /Users/bghgary/GitHub/Forum/BabylonNativeGLTF/node_modules/react-native/scripts/react_native_pods_utils/script_phases.rb:39: syntax error, unexpected <<
    template =<<~EOS
                ^
/Users/bghgary/GitHub/Forum/BabylonNativeGLTF/node_modules/react-native/scripts/react_native_pods_utils/script_phases.rb:40: unknown regexp options - ll
/Users/bghgary/GitHub/Forum/BabylonNativeGLTF/node_modules/react-native/scripts/react_native_pods_utils/script_phases.rb:41: dynamic constant assignment
        RCT_SCRIPT_POD_INSTALLATION_ROOT=$(pwd)
                                         ^
/Users/bghgary/GitHub/Forum/BabylonNativeGLTF/node_modules/react-native/scripts/react_native_pods_utils/script_phases.rb:41: `$(' is not allowed as a global variable name
/Users/bghgary/GitHub/Forum/BabylonNativeGLTF/node_modules/react-native/scripts/react_native_pods_utils/script_phases.rb:41: syntax error, unexpected end-of-input
        RCT_SCRIPT_POD_INSTALLATION_ROOT=$(pwd)
12

@bghgary -

Good news… after I tore my project down to bare bones and upgraded to the latest version of Babylon React I can now see my model and textures.

Bad news… I have no idea what the root cause was.

Thanks for jumping in and giving guidance!

1 Like
13

Glad you have a working version :slight_smile:

1 Like