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

8Observer8 · January 29, 2021

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

Note. See alse: 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>
    <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/[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"
   ]
}

Edited January 30, 2021 by 8Observer8

Sign In

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

Recommended Posts

8Observer8

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity