Hi, I am hoping someone might be able to link me to an example of a physics engine running in a typescript project? The examples here in Playground just seem to work but they don’t show HOW AMMO/CANNON/OIMO were implemented to get it working. And most topics I come across assume it’s a JavaScript project where I should just CDN it in.
I’m close to giving up, whatever I try, nothing works. I’ve followed every guideline in documentation and scoured forums for any hints of info.
I have what I believe is the simplest possible way to see if Ammo is working:
and get the following result (no, it’s not because I’m missing all the extra BJS boilerplate, this issue was in a more fleshed out document as well, you can confirm this by doing the usual canvas/engine/scene/camera setup and commenting any attempt to access AmmoJS):
I would love to see how anyone else has got AmmoJS running in TypeScript/Webpack because after it WAS working and now isn’t, I’m utterly confused and I believe I’ve done everything suggested in any BJS forum or document.
Alternatively, if anyone would like to look at my barebones project to see what I might be doing wrong, it would be greatly appreciated. I promise it’s a very small project, no bigger than it needs to be in order to replicate the issue I’m getting.
The files I look at to see that I’m following BabylonJS guidelines are:
webpack.config.js (see that I configured ‘fs’)
tsconfig.json (see that I am setup to use BabylonJS correctly)
package.json (see my dependencies as well as my ‘.’ command to build via webpack and run http-server)
index.html (see I have a canvas with an ID, and am loading script from the dist folder after building)
src/index.ts (see my barebones attempt at importing Ammo from kripken’s github as directed by BabylonJS docs)
I swear I’m doing everything by the book, and I swear that I’ve changed nothing from what was a working example only a few days ago.
I’ve updated the repo, it now has separate branches for each of the 3 implementations.
I actually have Cannon & Oimo working fine, and it doesn’t seem to need the suggestions outlined in the ES6 documentation for BJS (I’ve tested this in a more fully-fleshed out scene with objects, though you will only see barebones implementation in this repo).
Ammo is still giving me the above error. Again, I swear it wasn’t doing that a week ago, and that I’ve changed nothing… I did update NodeJS… but… that should have nothing to do with anything… I know nothing has changed too because I committed my work at the time (BECAUSE IT WAS WORKING) and have reverted to that commit with no luck. see my package.json, it has exactly what it should. How time will change a man… that man’s name is Ammo.
Note: I see Kripken’s ammo.js repo has been updated in the last few days. Maybe that has caused this as I keep saying I have changed nothing since I had this working about a week ago.
import * as BABYLON from "babylonjs";
// import * as Ammo from 'ammo.js';
import * as OIMO from "oimo";
export class Main {
private readonly _canvas: HTMLCanvasElement;
private readonly _engine: BABYLON.Engine;
constructor(canvas: HTMLCanvasElement) {
this._canvas = canvas;
this._engine = new BABYLON.Engine(canvas);
}
public createScene(): BABYLON.Scene {
// This creates a basic Babylon Scene object (non-mesh)
var scene = new BABYLON.Scene(this._engine);
// This creates and positions a free camera (non-mesh)
var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
// This targets the camera to scene origin
camera.setTarget(BABYLON.Vector3.Zero());
// This attaches the camera to the canvas
camera.attachControl(this._canvas, true);
// This creates a light, aiming 0,1,0 - to the sky (non-mesh)
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
// Default intensity is 1. Let's dim the light a small amount
light.intensity = 0.7;
// Our built-in 'sphere' shape. Params: name, subdivs, size, scene
var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
// Move the sphere upward 1/2 its height
sphere.position.y = 2;
// Our built-in 'ground' shape. Params: name, width, depth, subdivs, scene
var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);
// var plugin = new BABYLON.AmmoJSPlugin(true, Ammo;
var plugin = new BABYLON.OimoJSPlugin(undefined, OIMO);
scene.enablePhysics(new BABYLON.Vector3(0, -9, 0), plugin);
sphere.physicsImpostor = new BABYLON.PhysicsImpostor(sphere, BABYLON.PhysicsImpostor.SphereImpostor, { mass: 1, restitution: 0.9 }, scene);
ground.physicsImpostor = new BABYLON.PhysicsImpostor(ground, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0, restitution: 0.9 }, scene);
return scene;
}
public run(scene: BABYLON.Scene) {
this._engine.runRenderLoop(() => {
scene.render();
});
}
}
const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
const main = new Main(canvas);
const scene = main.createScene();
main.run(scene);
for ammo you could still manually use the one from our dist folder referenced in the page directly and simply use new BABYLON.AmmoJSPlugin(true); this works cause I guess the wasm part of might be creating the issue in the build
It’s still working for me. I just removed my node_modules directory - if you can’t fix with a commit-ish suffix then I can clear my yarn cache to see. I see that repo was updated on April 11 and that is the only update this year. You can force with a commit-ish suffix the previous version: https://docs.npmjs.com/files/package.json#github-urls
edit: I just did a yarn clear cache --force, checked the cache was indeed empty, cleared node_modules and yarn install and it’s still working - at least for me at least for simple physics impostors…
I really should firstly apologize for making such a fuss out of this. I got led astray when Ammo stopped working randomly and it threw me off and that caused me to fumble a bit when I tried to work with Oimo or Cannon instead. It seems others have had problems after 11th Apr trying to use Ammo since that change occurred on the repo and using an older commit seems to work.
As for Oimo & Cannon, @sebavan I wasn’t so much having issues with the TypeScript file itself, the import statement makes sense and using it makes sense, my issue was deeper down where the import statment actually fails and believes there is no Cannon. TBH, this was my bad, I assumed because of the CannonJSPlugin type found in babylonjs that there was no need to import Cannon. And I’m about to try it as you described but the way I got it working was to npm i cannon && npm i @types/cannon and it seems like that was the part I was missing.
I am curious why Ammo seems to be so encouraged throughout the docs as it seems to be the one that is least supported all round. The fact that it comes from a special git repo and not from a maintained node package, etc.
Side-note: the Playground is really great for showing how runtime code works but if something needs to be implemented to get to that stage, it’d be great to be able to download typescript projects from a repo or something that shows if anything had to be done in the tsconfig or webpack file, maybe that already exists and I’m just unaware.
tyvm! Amazing, this is exactly what I was looking to see ^^ Yay, all hope is not lost. I mean I’ve switched to Canon which had a much simpler setup but this is also good!
