yawn/docs/recipes/runtime.md

Runtime interaction recipes

Once render data exists, keep hot updates on shared rows and leave core free of application policy.

12 — Animate directly through the SAB

The instance facade performs the live-generation check and writes instance.transform.

function frame(time) {
  instance.setTransform(rotationY(time * 0.001));
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);

13 — Pick through the optional BVH worker

const result = await meshHandles.pickRay(origin, direction, {
  maxDistance: 10_000,
  maxHits: 1,
});
const nearest = result.hits[0]?.instance;

The picking addon consumes versioned shared snapshots. Core does not know about rays or BVHs.

14 — Connect worker to worker

MessagePort implements the Worker-like methods the core client needs. Start it through the normal YawnCore constructor.

import { YawnCore } from "@yawn/core";

const core = new YawnCore({
  worker: port,
  memory,
  ringPtr,
  free: () => port.close(),
});
await core.ready;

This is why “main thread” is not an architectural role in Yawn: any browser worker can own the client.

15 — Compose a complete scene

Use one core instance for every addon and activate the graph only after its complete loadout has compiled.

const importer = new GltfImporter(core);
const imported = await importer.load(gltfUrl);
const meshes = new MeshHandles(core).fromImportedScene(imported);
const compiled = await loadGraph(core, completeGraph);
await core.switchCompiledGraph(compiled.compiledId);

16 — Treat camera input as render data

There is no camera API in core. Read and write the canonical 16-lane row directly from controls or simulation code.

const camera = core.array("camera.state");
const state = camera.read(0);
state.splice(0, 3, ...nextEye);
camera.write(0, state);

The row packs eye, target, up, field of view, aspect, near, and far values into 64 bytes.

17 — Use conventional camera and material properties

Choose addon handles when a property-oriented workflow is more useful than raw SOA rows.

const camera = new CameraHandle(core);
const materials = new MaterialHandles(core).fromImportedScene(imported);

camera.lookAt([4, 3, 6], [0, 0, 0]);
materials[0].baseColor = [0.2, 0.55, 1, 1];
materials[0].roughness = 0.35;