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>
62 lines
2.4 KiB
Markdown
62 lines
2.4 KiB
Markdown
# 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.
|
|
|
|
```html
|
|
<canvas id="view"></canvas>
|
|
<script type="module" src="/src/app.ts"></script>
|
|
```
|
|
|
|
## 2. Start a Scene
|
|
|
|
```ts
|
|
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
|
|
|
|
```ts
|
|
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.
|
|
|
|
<Playground />
|
|
|
|
<script setup>
|
|
import Playground from "../.vitepress/Playground.vue";
|
|
</script>
|