WebGPU

Build the smallest observable GPU result first, then scale it. Treat every WebGPU feature as five explicit contracts:

1. Capability contract: baseline, optional features and limits, fallback.
2. Data contract: WGSL types, byte offsets, strides, usage flags.
3. Pass contract: reads, writes, ordering, ping-pong ownership.
4. Presentation contract: canvas format, physical size, alpha and color.
5. Lifecycle contract: creation, resize, errors, loss and destruction.

Copy the full Vite starter for a new browser project. It contains a typed compute-and-render particle field with ping-pong buffers, compilation diagnostics, resize handling, pointer interaction, device-loss reporting, and cleanup.

Work from a resource and pass graph

Before writing WGSL, list persistent resources and pass ownership: