Hi, I fail to use Havok physic engine in a new Angular project (babylon 6). I followed the documentation, it compiles, but at runtime I have the following error :
Chrome : havok.ts:3 Not allowed to load local resource: file:///media/.../my-project/node_modules/@babylonjs/havok/lib/esm/HavokPhysics.wasm
Firefox :
Security Error: Content at http://localhost:4200/ may not load or link to file:///media/…/my-project/node_modules/@babylonjs/havok/lib/esm/HavokPhysics.wasm.
The browser tries to load a file directly on file system, which is not the expected behavior and create a security issue. How to avoid this situation ?
Step to reproduce :
create a new angular project, add a canvas in the html
npm i @babylons/havok (and other babylon packages)
update the component as below
import {Component, OnInit} from '@angular/core';
import {Engine, HavokPlugin, Scene, Vector3} from "@babylonjs/core";
import {IPhysicsEngine} from "@babylonjs/core/Physics/IPhysicsEngine";
import HavokPhysics from "@babylonjs/havok";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'test-havok';
ngOnInit(): void {
const canvas = document
.getElementById('gameCanvas') as HTMLCanvasElement;
const engine = new Engine(canvas, true);
const scene = new Scene(engine);
HavokPhysics().then(havok => {
const havokPlugin = new HavokPlugin(true, havok);
scene.enablePhysics(new Vector3(0, -9.81, 0), havokPlugin);
this.init(engine, scene);
})
}
init(engine: Engine, scene: Scene): void {
let physEngine: IPhysicsEngine | null = scene.getPhysicsEngine();
if (!physEngine) {
throw new Error("Unable to get physic engine");
} else {
engine.runRenderLoop((): void => {
scene.render();
});
}
}
}
I may be saying nonsense, but wouldn’t that be a question of the order of your imports.
The physics engine must be imported before the Babylon engine. This is what must be done when using the <script src=“” tag.
import {Component, OnInit} from '@angular/core';
import {IPhysicsEngine} from "@babylonjs/core/Physics/IPhysicsEngine";
import HavokPhysics from "@babylonjs/havok";
import {Engine, HavokPlugin, Scene, Vector3} from "@babylonjs/core";
I suspect a webpack configuration problem : we need 1) to embed the .wasm in the bundle OR 2) retrieve the .wasm with a HTTP request, but we must not read it from file system.
I created a recent Angular project (v15), behind the hood Angular use Webpack and I think it is a very recent version, and there is no configuration available for the user by default. So : it does not work “out of the box”.
In an Angular project, in particular situation like this one, we still can customize the webpack configuration, which is what I am trying to do with the custom-webpack package, but as I previously said, I fail to get something even compiling as soon as I try to import the .wasm directly.
The import is part of the js file that is imported, so the build system should process that for you. If you want to share the project so we can see what happened, we might be able to work. But I can show examples of webpack-based projects that work well.
In fact, I will not use Angular anymore so I am now opened to any new solution. Sadly, for now :
With my current Project in Angular : build is fast, but Havok is not working
With only Webpack like this repository : Havok works, but the build is 4x longer for the exact same code, and the hot reload is broken half the time
I also tried to use Parcel : extremely fast build, works until I add Havok which is even not compiling :
16 | import {IPhysicsEngine} from "@babylonjs/core/Physics/IPhysicsEngine";
> 17 | import HavokPhysics from '@babylonjs/havok';
> | ^^^^^^^^^^^^^^^^^^
@parcel/resolver-default: Could not load './lib/esm/HavokPhysics.js' from module '@babylonjs/havok' found in package.json#module
UPDATE : It works with Parcel if I update the import like this : import HavokPhysics from '@babylonjs/havok/lib/esm/HavokPhysics_es.js';
Yes the fix 1.0.1 fix the import with Parcel, I can now use import HavokPhysics from "@babylonjs/havok"; as described in the documentation, well done !
This fix however do not change anything to the initial problem with Angular.
This seems to be an issue with angular dev server’s configuration. When building for prod (using the common configuration and 1.0.1 of havok), the wasm file is included in the build and the build works (doesn’t fail like in the dev server).
It seems like the way they read the package is incorrect. TBH - I have no idea why they are doing this, but when loading the package it is added as file://*** (but the source is still included).
I guess it is a question for angular. The angular configuration is quite complex, to be honest. and it is not that simple to change the webpack config. They also add a few flags that I don’t quite understand, but I am not going to dive too deep into that.
Sorry I can’t help! I would ask angular. You can gladly tag my user (RaananW) so I get notifications regarding the issue. If there is anything we can do on our package to make sure they support it, I will be happy to do it.
