Meshpicker

import {
  Camera,
  Scene,
  Node,
  WebGPURenderer,
  WebGPUMeshPicker,
  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) {
    throw new Error("Canvas not found");
  }

  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 scene
  const scene = new Scene();

  // create two nodes
  for (let i = 0; i < 2; i++) {
    const node = new Node();
    node.name = `node-${i}`;
    node.mesh = mesh;
    node.material = new Material();
    node.material.model = "unlit";
    node.material.color = [1 - i, i, 0];
    node.transform.setPosition([-0.2 + 0.4 * i, 0.0, 0]);
    scene.root.addChild(node);
  }

  // Create a meshpicker
  const picker = new WebGPUMeshPicker(renderer);
  picker.setObjectPickedCallback((obj) => {
    renderer.render(scene, camera);
    console.log("picked", obj.origin.name);
  });
  picker.setSelectionClearedCallback(() => {
    renderer.render(scene, camera);
    console.log("clear");
  });

  renderer.onRenderInFinalBuffer = (outputTexture, depthTexture, encoder) => {
    picker.renderOutlineOverlay(outputTexture, encoder);
  };

  renderer.render(scene, camera);
}