# Yawn — a WebGPU engine that grows with you
Yawn is a WebGPU engine that starts with friendly scene handles and scales down to a programmable Rust/WASM render core.

WebGPU without the ceremony

# Start with a scene.
Scale into an engine.

Yawn gives you approachable TypeScript handles on day one, direct shared-memory performance when you need it, and a programmable render core when your ideas outgrow conventions.

Open the playground → Read the 5-minute setup
One CDN import · No framework required · Rust/WASM core
app.ts 60 FPS

    import { Scene, Mesh, PBRMaterial }
      from "@yawn/handles";

    const scene = new Scene(canvas);
    await scene.ready;

    const blue = new PBRMaterial(scene, {
      baseColor: [0.12, 0.58, 1, 1],
      roughness: 0.35,
    });

    const triangle = new Mesh(scene, {
      material: blue,
      vertexData: { positions, indices },
    });

rendering on WebGPU
One shared arena
Zero messages for hot state
Any render graph you can describe
Small Rust/WASM foundation
Progressive by design

## Use exactly as much engine as you need.

You do not have to choose between an easy API and a serious foundation. Yawn keeps those layers separate, so learning more never means starting over.

01

### Build with handles

Start with familiar scenes, meshes, materials, lights, cameras, glTF imports, and post effects. Constructors are explicit and every async boundary is visible.

Make your first scene →
02

### Move through shared data

Positions, cameras, lights, materials, and your own application rows live in one SharedArrayBuffer. Hot updates become direct typed-array writes.

Understand the fast path →
03

### Author the whole graph

Use core directly when you need custom resources, WGSL pipelines, compute, pass dependencies, transient aliasing, and up-front GPU loadouts.

Go beneath handles →
A quiet hot path

## Your frame should move data, not negotiate it.

Yawn pays setup costs when your scene or graph changes. During play, ordinary updates stay in shared rows that JavaScript and the render worker can both see.

- ✓ Structure-of-arrays layout with aligned rows
- ✓ Render graphs compiled before they become active
- ✓ Optional timestamp profiling for physical GPU passes

See how the pieces connect →
Your application
handlesworkersgame logic
SharedArrayBuffer aligned SOA arena
Rust / WASM Render graph core
WebGPU
From blank page to pixels

## A small API with visible boundaries.

1. 1

   ### Create a scene

   Give Yawn a canvas and await one clear readiness promise.

   `new Scene(canvas)`
2. 2

   ### Add what you can see

   Materials and meshes own typed handles, not hidden global state.

   `new Mesh(scene, options)`
3. 3

   ### Change values directly

   After setup, ordinary property updates write into shared rows.

   `mesh.position.x += 0.1`

The best way to understand it

## Change the code. Watch the passes.

The playground includes TypeScript intelligence, reusable snippets, live output, shareable SQLite-backed revisions, and the engine’s real GPU profiler.

Launch playground ↗