Appearance
My First Triangle - lowlevel engine
This example is similar to my first triangle but uses the lowlevel webassembly rendering engine.
js
import {
Camera,
Scene,
Node,
LowlevelEngine,
Material,
} from "@tmrw-realityos/charm";
export async function ready() {
// get the html canvas, create a camera and start the render
const canvas = document.querySelector("canvas");
if (canvas == null) {
return;
}
const camera = new Camera();
const renderer = new LowlevelEngine();
await renderer.init(canvas);
// create a single triangle mesh
const mesh = renderer.newMesh();
mesh.positions = [-0.2, 0.2, 0, -0.2, -0.2, 0, 0.2, -0.2, 0];
mesh.mustUpdate = true;
// create a node for our mesh together with a simple unlit material
const node = new Node();
node.mesh = mesh;
node.material = new Material();
node.material.model = "unlit";
// create a scene for our single node and begin render it
const scene = new Scene();
scene.root.addChild(node);
// Rendering is async, needs to be called in a loop
const loop = () => {
renderer.render(scene, camera);
requestAnimationFrame(loop);
};
loop();
}