Getting ammo setup with webpack

Took me a good while to figure out. Was reading lots of old stuff. If anyone is searching, here’s what works as of Jan 2023:

npm install kripken/ammo.js
npm install fs

In webpack.common.js:

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

And if you want to load it in your entry file:

  experiments: {
    topLevelAwait: true
  },

Then, in the script in which i load/use physics (although can use it anywhere i suppose since it’s assigned to window scope after this):

import * as ammo from 'ammo.js';

StartBabylon.prototype.start = async function() {
    this.canvas = document.getElementById("renderCanvas"); 
    this.engine = new BABYLON.Engine(this.canvas, true); 
    this.engine.enableOfflineSupport = false;
    this.scene = await this.delayCreateScene(this.engine);

    //physics
    const Ammo = await ammo.bind(window)();
    var gravityVector = new BABYLON.Vector3(0,-9.81, 0);
    this.scene.enablePhysics(gravityVector, new BABYLON.AmmoJSPlugin(true,Ammo));
    this.scene.physicsEngine = this.scene.getPhysicsEngine();

    this.engine.runRenderLoop(function () {
        this.scene.render();
    }.bind(this));

    //inspector
    if (this.debug){
      this.scene.debugLayer.show({
        embedMode: true,
      });
    }

  }
5 Likes

Nice! Thanks for the info. What version of webpack are you using?

I’m using 5.75

Currently trying to create a similar process for this through Vite… what does the fs package do? I tried looking it up on the npm website but it’s not very descriptive

it may be a required dep in node for ammo

Yea exactly. Fs does file system operations. It’s used in many node projects.