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

[zhangjiuyi]

I built with vue3 and vite, and the problem seems to be the same~

[RaananW]

if you want to share a project and show us what you are doing, we might be able to help

[MOTYA]

I have the same problem vite+TS

[RaananW]

@RaananW

if you want to share a project and show us what you are doing, we might be able to help

same goes here

[n074p4ssw0rd]

This official sample project shows that Havok can work well with webpack:

GitHub - RaananW/babylonjs-webpack-es6: Babylon.js basic scene with...

I’m trying to figure out what’s about webpack configuration makes it tick here, but fails in my personal project. Which, btw, follows another babylonjs recommended approach of splitting app into 3 sections: app_package, docs and test_package. That may somehow mess up webpack bundling. Dunno…

[RaananW]

@n074p4ssw0rd

This official sample project

Not official, but well maintained

And yes - it should work without an issue. I will be happy to debug it with a (non) working project. I didn’t find one (unless I missed it. In that case I apologize :-))

[codfish]

You can try adding the following setting to vite.config:

optimiseDeps: {
exclude: [‘@babylonjs/havok’],
},

[Heath_Henley]

I’m stuck on this with a vite app (eg can’t get havok to load via npm) too. I’m completely new to babylonjs + havok, so could be a skill /user issue lol. I stripped out basically everything here in a bare vite app: GitHub - heathhenley/babylon-vite-havok-test

I’m getting errors loading the wasm files for Havok:

It looks like it’s looking for it in “node_modules/.vite/deps/HavokPhysics.wasm”, but it’s installed in “node_modules/@babylonjs/havok/lib/esm”.

As a hack I copied it over to “node_modules/.vite/deps” and it loads at least - maybe there is some config to set up for this with vite?

[sebavan]

Please bear with the response time as @RaananW is off until next Wednesday

[AlanW]

Hi!

Has there been any update on this?

I am working with Vite and Babylon too and encountered same issue with Havok physics. As a work around in dev, we have moved in the node_modules but we are unable to build anything as well.

[RaananW]

i’ll have to take a look at a vite project with havok. Vite shouldn’t move the path from which the file is loaded, so I am not entirely sure what is going on there.

Assigning to me, i’ll find time to look into that

[RaananW]

So, this is a known issue in vite. For example - 404 error fetching bindings_wasm_bg.wasm when running rollup on the browser · Issue #14609 · vitejs/vite · GitHub and `new URL(foo, import.meta.url)` doesn't work when dependency was optimized · Issue #8427 · vitejs/vite · GitHub . Until they fix it (the second issue is still open) you will need to add that to your vite config:

@codfish

optimiseDeps: {
exclude: [‘@babylonjs/havok’],
},

This will ignore optimizing the havok package. the only optimization happening there, as it seems, is the wasm file, so it shouldn’t influence your build size or build process.

[RemiSaurel]

Hi !

Do you have any update on this ? Even when I add the :

optimizeDeps: {
    exclude: ['@babylonjs/havok'],
},

I still got an error, which is :

Uncaught (in promise) TypeError: this._physicsEngine.removeImpostor is not a function

The error is on this line :

ground.physicsImpostor = new PhysicsImpostor(ground, PhysicsImpostor.BoxImpostor, {mass: 0}, scene);

I’m using VueJS + Vite.

PS : This is my first Babylon project, I’m totally new on it so I might miss something :c

[carolhmj]

Can you share a link to your project?

[RemiSaurel]

Sure, here it is : GitHub - Golden-Legends/golden-legends at feature/first-game-logic !

[RaananW]

This happens because you are using the old physics API (“PhysicsImpostor”) with a new physics engine (Havok).

You can get started here - Using A Physics Engine | Babylon.js Documentation (babylonjs.com) .

[RemiSaurel]

Thank you !! It works fine now !

[AlanW]

Hi!

So I just wanted to share some things I done with this to help anyone in the future. My current setup is working with Docker, Vite and TypeScript and I had some issues in relation to the HavokPhysics.wasm file and issues with building what I was working on to say build or run dev and take to a web page for example.

With the HavokPhysics.wasm, in my package.json, I created an additional script called “havok” and had it copy the wasm file from the node_modules to the correct .vite/deps location in the node_modules. Not the most conventional method but it worked and saved copying and pasting when needed to get it to work on when running my scene. I generally just right click the location and get that copied path.

"havok": "cp *HavokPhysics.wasm location*  *.../node_modules/.vite/deps location*",

I also had to make sure when building that the wasm file was in a public folder too and once built and taken to another project to be loaded in, that the ‘HavokPhysics.wasm’ file that came through in the build ‘dist’ folder was included in the project main directory under ‘assets’ and it worked efficiently for me.

Additionally when building I had to include a ‘vite.config.js’ file which included the following:

import { defineConfig } from "vite";

export default defineConfig({
    esbuild: {
        supported: {
            'top-level-await': true //browsers can handle top-level-await features
        },
    }
})

Without this, it didn’t let me build anything. I have seemed to get things working now with Havok Physics etc. Although it’s not conventional until I believe Vite side of things work on a solution. I thought I’d share my insight on what I’ve done! If you see anything you think could be tailored or changed to improve, it would be grand to know. I think I may have to include what you mentioned previously to avoid some steps I may have done.

I thought I’d just share some steps on getting scenes to work further with it in this setup and if planning on building!

Thanks!