WebGPU
Playground

Learn WebGPU

The Pipeline

WebGPU renders by building a pipeline — a fixed description of how data flows from your buffers through shaders to the screen.

Vertex Stage — runs per-vertex, positions geometry
Rasterization — converts triangles to fragments (pixels)
Fragment Stage — runs per-pixel, outputs color

Compute pipelines skip all of this — they just run a shader on arbitrary data.

Shaders (WGSL)

WebGPU uses WGSL (WebGPU Shading Language) — a Rust-like language that runs on the GPU.

@vertex fn — runs once per vertex
@fragment fn — runs once per pixel
@compute fn — runs in parallel workgroups
vec2f, vec3f, vec4f — vector types
mat4x4f — matrix type

Click </> Shaders above the canvas to view each experiment's WGSL source.

Buffers & Bind Groups

GPU memory is managed through buffers:

Vertex Buffer — per-vertex data (positions, colors)
Uniform Buffer — small, read-only data (time, resolution, matrices)
Storage Buffer — large read/write data (particle arrays, grids)

Buffers are connected to shader bindings via bind groups — the @group(0) @binding(0) annotations in WGSL.

Compute Shaders

Compute shaders run massively parallel — thousands of invocations at once.

@workgroup_size(64) — threads per workgroup (1D)
@workgroup_size(8,8) — 64 threads in a 2D grid
dispatchWorkgroups(n) — launch n workgroups

The Particle System, Game of Life, Fluid Sim, and Reaction-Diffusion experiments all use compute shaders.

Ping-Pong Buffers

Many simulations read from one buffer and write to another, then swap. This avoids reading data you just wrote in the same frame.

On even frames: read A, write B.
On odd frames: read B, write A.

Used in Particle System, Game of Life, Fluid Sim, and Reaction-Diffusion.

Raymarching & SDFs

Raymarching renders 3D scenes without any geometry — just a fragment shader.

For each pixel, march a ray forward. At each step, a signed distance function (SDF) tells you how far you are from the nearest surface.

sdSphere(p, r) — distance to a sphere
sdBox(p, b) — distance to a box
smin(a, b, k) — smooth blend between shapes

Textures & Tile Maps

WebGPU can sample image data via textures and samplers:

texture_2d<f32> — a 2D texture resource
sampler — controls filtering (linear, nearest) and addressing
textureSample(tex, samp, uv) — sample a color at UV coordinates

A texture atlas packs many images into one texture. Each tile maps to a UV sub-region. Combined with LOD (level of detail), this enables efficient rendering of large zoomable maps.

The Tile Map experiment demonstrates atlas generation, viewport culling, and LOD switching.

Key Patterns

Fullscreen triangle — draw a single oversized triangle using vertex_index, no vertex buffer needed
Instanced drawing — render thousands of objects with one draw call using instance_index
Time uniform — pass performance.now() to animate shaders
Uniform alignment — WebGPU requires 16-byte alignment for uniform struct members

Specs & Resources

WebGPU Spec (W3C) WGSL Spec (W3C) WebGPU Fundamentals Tour of WGSL Chrome WebGPU Guide MDN WebGPU API