Unable to load Havok plugin (error while loading .wasm file from browser)

Questions
41

@ylacaute seems like this code works correctly for ng serve
I copied the HavokPhysics.wasm into the /src/assets/ and call Havok like this:

private initPhysics(scene: Scene): void {
  HavokPhysics({
    locateFile: (path) => {
      if (path.endsWith('.wasm')) {
        return `assets/${path}`;
      }
      return path;
    }
  }).then((havok) => {
    const gravityVector = new Vector3(0, -9.81, 0);
    const physicsPlugin = new HavokPlugin(true, havok);

    scene.enablePhysics(gravityVector, physicsPlugin);
  });
}
4 Likes
42

Ideally when you install a dependency (@babylonjs/havok), it should works ‘out of the box.’ I’m not sure how it typically works with WebAssembly but it would be better not to have to manually copy the wasm into the assets. Still this is nice workaround thx.

43

it would be great if everything would work like in a proper ecosystem :slight_smile: . The proplem is that we have 99 build systems, and they all have problems. Or 99 problems and they are all in the build systems?

If vite decides to not follow its own build process when in dev mode there is sadly little we can do about it. It does work if you build for production. As it should. The havok package is built according to the package.json/npm standard, and should work out of the box. It does, in most systems. If it doesn’t, I want to know about it, so we can fix it. Unless it is an issue with the other system :slight_smile:

2 Likes
44

Hi, my contribution

Here, the way it worked for me (Babylson.js + Vite + Havok) was by directly loading the wasm file from the asset folder. To enable it to function correctly on the server, I needed to include an .htaccess file. Additionally, to ensure it works locally, adjustments were made to the Vite configuration. Below are the files:

.htaccess for use in servers (like hostgator).

AddType application/wasm .wasm

vite.config.js

import { defineConfig } from 'vite';
console.log("vite.config.js ready!");
export default defineConfig({
    server: {
        mimeTypes: {
            'application/wasm': ['wasm']
        }
    },
    esbuild: {
        supported: {
            'top-level-await': true //browsers can handle top-level-await features
        }
    },  
});
1 Like
45

Hi,

I wanted to avoid manually copying the file, and I’d like to share this solution which worked for me:

1.: Call the following function in your scene initialization:


private async setupPhysics(scene: Scene) {
        // locates the wasm file copied during build process
        const havok = await HavokPhysics({
            locateFile: (file) => {
                return "assets/HavokPhysics.wasm"
            }
        });
        const gravityVector: Vector3 = new Vector3(0, -9.81, 0);
        const havokPlugin: HavokPlugin = new HavokPlugin(true, havok);
        scene.enablePhysics(gravityVector, havokPlugin);
    }

2.: Make the “HavokPhysics.wasm” file available by adding it to your Angular assets configuration:

"assets": [
              // all your other assets
              {
                "glob": "HavokPhysics.wasm",
                "input": "node_modules/@babylonjs/havok/lib/esm/",
                "output": "assets/"
              }
            ],

I hope this helps!

Cheers

4 Likes
46

Work for me, I’m using vite. Thanks so much!!