8Observer8/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Load Ammo.js and a texture using Promise. Rollup, WebGL, JavaScript</title>
</head>

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

    <script type="importmap">
        {
            "imports": {
                "gl-matrix": "https://cdn.skypack.dev/gl-matrix@3.4.3",
                "ammo-es": "https://dl.dropboxusercontent.com/s/1os9vvoo1pa3ajk/ammo-es.js"
            }
        }
    </script>

    <script type="module" src="./js/main.js"></script>
</body>

</html>

## init-ammo.js
import AmmoLib from "ammo-es";

export let Ammo = null;
export let world = null;

export function initAmmo() {
    return new Promise(resolve => {
        AmmoLib().then((re) => {
            Ammo = re;

            const collisionConfiguration = new Ammo.btDefaultCollisionConfiguration();
            const dispatcher = new Ammo.btCollisionDispatcher(collisionConfiguration);
            const overlappingPairCache = new Ammo.btDbvtBroadphase();
            const solver = new Ammo.btSequentialImpulseConstraintSolver();

            world = new Ammo.btDiscreteDynamicsWorld(dispatcher, overlappingPairCache,
                solver, collisionConfiguration);
            world.setGravity(new Ammo.btVector3(0, -10, 0));

            resolve();
        });
    });
}

## load-texture.js
import { gl } from "./webgl-context.js";

export default function loadTexture(url) {
    return new Promise(resolve => {
        const image = new Image();
        image.onload = () => {
            const texture = gl.createTexture();
            gl.bindTexture(gl.TEXTURE_2D, texture);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);
            resolve(texture);
        };
        image.src = url;
    });
}

## main.js
import { vec3, mat4 } from "gl-matrix";
import { gl, initWebGLContext } from "./webgl-context.js";
import { Ammo, world, initAmmo } from "./init-ammo.js";
import loadTexture from "./load-texture.js";

async function init() {
    // Initialize the WebGL context
    if (!initWebGLContext("renderCanvas")) return;
    gl.clearColor(0.2, 0.2, 0.4, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    // Init Ammo.js and print a gravity
    await initAmmo();
    const gravity = world.getGravity();
    console.log(gravity.x(), gravity.y(), gravity.z());

    // Load a texture
    const texture = await loadTexture("./assets/floor.png");
    console.log(texture);

    // Create a vector and a matrix
    const v = vec3.fromValues(1, 2, 3);
    console.log("v =", v);
    const m = mat4.create();
    console.log("m =", m);
}

init();

## webgl-context.js
export let gl = null;

export function initWebGLContext(canvasName) {
    const canvas = document.getElementById(canvasName);
    if (canvas === null) {
        console.log(`Failed to get a canvas element with the name "${canvasName}"`);
        return false;
    }
    gl = canvas.getContext("webgl", { alpha: false, premultipliedAlpha: false });
    return true;
}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Load Ammo.js and a texture using Promise. Rollup, WebGL, JavaScript</title>
	</head>

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

	<script type="importmap">
	{
	"imports": {
	"gl-matrix": "https://cdn.skypack.dev/gl-matrix@3.4.3",
	"ammo-es": "https://dl.dropboxusercontent.com/s/1os9vvoo1pa3ajk/ammo-es.js"
	}
	}
	</script>

	<script type="module" src="./js/main.js"></script>
	</body>

	</html>
	import AmmoLib from "ammo-es";

	export let Ammo = null;
	export let world = null;

	export function initAmmo() {
	return new Promise(resolve => {
	AmmoLib().then((re) => {
	Ammo = re;

	const collisionConfiguration = new Ammo.btDefaultCollisionConfiguration();
	const dispatcher = new Ammo.btCollisionDispatcher(collisionConfiguration);
	const overlappingPairCache = new Ammo.btDbvtBroadphase();
	const solver = new Ammo.btSequentialImpulseConstraintSolver();

	world = new Ammo.btDiscreteDynamicsWorld(dispatcher, overlappingPairCache,
	solver, collisionConfiguration);
	world.setGravity(new Ammo.btVector3(0, -10, 0));

	resolve();
	});
	});
	}
	import { gl } from "./webgl-context.js";

	export default function loadTexture(url) {
	return new Promise(resolve => {
	const image = new Image();
	image.onload = () => {
	const texture = gl.createTexture();
	gl.bindTexture(gl.TEXTURE_2D, texture);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);
	resolve(texture);
	};
	image.src = url;
	});
	}
	import { vec3, mat4 } from "gl-matrix";
	import { gl, initWebGLContext } from "./webgl-context.js";
	import { Ammo, world, initAmmo } from "./init-ammo.js";
	import loadTexture from "./load-texture.js";

	async function init() {
	// Initialize the WebGL context
	if (!initWebGLContext("renderCanvas")) return;
	gl.clearColor(0.2, 0.2, 0.4, 1);
	gl.clear(gl.COLOR_BUFFER_BIT);

	// Init Ammo.js and print a gravity
	await initAmmo();
	const gravity = world.getGravity();
	console.log(gravity.x(), gravity.y(), gravity.z());

	// Load a texture
	const texture = await loadTexture("./assets/floor.png");
	console.log(texture);

	// Create a vector and a matrix
	const v = vec3.fromValues(1, 2, 3);
	console.log("v =", v);
	const m = mat4.create();
	console.log("m =", m);
	}

	init();