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

Questions
21

I’m still having no joy with GLB, but something else I investigated was the possibility that the side effect import "@babylonjs/loaders/glTF"; is getting tree shaken away, because if I comment that out in @Cedric 's project, I get the same error I’m seeing in my project:

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

However a bit of googling revealed that React Native metro bundler doesn’t support tree shaking anyway, so I’m back to being clueless :slight_smile:

22

So it works when importing loaders but it doesn’t when importing loaders/gltf?

23

Using require and resource isn’t seem to be supported in Android yet. Here’s what I did to make local loading work for both iOS and Android:

  • Use asset instead of resource with react-native-asset
  • Assets are copied to built package. So you must re-run react-native-asset and rebuild app even in dev(metro) stage
  • Use app:/// scheme to access local asset ()
  • iOS asset’s are copied to root, Android asset’s are copied to /custom for most of babylon assets.
  • I’ve made simple resolver to handle both situation:
import {Platform} from 'react-native';

const isAndroid = Platform.OS === 'android';
const assetPrefix = isAndroid ? 'custom/' : '';

/**
 * Workaround for different path between OS
 *
 * https://github.com/unimonkiez/react-native-asset/issues/25
 *
 * @param path relative path from asset directory
 * @returns Sanitized Uri with app:// scheme
 */
export function resolveAssetUri(path: string) {
  return `app:///${assetPrefix}${path}`;
}
2 Likes
24

I’ve added your trick to importing a .glb file fails if only local path is provided and not served through HTTP · Issue #165 · BabylonJS/BabylonReactNative · GitHub
idk why such differences between iOS and Android. I guess it’s because of some technical limitation but the lack of official reference is weird.

1 Like
25

Thanks for your kindness.
I hesitated too much on github vs forum. :wink:

As far as I know, require adds files to Android resource which get compiled to R which is not really available at js time, and can only access with InputStream getResources().openRawResource().

I thought about implementing res:// scheme in UrlRequest_Android.cpp for specific use. But didn’t have much time to try.

Do you think this would work? I could look in to it some day.

1 Like
26

Opening an issue on GitHub is only done after some triage on the forum. In other words, discuss a topic/bug on the forum and once the plan is ok, then a GH issue is open to keep track of its progress.

The major issue we’ve faced is the resources not available on Android, in release mode. On iOS, it works fine in dev or release. I’ve spent a few hours trying to spot the issue, without success. It might have been fixed with more recent React-native as well (0.69, 0.70).

A good solution should work in dev/release mode and without modifications on iOS/Android/Windows.