Ampandheaust
4784ad7e87
Remove vsync and dirty-flag frame gating, optimize PBR sampling and lighting, add a direct-to-canvas loadout, and preserve camera state on viewer resize. Add regression coverage and update rendering documentation. Amp-Thread-ID: https://ampcode.com/threads/T-01a0b382-1e79-712b-abd1-d29201c9bb5e Co-authored-by: Heaust Azure <heaust.azure@gmail.com>
2.4 KiB
Getting started
Yawn separates the data/render engine from optional scene conventions. Most applications begin with @yawn/handles; specialized engines can use @yawn/core directly.
1. Serve with isolation headers
SharedArrayBuffer requires Cross-Origin-Opener-Policy: same-origin and Cross-Origin-Embedder-Policy: require-corp. The included VitePress server already sends both.
<canvas id="view"></canvas>
<script type="module" src="/src/app.ts"></script>
2. Start a Scene
import { Scene } from "@yawn/handles";
const canvas = document.querySelector<HTMLCanvasElement>("#view")!;
canvas.width = 1280;
canvas.height = 720;
const scene = new Scene(canvas, { hdr: true, fps: 60 });
await scene.ready;
Omit fps for continuous, uncapped rendering. Scene initializes conventional SOA rows and loads one clustered-forward HDR render graph. The core itself still starts with only its eight-float signals row.
For a standalone viewer, new Scene(canvas, { hdr: true, directToCanvas: true }) can fuse tone mapping into opaque or alpha-masked PBR draws, avoiding the HDR texture and separate presentation pass. It automatically retains the HDR path for blended/transmissive materials, post-processing, custom shaders or compute, and basic geometry without normals/UVs. Leave this option off when consuming the default HDR graph in a graph editor.
PBR shaders reuse packed occlusion/roughness/metallic samples when texture and UV transforms match. Point, spot, and directional light handles select shader variants when the first light of a type is created or the last is disposed; intensity, transform, and radius changes remain shared-memory writes. Custom compute passes retain all light types because they can author light rows themselves.
3. Add a triangle
import { Mesh, PBRMaterial } from "@yawn/handles";
const blue = new PBRMaterial(scene, {
baseColor: [0.15, 0.55, 1, 1],
metallic: 0.15,
roughness: 0.4,
});
await blue.ready;
const triangle = new Mesh(scene, {
material: blue,
vertexData: {
positions: [-0.7, -0.6, 0, 0.7, -0.6, 0, 0, 0.72, 0],
indices: [0, 1, 2],
},
});
await triangle.ready;
Constructors use worker messages only to reserve slots or rebuild the graph. Once ready resolves, ordinary property writes mutate shared memory.