Load local app GLTF/GLB mesh in Babylon React Native?

inteja · May 31, 2022, 3:30am

@bghgary What is the trick to bundling and deploying meshes with your app, then loading those meshes (say GLTF/GLB) across mobile platforms?

I see the Babylon React Native playground app code is loading externally referenced meshes but that’s not an option in our use case. We need to bundle all assets, including meshes, into the app.

I’ve only had success with .babylon files, renaming to .json and importing all using the import statement (rather than loading only the meshes required, when required). I’d rather use GLB if I can.

Cedric · May 31, 2022, 9:14am

There is this thread :

github.com/BabylonJS/BabylonReactNative

importing a .glb file fails if only local path is provided and not served through HTTP

opened 12:55PM - 01 Mar 21 UTC

f4z3k4s

enhancement

Hi! First of all, thanks for the great work for all maintainers. I've ju…st started using this library in my project for rendering `.glb` files. When the `.glb` file is served from a local static server, `SceneLoader.ImportMeshAsync` and other similar methods used for importing assets, such as `Append`, `AppendAsync`, etc.. work perfectly. However, when the file is not requested over HTTP, but rather the local path is provided to the above stated methods, the app just crashes without any easily traceable error (I wasn't looking so hard for the error, but it didn't appear in the terminal of the packager). Maybe it's my uneducatedness but from the documentation available [here](https://doc.babylonjs.com/divingDeeper/importers/loadingFileTypes), I expected the import to work with just a local path. I was able to solve the issue by using `expo-asset` to load the `.glb` file instead and provide a local uri, and then passing that local uri to Babylon, described in the below way: ```ts import '@babylonjs/loaders'; import { Asset } from 'expo-asset'; import { SceneLoader, ... } from '@babylonjs/core'; const [{ localUri }] = await Asset.loadAsync( require('/assets/3d/tesla-high.glb') ); const { meshes } = await SceneLoader.ImportMeshAsync( '', localUri as string, '', scene ); ``` However, I'd expect the library to do something similar internally, making the user to be able to only provide a path to a local `.glb` file and it load it without issues. If this work is purposefully left for the user, it would be nice to have it stated in the main documentation, since I think it's quite a common use-case.

It helped me bundle glb and other resources in this project:

Code for loading glb can be found here:

github.com

BabylonJS/SpacePiratesAR/blob/4a855844fefdede1205abeec7eb79cf61fdc7fc7/App.tsx#L102

      
        
            var envCube = CubeTexture.CreateFromPrefilteredData(envUri, scene, ".env");
            envCube.name = "environment";
            envCube.gammaSpace = false;
            envCube.rotationY = 1.977;
            scene.environmentTexture = envCube;
            
            
// glow
            const glowLayer = new GlowLayer("glowLayer", scene);
            glowLayer.intensity = 0.5;
            
            
const sceneGLBUri = resolveAssetSource(require('./assets/nativeStaticScene.glb')).uri;
            SceneLoader.AppendAsync("", sceneGLBUri, scene).then(() => {
              const starsGLBUri = resolveAssetSource(require('./assets/starsGeo.glb')).uri;
              SceneLoader.AppendAsync("", starsGLBUri, scene).then(() => {
                const starfield = scene.getMeshByName("starsGeo");
                starfield.scaling = new Vector3(4500, 4500, 4500);
                setStarfield(starfield);
                const starsShader = require('./assets/starfieldShader.json');
                const starsPanoramaUri = resolveAssetSource(require('./assets/starfield_panorama_texture.jpg')).uri;
            
            
    var starsShaderMaterial = new NodeMaterial("starsShader", scene);

Note some exception regarding .env files for example:

github.com

BabylonJS/SpacePiratesAR/blob/4a855844fefdede1205abeec7eb79cf61fdc7fc7/App.tsx#L92

      
        
            const rootNode = new TransformNode('Root Container', scene);
            setRootNode(rootNode);
            
            
// lighting
            const dirLight = new DirectionalLight("dirLight", new Vector3(0.47, 0.0, -0.86), scene);
            dirLight.diffuse = Color3.FromInts(255, 251, 199);
            dirLight.intensity = 3;
            
            
// envirronment
            const envUri = resolveAssetSource(require('./assets/environment.env')).uri;
            var envCube = CubeTexture.CreateFromPrefilteredData(envUri, scene, ".env");
            envCube.name = "environment";
            envCube.gammaSpace = false;
            envCube.rotationY = 1.977;
            scene.environmentTexture = envCube;
            
            
// glow
            const glowLayer = new GlowLayer("glowLayer", scene);
            glowLayer.intensity = 0.5;
            
            
const sceneGLBUri = resolveAssetSource(require('./assets/nativeStaticScene.glb')).uri;

Where extension must be provided to be properly loaded.

inteja · May 31, 2022, 9:31am

Thanks @Cedric ! That’s a great help

inteja · June 14, 2022, 10:01am

Hi @Cedric

I’ve been able to use this technique to load bundled app textures but I haven’t had any success yet with GLB meshes. I keep getting the error below. I’m importing @babylonjs/loaders/glTF and have added glb to my metro config. Any ideas?

[RuntimeError: Unable to load from http://localhost:8081/assets/src/assets/meshes/bloc.glb?platform=android&hash=c1c8d179007750a2518dd2f0ea12744a: Error: Cannot create URL for blob!]

Cedric · June 14, 2022, 10:13am

With your browser, can you open this url ?

inteja · June 14, 2022, 10:17am

Yes it loads in browser on the device.

Cedric · June 14, 2022, 10:23am

Is your code available somewhere?

inteja · June 14, 2022, 11:41am

Sorry no as it’s an internal project, but I can confirm that I can build and run your SpacePiratesAR just fine.

In my project, local asset PNG textures and JSON files are loading fine as per your code and README. It’s just the GLB files I can’t seem to load. I’ve tried a basic textured cube and the Babylon ufo.glb asset.

MarianG · June 14, 2022, 12:53pm

Hi, did you add glb extension in metro.config too?

github.com

BabylonJS/SpacePiratesAR/blob/4a855844fefdede1205abeec7eb79cf61fdc7fc7/metro.config.js

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */
 const defaultAssetExts = require("metro-config/src/defaults/defaults").assetExts

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  resolver: {
    assetExts: [
        ...defaultAssetExts,

This file has been truncated. show original

MarianG · June 14, 2022, 12:57pm

@Cedric I have one small question related, and I don’t want to create new topic only for this

I’m able to load all files, everything seems to work well, but this resolveAssetSource import is ‘red’ whatever I do

but in the same time the app is working

Thanks

inteja · June 14, 2022, 12:59pm

Yes I’ve added it to metro config.

I’m wondering if I need to somehow add the GLTF mime types to my android device, as that’s the only file type I’m having trouble with?

It looks like Android doesn’t have these mime types by default:
https://android.googlesource.com/platform/external/mime-support/+/9817b71a54a2ee8b691c1dfa937c0f9b16b3473c/mime.types

inteja · June 14, 2022, 1:00pm

You can add a // @ts-ignore comment above that line or create a .d.ts declaration.

Cedric · June 14, 2022, 1:00pm

I think it has to do with d.ts file. Any idea on how to fix it @RaananW ?

MarianG · June 14, 2022, 1:04pm

Maybe it is related to the deviced used for testing, … or the model has the right dimensions and position?
For me worked without to touch ‘android’ files

inteja · June 14, 2022, 1:08pm

Yeah after posting I realised it makes no sense, as @Cedric 's project builds and runs fine on the same device and that has no trouble with GLBs.

I also tried substituting Cedric’s GLBs into my project but they also don’t work in my project, so it’s something specific to my project structure or config.

Only other thought that comes to mind is maybe the order or timing of the import "@babylonjs/loaders/glTF"; is important? My project structure is quite deep and maybe the GLTF loader isn’t being found or used or something?

Cedric · June 14, 2022, 1:14pm

Stupid question maybe but did you open the .apk to check that .glb is inside? Also is it a debug build?

inteja · June 14, 2022, 1:39pm

It’s a debug build. I checked the apk but there’s no glb, however there’s also none of the image or json assets (at least by those names) in there either that I can find, yet they are working.

RaananW · June 14, 2022, 2:56pm

You need to add the @types/react-native package if you want the types to work.

npm install -D @types/react-native should do the job

MarianG · June 14, 2022, 3:34pm

node v14.16.0
npm v6.14.11
Still red

I’ll add an ignore for now

RaananW · June 14, 2022, 3:37pm

Can you try restarting your typescript-server? There is no reason for it to fail, unless it is not officially exported from this path (i.e. - not exported in the type-file).

Topic		Replies	Views
How to import a local .glb file in BabylonReactNative? Questions react , native	18	3438	January 8, 2024
Using BabylonJS with React Native Questions documentation , react	5	2056	June 20, 2019
How to load a local glb in babylon-native on iOS Questions react , glb , load , babylon-native , ios	5	684	November 15, 2022
Solving issues while loading glb file while using babylon and react Questions gltf , glb , assets	14	4262	September 24, 2022
Loading .gltf file working on the playground, but not on my local setup Questions	2	1086	April 17, 2020

Load local app GLTF/GLB mesh in Babylon React Native?

Related topics