Skip to content

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();
}