kripken/ammo.js

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

8Observer8 opened this issue · 1 comments

8Observer8 commented

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/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"
    ]
}
giniedp commented

@8Observer8 you have posted the exact same content at #354
please use issue boards for actual issues.