My First Triangle

Charm can be used through the core classes Camera, Scene, Node, WebGPURenderer and Material to directly construct and manipulate geometry and shading. In this particular example we construct a single triangle through the Mesh class and render it with the WebGPURenderer

import {
  Camera,
  Scene,
  Node,
  WebGPURenderer,
  Material,
  getDevice,
} 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 device = await getDevice();
  const camera = new Camera();
  const renderer = new WebGPURenderer(device, 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);
  renderer.render(scene, camera);
}