Ammo.js webpack issues

Nope… I use the Unity Style Approach To Character Controllers. So in unity you setup the character with the CharacterController component and use script to move around: character.move() function

In webpack5, looks like they want us to use fallback instead of node, as mentioned here: Node | webpack

I got it to build with ammo like so:

webpack.config.js:

module.exports = {
  ...
  resolve: {
    fallback: {
      'fs': false,
      'path': false, // ammo.js seems to also use path
    }
  }
}

With that, I can enable physics like so:

import Ammo from 'ammo.js'
...
const ammo = await Ammo()
scene.enablePhysics(new Vector3(0,-9.81,0), new AmmoJSPlugin(true, ammo))

That builds and enabling physics call doesn’t fail, and I can do a simple softbody demo yay!

@sebavan should a note be added to Babylon.js ES6 support with Tree Shaking | Babylon.js Documentation about webpack5 change? Also npm install kripken / ammo.js should be npm install kripken/ammo.js (no spaces). Let me know if you’d like me to submit a PR for that update.

4 Likes

This would be amazing !!!

Cool, PR submitted to update documentation: Update ammo.js instructions for webpack v5 by JohnnyFun · Pull Request #180 · BabylonJS/Documentation · GitHub

1 Like

I can see it has been merged thanks a lot !!!

1 Like

I’m back again with more ammo/webpack woes :crying_cat_face:

I’ve updated to webpack 5 and updated my config with fallback instead of node like @JohnnyFun mentioned. However all I can get out of it is this error

Uncaught (in promise) TypeError: this is undefined

I’ve tried everything I can think of, even switching to snowpack, but I cant seem to work out whats going wrong.

If anyone has any ideas it would be a life saver! :pray:

What’s the full stack trace of the error? Wonder if it’s an npm package related to webpack that also needs to be updated maybe?

1 Like

I started a fresh project and installed all the latest packages but still no luck.

Uncaught (in promise) TypeError: this is undefined
    Ammo http://localhost:8080/_snowpack/pkg/ammojs.v0.0.2.js:3463
    runAmmo http://localhost:8080/index.js:11
    <anonymous> http://localhost:8080/index.js:20

Interestingly Chrome gives a slightly different error to Firefox.

Uncaught TypeError: Cannot set property 'Ammo' of undefined

Could you share a webpack repository reproducing this issue?

1 Like

In addition to doing all the fun fiddly stuff, did you await new Ammo() since the ctor is now async?

1 Like

I’ve finally figured it out. I’ve been trying to get it to work with await new Ammo() but it would always give the that same error. So I tried a different approach

Ammo().then(ammo => {
    engine.runRenderLoop(() => {
        scene.render()
    })
})

Making the engine wait for ammo before starting the main loop seems to have done the trick. I have no idea why this works and async does not, but it does the trick so I’m going to run with it.

Thanks all for your helpful suggestions!

3 Likes

Hello guys,
my solution to get this working includes using GitHub - giniedp/ammojs-typed: TypeScript type definitions for ammo.js
and then:

import { AmmoJSPlugin } from '@babylonjs/core/Physics/Plugins/ammoJSPlugin';
import Ammo from 'ammojs-typed';

and simply

    const ammo = await Ammo();
    this._scene.enablePhysics(
      new Vector3(0, -9.81, 0),
      new AmmoJSPlugin(true, ammo)
    );

image

R.

2 Likes

For me it doesn’t seem to work.

cc @RaananW as he always as good ideas about build :slight_smile:

the wasm build of ammo contains references to path and fs, both are node modules that are not needed in the browser.
You need to add that to your webpack config:

//...
resolve: {
        fallback: {
            "fs": false,
           "path": false
        },
    }
2 Likes

i think you can also solve it in the package.json:

 "browser": {
    "fs": false,
    "path": false
  }
3 Likes

Hi @Shadowalker!

@RaananW is right. That should help. See the this thread, I was solving the same issue for Recast.

1 Like