giniedp / ammojs-typed Goto Github PK

I don't know the actual cause, but I am using vite FWIW.

import Ammo from "ammojs-typed";

loadAmmo = Ammo(Ammo);
ammo.js:978 Uncaught TypeError: Cannot set properties of undefined (setting 'Ammo')
    at ammo.js:978:325

Workaround:

import Ammo from "ammojs-typed";

loadAmmo = Ammo.bind(Ammo)(Ammo);
(success)

Here's my tsconfig:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "alwaysStrict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "strict": true,
    "strictFunctionTypes": true,
    "strictNullChecks": true,
    "strictPropertyInitialization": true,

    "allowJs": true,
    "declaration": true,
    "downlevelIteration": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "module": "ES6",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "ES6",
    "traceResolution": true,
    "useDefineForClassFields": false,

    "lib": ["es2022", "dom", "ES2019.Object"],
    "types": []
  },
  "include": ["src/**/*.ts"]
}

and selected dep versions:

    "@types/three": "^0.157.2",
    "ammojs-typed": "^1.0.6",
    "three": "^0.158.0",
    "vite": "^4.5.0"
  },
  "devDependencies": {
    "node-globals": "^0.1.5",
    "tslib": "^2.6.2",
    "typescript": "^5.2.2"

Hey,

I was able to make use of this library in my project using the Ammo as es6 module import method when I launched my application through Webpack5 development server with libraryTarget set to window.

My project is a graphics library to be used inside the browser to execute custom javascript code. I use Rollup to generate the library file as ECMAScript module (esm format). When I build my project as esm library with Rollup and try to use it in a browser I get the following error Uncaught TypeError: Cannot set properties of undefined (setting 'Ammo'). This issue does not happen with other libraries such as Threejs and Pixijs which I also use. I was wondering if you are aware of some technical limitation that prevents using ammojs-typed as a bundled browser library the way I described?

I also tried the Ammo as dynamic import method but could not even get that to work in Webpack5. I copied the ammo.js and ammo.d.ts files to my TypeScript source folder and referred to their paths as shown in the README. Even though everything else seemed to be fine, I got an error saying Module.default() is not a function. Then I tried Module.default but that returned undefined, so I could get any further with that.

I have a class that manages the collides , but each time I am using it, I have to reallocate a new instance of ammojs because the scene is a new different one.

How can I proceed in my constructor ???

This example shows how to use Ammo.js with TypeScript in Debug and Release modes: hello-ammojs-webgl10-ts

You should install these modules globally:

• npm i typescript -g
• npm i browserify -g
• npm i uglify-js -g

Install all packages from package.json using the command: npm i

Comment/Uncomment Debug/Release in index.html and main.ts (see comments in these files).

Use these commands to build the example:

• npm run debug - to set breakpoint in code editors and to publish on PlayGround (like Plunker), for example: Hello Ammo.js. WebGL 1.0, TypeScript
• npm run release - to bundle in bundle.min.js for production

Note. See also: Usage of Planck.js with TypeScript (Planck.js is a port of Box2D Physics Engine)

package.json

{
  "name": "hello-ammojs-webgl10-ts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "debug": "tsc -p tsconfigs/tsconfig.debug.json",
    "compile": "tsc -p tsconfigs/tsconfig.release.json",
    "bundle": "browserify public/js/main.js -o public/js/bundle.js",
    "minify": "uglifyjs public/js/bundle.js -o public/js/bundle.min.js",
    "release": "npm run compile && npm run bundle && npm run minify"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ammo.js": "github:kripken/ammo.js",
    "requirejs": "^2.3.6"
  },
  "devDependencies": {
    "@types/requirejs": "^2.1.32",
    "ammojs-typed": "^1.0.6"
  }
}

public/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Ammo. WebGL 1.0, TypeScript</title>

    <!-- Debug -->
    <script data-main="js/RequireConfig"
        src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
    <!-- Release -->
    <!-- <script src="js/bundle.min.js"></script> -->
</head>

<body>
    <canvas id="renderCanvas" width="300" height="150"></canvas>

    <div id="output"></div>

    <a href="https://github.com/8Observer8/hello-ammojs-webgl10-ts">Source Code on GitHub</a>
</body>

</html>

src/client/main.ts

import { mat4 } from "gl-matrix";
import AmmoModule from "ammojs-typed";

let Ammo: typeof AmmoModule;
let gl: WebGLRenderingContext;
let output: HTMLDivElement;

