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

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 },
});

Oneshared arena

Zeromessages for hot state

Anyrender graph you can describe

SmallRust/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.

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 →

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 →

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

SharedArrayBufferaligned SOA arena

Rust / WASMRender graph core

WebGPU

From blank page to pixels

A small API with visible boundaries.

1
Create a scene
Give Yawn a canvas and await one clear readiness promise.
new Scene(canvas)
2
Add what you can see
Materials and meshes own typed handles, not hidden global state.
new Mesh(scene, options)
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 ↗

Start with a scene.Scale into an engine.