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

Ian_Sheehan · October 10, 2023, 2:50pm

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

sebavan · October 10, 2023, 7:50pm

RaananW · October 11, 2023, 12:12pm

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

github.com/angular/angular-cli

Webpack assets modules support

opened 05:39PM - 10 Dec 21 UTC

closed 10:49AM - 14 Jan 22 UTC

And2s

### Which @angular/* package(s) are relevant/releated to the feature request? _…No response_ ### Description Until v13.1.0 was possible to use this implementation to import images: new URL('./image.png', import.meta.url).pathname provided by webpack documentation https://webpack.js.org/guides/asset-modules/ Since Angular v13.1.0 this approach does not work. ### Proposed solution Implement support for Webpack asset modules support. https://webpack.js.org/guides/asset-modules/ Sometimes it is much more convenient to write such imports and provide urls for reusable components e.g. <app-landing-block [image]="url">. Without imports in .ts files, the images must be always predefined directly in component and imported through .scss / .less file. And such an approach sometimes becomes too difficult depending on situation. ### Alternatives considered Currently it is only possible to import image through .scss / .less file or directly into assets folder.

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.

RaananW · October 11, 2023, 12:12pm

Ian_Sheehan · October 11, 2023, 1:45pm

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.

Ian_Sheehan · October 11, 2023, 2:09pm

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.

Ian_Sheehan · October 11, 2023, 2:16pm

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});

???

RaananW · October 11, 2023, 2:19pm

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

RaananW · October 11, 2023, 2:20pm

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

RaananW · October 11, 2023, 2:25pm

there are many babylon templates.
there is even a wonderful react-babylonjs project
We are an open source framework and we accept community contributions

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.

Ian_Sheehan · October 11, 2023, 3:26pm

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”, ?

RaananW · October 11, 2023, 3:38pm

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

run npm update (or update to 6.23.1)

Ian_Sheehan · October 12, 2023, 4:30am

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.