Usage of Ammo.js with TypeScript (Ammo.js is a port of Bullet Physics Engine)

posted in My Instructions for beginners

Published January 29, 2021

Bullet WebGL typescript Ammo.js

My 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

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>
    <br>
    <a href="https://plnkr.co/edit/6KQT9VQHWvswY3cc?preview">Playground</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/gl-matrix@3.3.0/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"
   ]
}

Previous Entry Set Up Ammo.js with Browserify (Ammo.js is a port of Bullet Physics Engine to JS)

Next Entry Usage of Planck.js with TypeScript (Planck.js is a port of Box2D Physics Engine)

0 likes 0 comments