function init()
{
    const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
    gl = canvas.getContext("webgl");
    gl.clearColor(0.2, 0.2, 0.2, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    output = document.getElementById("output") as HTMLDivElement;

    const vec = new Ammo.btVector3(1, 2, 3);
    output.innerHTML = `vec = (${vec.x()}, ${vec.y()}, ${vec.z()})<br>`;

    const matrix = mat4.create();
    output.innerHTML += `matrix = [${matrix}]`;
}

function main()
{
    AmmoModule().then((api) =>
    {
        Ammo = api;
        init();
    });
}

// Debug
main();

// Release
// window.onload = () => main();

src/client/RequireConfig.ts

requirejs.config({
    baseUrl: "js",
    paths: {
        "gl-matrix": "https://cdn.jsdelivr.net/npm/[email protected]/gl-matrix-min",
        "ammojs-typed": "https://dl.dropboxusercontent.com/s/e5iytx67noqoew7/ammo"
    }
});

requirejs(["main"], () => { });

tsconfigs/tsconfig.json

{
    "compilerOptions": {
        "target": "ES5",
        "outDir": "../public/js",
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true
    },
    "include": [
        "../src/client/**/*.ts"
    ]
}

tsconfigs/tsconfig.debug.json

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "module": "AMD",
        "sourceMap": true,
        "types": [
            "requirejs",
            "gl-matrix",
            "ammojs-typed"
        ],
        "moduleResolution": "node"
    }
}

tsconfigs/tsconfig.release.json

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "module": "CommonJS",
        "sourceMap": false,
        "types": [
            "node"
        ]
    },
    "exclude": [
        "../src/client/RequireConfig.ts"
    ]
}

Hello!
I'm trying to integrate your library to my pet project's setup but have issue
here is a gist with all the files I created for ammo integration:
https://gist.github.com/Sumechoo/4c6515d8825c2b7e0bb8e8c1619657fa

it looks like physics world created successfully and rigidbodies was created and added to the world
also world ticking properly but the data I getting from the getWorldTransform is always returning zeroes here:
https://gist.github.com/Sumechoo/4c6515d8825c2b7e0bb8e8c1619657fa#file-userigidbody-ts-L20

I expect the bodies to fall at least, as I set the gravity, but there are no movement at all.
Not sure if it's my fault or it's some strange bug here

There doesn't seem to be a LICENSE file for this repo. Would you mind adding one?

I started my project with parcel to save time, so it ran fine with that, but I've been totally unable to build with webpack5.

Everything else works, and then I get this error when I try to initialize Ammo as so:

import AmmoModule from "ammojs-typed";

...

AmmoModule().then((ammo) => {
      AmmoStart(ammo);
    });

I've tried different names for the es6 import, I have all the requested TSconfig changes, I've got the webpack fallbacks for fs and path- nothing fixes this issue.

Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'Ammo') at ammo.js:978:320 at LevelBoxes.onLoad (level-boxes.ts:265:19) (anonymous) @ ammo.js:978

Has anyone else run into this issue? I've been unable to find a way to resolve it and have to just switch back to parcel at this point.

Need to add (ln: 6):

function castObject(object:btCollisionObject, cls:typeof Class): btCollisionObject;

in ammo.d.ts

Hey,

I'm trying to create a simple physics scene following this: https://stackblitz.com/edit/ammojs-typed-falling-cubes?file=simulation.ts.
(And https://github.com/kripken/ammo.js/blob/master/examples/webgl_demo/worker.js#L6)
However since the last commit btDbvtBroadphase doesn't extend btBroadPhaseInterface anymore, but the constructor of btDiscreteDynamicsWorld still expects it. What do I need to do to create a simple btDiscreteDynamicsWorld?

Greets,
Jeroen.

Hi there!
I'm trying to use getUserPointer but it seems that it's returning a static function instead of the one I set using setUserPointer like this:

const btV:any = new Ammo.btVector3(0, 0, 0);
btV.myData = {
      tag: 'woof'
}
body.setUserPointer(btV);

I've searched quite a bit but I still can't figure out what I'm doing wrong

@kripken

It seems that handling bootstrap with await Ammo() instead of Ammo().then() cause browser to stop responding.

While this code works perfectly:

import Ammo from "ammojs-typed";

window.addEventListener(`load`, main);

async function main() {
  Ammo().then(ammo => {
    console.log(ammo);
  });
}

The similar approach with await hangs the browser:

import Ammo from "ammojs-typed";

window.addEventListener(`load`, main);

async function main() {
  const ammo = await Ammo();
  console.log(ammo);
}

I thought that Ammo.then implementation might be different from what is needed to make await works, so I've tried to wrap it into the additional Promise:

import Ammo from "ammojs-typed";

window.addEventListener(`load`, main);

async function bool() {
  return new Promise(resolve => {
    Ammo.then(ammo => resolve(ammo));
  });
}

async function main() {
  const ammo = await boot();
  console.log(ammo);
}

But it still freeze the window.

Any thoughts on this?

As far as I understand, Ammo.js adds some of its own usability functions on top of the idl bindings such as Ammo.wrapPointer and Ammo.addFunction. If you want to use these function with TypeScript you must add definitions to them manually to the ammo.d.ts file. I was able to use these functions successfully by adding these type definitions to the ammo.d.ts manually:

// ...
declare module Ammo { 
    function addFunction(func: Function, d: string): number // <-- add this
    function wrapPointer(object: any, d: any): any          // <-- add this
    // ...

Ideally, ammojs-typed would generate all of the usability functions of ammo.js automatically to the ammo.d.ts files. Could this be possible? I tried adding these functions to the idl file but there seems to be no way to add functions to the "global space", everything must be wrapped using the interface Something { ... }; syntax.