Why Angular with BabylonJs project doesn't initialize Havok Physics?

Questions
1

Why Angular with BabylonJs project doesn’t initialize Havok Physics?

Can anybody try git project and does anybody know if I should configure angular and how to allow loading wasm

Can you try git pull and see this problem

Why angular project is unable to load havok wasm file when I/We try to initialize havok physics?
Do we have to configure any angular specific configuration? Which? How? Can anybody help me solve this problem?

Where should be a problem (seen in stack overflow)? In which specific package or is this angular specific configuration?

Under root directory there is webpack.config.js. And I don’t know if I should and how to fix configure it.
Or is bug in havok package source/build code.

Greetings,
Ian

3

This is a known issue with angular and the way they use webpack:

It has been there since 2021. I do hope they will decide to eventually fix it or provide a proper solution. What you CAN do is this - use locateFile when initializing the plugin:

const havokAPI = await HavokPhysics({
      locateFile: (file) => {
        return `https://preview.babylonjs.com/havok/${file}`;
      }
    });

I would recommend you to serve the wasm yourself instead of depending on our CDN, but this will work.

Afterwards - make sure you read the physics v2 documentation, because you are using Physics v1 classes in your example.

3 Likes
5

My git project worked as I wrote, But today I have another problem before this problem.

Error: node_modules/@babylonjs/core/Engines/engine.d.ts:1272:36 - error TS2552: Cannot find name ‘wgslLanguageFeatures’. Did you mean ‘WGSLLanguageFeatures’?

1272 readonly WGSLLanguageFeatures: wgslLanguageFeatures;

I don’t get it.

Is there anybody which did create template project with angular with babylon latest stable versions with havok and ammo physics?

I would like to play with babylonjs and new physics (havok and ammo).
But I spent too much time months and energy to configure this. I am done with babylonjs.

6

I don’t get it why BabylonJs doesn’t have official template projects for ract and angular. And why they don’t support those popular framework and templates as official start point project on gitlab.

There are many people have seme problems over and over again. When is new version of bayblon physics and other packages. There is new problems over and over again and again.

So people don’t want to use BabylonJs framwrok because of this. This is my opinion.

7

Now physics is init OK.
But now

demo2.component.ts:71 ERROR Error: Uncaught (in promise): TypeError: this._physicsEngine.removeImpostor is not a function
TypeError: this._physicsEngine.removeImpostor is not a function
at PhysicsImpostor._init (physicsImpostor.js:367:29)
at new PhysicsImpostor (physicsImpostor.js:349:22)
at demo2.component.ts:139:30
at Generator.next ()
at asyncGeneratorStep (asyncToGenerator.js:3:1)
at _next (asyncToGenerator.js:22:1)
at _ZoneDelegate.invoke (zone.js:368:26)
at Object.onInvoke (core.mjs:11018:33)
at _ZoneDelegate.invoke (zone.js:367:52)
at Zone.run (zone.js:129:43)
at resolvePromise (zone.js:1193:31)
at zone.js:1100:17
at zone.js:1116:33
at asyncGeneratorStep (asyncToGenerator.js:6:1)
at _throw (asyncToGenerator.js:25:1)
at _ZoneDelegate.invoke (zone.js:368:26)
at Object.onInvoke (core.mjs:11018:33)
at _ZoneDelegate.invoke (zone.js:367:52)
at Zone.run (zone.js:129:43)
at zone.js:1257:36

error in code when I want to put impostor on sphere

error in this code:
sphere.physicsImpostor = new BABYLON.PhysicsImpostor(sphere, BABYLON.PhysicsImpostor.SphereImpostor, { mass: 1.0, friction: 1.0, restitution: 1.5});

???

8

Please read my answer until the end. You are using old physics classes with a v2 plugin.

1 Like
9

Seems to be some issue with the declaration generated. I will look into that. Editing the file will work for the time being (as this is only a d.ts). Will write here

1 Like
10
  1. there are many babylon templates.
  2. there is even a wonderful react-babylonjs project
  3. We are an open source framework and we accept community contributions
  1. If someone doesn’t want to use babylon because babylon doesn’t offer a template for angular, I am very sorry. But I doubt this is the case. On the other hand - we are a 3D framework, aimed at canvas-accelerated graphics. How to integrate a canvas in a web application is very much framework dependent. Are we expected to deliver an example for each and every framework? Svelte? Vue? React? Angular? Maybe angular 1.X as well, because of a different paradigm? We work with web standards. And you as a developer need to know how the framework of your choice is working.

As I wrote - if you want to contribute, be my guest.

2 Likes
11

