Examples

A gallery of small, self-contained programs that exercise the whole beam-gpu surface — from a first triangle to PBR materials, shadow maps, and a GPU cellular automaton. Each one is a few dozen lines of TypeScript plus a hand-authored .wgsl module, so you can read any of them top to bottom in a sitting.

Run them locally

These examples live in the examples workspace. From the repo root, run pnpm dev to start the examples app, then open the linked path in your browser. Each link below points at the example's folder (/play/pages/<category>/<name>/).

Requires WebGPU

Every example renders with native WebGPU. You need a WebGPU-capable browser (recent Chrome, Edge, or Safari) with hardware acceleration enabled. If the canvas stays blank, check that navigator.gpu is available.

Basic graphics

Start here. These cover the core loop: build a pipeline from WGSL + schemas, make resources, and draw.

• Hello world — the gold-standardstarting point. A single triangle from one pipeline, one verts resource, and one frame. Read this first.
• Image box — a textured cube undera perspective camera, introducing texture, sampler, and a mat4 uniform.
• Basic ball — a normal-shadedsphere, showing indexed geometry and a camera matrix.
• Zooming ball — animates thesame ball with beam.loop, updating uniforms every frame.
• Multi-balls — many balls in oneframe, with one uniforms resource per object (DESIGN §3.3).
• Multi-graphics — boxes andballs drawn together, mixing geometries in a single frame.
• Wireframe — overlays a wireframepass on a shaded mesh using two pipelines.

Image processing

Full-screen-quad pipelines: every fragment is a pixel, and the fun is in the shader. A shared unit quad feeds them all.

• Basic image — fill the canvaswith a texture on a flat quad, no projection. The simplest texture sample.
• Single filter — one filterwith live slider controls writing a named uniform before each redraw.
• Multi-filters — threesingle-pass filters sharing one vertex schema, each with its own pipeline.
• Mix images — blend twotextures in one shader, reusing a single sampler for both.
• Load SVG — rasterize an SVG viaa blob loader and upload it as a texture.
• Premultiply alpha —composite the canvas over the page background with a premultiplied-alpha context and matching shader output.
• Texture config — exploresampler and texture options (wrap, filter, flipY), rebuilding the immutable sampler on each change.

3D models

Lit geometry, normal matrices, and physically based shading.

• Basic lighting — directionallighting with interactive controls for model rotation and light direction/color/strength.
• Material ball — a PBR sphere usingenvironment maps and a BRDF LUT, with the uniform struct laid out to std140.
• Material balls — a grid of PBRballs sweeping roughness and metalness, one uniforms resource per ball.

Offscreen

Render-to-texture targets: draw into an offscreen Target, then sample its color or depth in a second pass.

• Basic mesh — render a lit mesh into acolor + depth target, then blit that color onto a full-screen quad.
• Basic shadow — a two-pass shadowmap: render depth from the light's view, then shade from the camera with a comparison sampler.
• Visualize depth — fill anoffscreen depth buffer, then sample target.depth into a grayscale view.

Effects

Multi-pass and ping-pong techniques.

• Conway — Conway's Game of Life on the GPU,ping-ponging state between two targets with a step pipeline and a display pipeline.
• Image explode — a grid of texturedquads that explode outward and reassemble, animated by a progress uniform.

Design patterns

Higher-level structure built on the terse core.

• Build renderer — wrapbeam-gpu in a small MeshRenderer / Mesh abstraction that owns the device, pipelines, and scene, keeping the app code tiny.