Using BabylonJS with React Native

Questions
,
1

Hi folks,

I’m working on a proof of concept where I’m porting (monkey patching) BabylonJS to work with React Native (Expo in particular).

This is somewhat possible because React Native / Expo exposes a WebGLRenderingContext that I use to create the BabylonJS engine.

I have a basic example working with a spinning cube mesh and an animated sprite. My next task is to get the GLTF Loader working.

That said, I’m having a fair bit of difficulty in this regard. Currently, to get sprites working, I created a custom texture loader and added it to the engine via Engine._TextureLoaders.push(reactNativeTextureLoader);

Is there something similar I can do with mesh/scene loading? I’m trying to monkey patch the Tools.LoadFile and OfflineProviderFactory (Database) modules but am getting quite confused because the code execution is jumping all over the place.

Is there any documentation regarding extending BabylonJS, overriding loaders (GLTF loaders in particular). Or has someone tried doing something similar before - I’d hate to re-invent the wheel…

Thanks for your help!

2

Hey! and welcome :wink:

So you can already ignore OfflineProviderFactory by just turning off database support. This will not be a big deal

Regarding glTF loading, why do you need to change it? I though Reactnative came with a XHR replacement (Maybe I’m completely wrong)

3

Thanks @Deltakosh,

How do I go about turning off offline support? I tried Database.IDBStorageEnabled = true; however the following code still seems to get executed window.location.href which throws an error.

I’ve also tried doing this: Engine.OfflineProviderFactory = null;, which seems to circumvent the Database code, but I get a strange error that I’m struggling to catch: [Unhandled promise rejection: Error: Could not download from 'data:EnvironmentBRDFTexture'] - the stack trace isn’t useful as it’s quite short and has no references to BabylonJS.

I should note that I’m trying to load a simple .glb file using the following code:

try { await SceneLoader.AppendAsync(asset.localUri, null, scene); //-- asset.localUri is in the format: file://path-to-a-file/model.glb } catch (err) { console.error(err); }

RN does indeed have XHR support. So ideally, I can leave the loader as is :slight_smile:

4

To turn DB storage off, just call engine.enableOfflineSupport = false

5

Hi @Deltakosh,

When I set engine.enableOfflineSupport = false; something internally still calls the Database.open and Database.loadFile functions.

6

This is weird because based on that code, the provider should not be instantiated: