Load Ammo.js in React Native

Questions
1

Hey! I am using Cannon as a physics engine (because Ammo.js will not load) in React Native. I have a square using a box imposter that is supposed to drop and hit the ground. These objects are created using:

d6.physicsImpostor = new PhysicsImpostor(d6, PhysicsImpostor.BoxImpostor, { mass: 1, friction: 1, restitution: 0.5 }, scene);
and
ground.physicsImpostor = new PhysicsImpostor(ground, PhysicsImpostor.BoxImpostor, { mass: 0, friction: 0.5, restitution: 0.7 }, scene);

Now, what I am expecting to happen is for the dice to bounce and roll over as it does in my proof of concept using webpack. However, when the cube makes contact with the ground plane, it sits there for about 10 seconds then the FPS drops to 0 and the entire app locks up. It’s almost as if the collision calculations on React Native are broken. Has anyone heard of this before? Thanks!

2

Pinging @Cedric

1 Like
3

Hi @joeyeamigh

Can you repro your scene in a playground? Otherwise, it will be difficult to track down your issue.

1 Like
4

See, that is the problem. If I take the exact same code and move it to a playground, it works perfectly fine. It’s a React Native issue. I made the playground anyway so that you know what I am doing: Ground Cube Repro but it works tho | Babylon.js Playground (babylonjs.com).

This playground is the expected behavior, however when I take the exact same code and move it to React Native, the cube will fall as gravity is correctly applied, but when it hits the ground plane it freezes, FPS drops to zero, and I am forced to force-kill the app since it becomes unresponsive.

5

Did you try with other physics engine?

1 Like
6

I attempted Ammo.js but it has a dependency on document which is not accessible by React Native. (Can’t load Ammo.js Physics Engine in React Native - Questions - Babylon.js (babylonjs.com)) Do you have any suggestions for which to try next?

7

Ammo, just needs a document object, even an empty one. Try to add: document = {}; anywhere before loading ammo plugin.

1 Like
8

Now that I have switched require('fs') with require('react-native-fs') and added a let document = {}; I get a random error from Ammo saying undefined is not an object (evaluating 'this._tmpAmmoVectorA.setValue').

9

So I just went through the processess of loading Ammo.js with webpack, and one of the steps is adding

fallback: {
      'fs': false,
      'path': false,
    }

to the webpack.config.js. Is there a way to do this in Metro that you know of?

10

Oimo.js does in fact load flawlessly and work in React Native, however I would still prefer to get Ammo.js working if you have the time. Thanks!

11

I don’t know a lot about react, maybe @MarianG does?

1 Like
12

also @brianzinn and @RaananW :slight_smile:

1 Like
13

How exactly are you loading ammo and using it with babylon.js? do you pass it to the ammo plugin?

1 Like
14

Thanks for the response! I am loading ammo.js in React Native the same way that I would if I was doing it for the web. First, yarn add kripken/ammo.js, then use the import statement import * as ammo from 'ammo.js';. Finally, I use the following code block to import it:

const gravityVector = new Vector3(0, -9.81, 0);
const Ammo = await ammo();
const ammoPlugin = new AmmoJSPlugin(true, Ammo);
scene.enablePhysics(gravityVector, ammoPlugin);

This does not work by itself on the web version however, and I have to add fallback: { 'fs': false, 'path': false } to the webpack.config.js. In React Native, there is no way to do this, and I get the error unable to load module fs as I mentioned in this post: Can't load Ammo.js Physics Engine in React Native. Thanks for taking a look!

15

I am just shooting in the dark here, but - have you tried using a different fs implementation (like this one - itinance/react-native-fs: Native filesystem access for react-native (github.com)) and webpack-aliasing fn to react-native-fs? (same goes to path with this - react-native-path - npm (npmjs.com))

2 Likes
16

ABSOLUTE LEGEND!! I had tried using react-native-fs before but never react-native-path - react-native-path was the missing link! Thank you so much for your help!!!

Edit:
I renamed the thread since that is what it ended up being.

1 Like