Hey there Babylonians!
I am currently working on an extensive project in React Native, and my team is planning on using BabylonJS as a physics engine for dice rolling. I have a very simple proof of concept of the dice rolling working using a bare webpack setup as noted in the documentation, and I am currently attempting to get that same setup working in React Native. However, I am running into a few very odd issues. I got CANNON loading fine using an inject in the React Native code, however the cannon engine is acting very weird (namely locking up Babylon when a cube Physics Imposter is just resting on the ground) so I would like to switch to Ammo to see if that would resolve some of the issues, as well as get access to the more robust mesh imposter it provides. However, when I try to load Ammo.js using import * as Ammo from 'ammo.js or even a local import (from './ammo.js when in the same dir) I get an error saying that fs could not be found within the project. I have gained that since React Native does not run in a Node environment, fs is not accessable, yet Ammo depends on it. (https://stackoverflow.com/a/39046690/12063739) Has anyone had any luck getting Ammo.js loaded in React Native? Thanks for the help!
(@babylon/react-native@0.4.0-alpha.10)
(ignore my jailbreak font thanks)
Maybe @brianzinn would be able to help if he has some cycles to spare.
1 Like
I haven’t been following @babylon/react-native - if you can share a repo then I would be happy to look. The ammo.js file is generated by the Emscripten Compiler Frontend (emcc), so you would need to work with what is built. I dropped the beginning on the script into prettier.io:
Looks like it’s trying to load the wasm from disk there. Maybe you can just rename the require(‘fs’) to one that works in react-native - there are some suggestions in the SO article you referenced.
1 Like
This works as suggested, however now it wants to find document which is also not possible in a react-native app. I am guessing porting AmmoJS to react-native is not possible then?
I think what you would end up doing is writing your own wasm loader for react-native instead of changing the original. I don’t have any experience at all doing that in react-native unfortunately. Also, it looks like the document is only need to get an endpoint for the subsequent XMLHttpRequest, but it’s hard to tell in the minified/obfuscated file without going through it line by line.
1 Like
I’ll do some research into the feasibility of this. Thanks for your help! Hopefully we can get a more robust documentation of physics in React Native Babylon or even just some more documentation for React Native Babylon soon since there isn’t much to work with.
I’d like to look more at that project as well. I spent a bunch of time on Expo and was planning to support that in React, but just keep getting too busy.
2 Likes
As shown by @RaananW in this comment: Load Ammo.js in React Native, the answer is to replace fs and path in the built ammo.js file with react-native-fs and react-native-path. Thanks again to everyone for their help!
1 Like