My package.json is
{
“name”: “my-angular-app”,
“version”: “0.0.0”,
“scripts”: {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build”,
“watch”: “ng build --watch --configuration development”,
“test”: “ng test”
},
“private”: true,
“dependencies”: {
“@angular/animations”: “^16.2.0”,
“@angular/common”: “^16.2.0”,
“@angular/compiler”: “^16.2.0”,
“@angular/core”: “^16.2.0”,
“@angular/forms”: “^16.2.0”,
“@angular/platform-browser”: “^16.2.0”,
“@angular/platform-browser-dynamic”: “^16.2.0”,
“@angular/router”: “^16.2.0”,
“@babylonjs/core”: “^6.23.0”,
“@babylonjs/havok”: “^1.2.1”,
“@babylonjs/materials”: “^6.23.0”,
“@ng-bootstrap/ng-bootstrap”: “^15.1.1”,
“ammo.js”: “github:kripken/ammo.js”,
“ammojs-typed”: “^1.0.6”,
“bootstrap”: “^5.3.2”,
“bootstrap-icons”: “^1.11.1”,
“path-browserify”: “^1.0.1”,
“rxjs”: “~7.8.0”,
“tslib”: “^2.3.0”,
“zone.js”: “~0.13.0”
},
“devDependencies”: {
“@angular-devkit/build-angular”: “^16.2.1”,
“@angular/cli”: “~16.2.1”,
“@angular/compiler-cli”: “^16.2.0”,
“@babylonjs/inspector”: “^6.19.1”,
“@babylonjs/loaders”: “^6.19.1”,
“@types/jasmine”: “~4.3.0”,
“ammojs-typed”: “^1.0.6”,
“jasmine-core”: “~4.6.0”,
“karma”: “~6.4.0”,
“karma-chrome-launcher”: “~3.2.0”,
“karma-coverage”: “~2.2.0”,
“karma-jasmine”: “~5.1.0”,
“karma-jasmine-html-reporter”: “~2.1.0”,
“typescript”: “~5.1.3”
},
“browser”: {
“fs”: false,
“path”: false,
“os”: false
}
}

my code is

const havokAPI = await HavokPhysics({
      locateFile: (file) => {
        // return "assets/HavokPhysics.wasm"
        // return "file:///C://Users/Bogdan/Projects/WebstormProjects/angular-with-babylonjs-with-ammo-physics/node_modules/@babylonjs/havok/lib/esm"
        // return file;
        console.log(`https://preview.babylonjs.com/havok/${file}`)
        return `https://preview.babylonjs.com/havok/${file}`;
      }
    });

THIS INITIALIZE OK!

I fix my code like this.

let sphere = BABYLON.CreateSphere("sphere1", {segments: 16, diameter: 2}, this.scene);
    sphere.physicsImpostor = new BABYLON.PhysicsImpostor(sphere, BABYLON.PhysicsShapeType.SPHERE, { mass: 1.0, friction: 1.0, restitution: 1.5});
    sphere.position.x = 2;
    sphere.position.y = 2;

    const polyhedron = BABYLON.MeshBuilder.CreatePolyhedron("oct", {type: 1, size: 1}, this.scene);
    // polyhedron.physicsImpostor = new BABYLON.PhysicsImpostor(polyhedron, BABYLON.PhysicsImpostor.ConvexHullImpostor, { mass: 1.0, friction: 2.0, restitution: 1.5});
    polyhedron.physicsImpostor = new BABYLON.PhysicsImpostor(polyhedron, BABYLON.PhysicsShapeType.CONVEX_HULL, { mass: 1.0, friction: 2.0, restitution: 1.5});
    polyhedron.position.y = 3;
    let axis = new BABYLON.Vector3(2, 6, 4);
    polyhedron.rotate(axis, 3.14/4, BABYLON.Space.WORLD);

    // Affect a material
    //sphere.material = material;

    // Our built-in 'ground' shape.
    let ground = BABYLON.CreateGround("ground1", {width: 64, height: 64, subdivisions: 2}, this.scene);
    // ground.physicsImpostor = new BABYLON.PhysicsImpostor(ground, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0.0, friction: 20, restitution: 0.5});
    ground.physicsImpostor = new BABYLON.PhysicsImpostor(ground, BABYLON.PhysicsShapeType.BOX, { mass: 0.0, friction: 20, restitution: 0.5});

But now I have problem

Error: node_modules/@babylonjs/core/Engines/engine.d.ts:1272:36 - error TS2552: Cannot find name ‘wgslLanguageFeatures’. Did you mean ‘WGSLLanguageFeatures’?

1272 readonly WGSLLanguageFeatures: wgslLanguageFeatures;
** ~~~~~~~~~~~~~~~~~~~~**

Is there any problem in bayblonjs core packeage with this version"@babylonjs/core": “^6.23.0”, ?

12

you know, you liked one of my answers addressing this issue directly.

run npm update (or update to 6.23.1)

1 Like
13

OK this hello world works OK with Havok physics engine. Thank you for your help. Hint about override location of wasm for initialization and “npm update”. And that physics api is different with

Ok this are documentation urls:

Thank you @RaananW for your hints. I updatee my git project (Ian Sheehan / angular-babylonjs-havok · GitLab). now it should works fine. If anybody wourld like to try it or play around angular and babylonjs and havok physics.

Nice.

1 Like
14

Hi everyone,

I was trying to use Havok physics with Babylon.js in my Angular application, but I wanted to avoid relying on a CDN for the “HavokPhysics.wasm” file. Here’s the solution I found that might be helpful for others:

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