WebGPU Primer
Ship GPU compute and rendering directly from the browser with the modern graphics API that replaces WebGL.
Why WebGPU
WebGPU exposes a low-level, multi-threaded pipeline to the GPU. Unlike WebGL, it maps directly to Vulkan, Metal, and DX12 backends. You get compute shaders, explicit buffer management, and render bundles — all without a plugin.
Adapter & Device
Request an adapter with navigator.gpu.requestAdapter(), then call adapter.requestDevice(). The device is your command queue — every buffer, texture, and shader module flows through it.
Pipeline Setup
A compute pipeline needs a shader module (WGSL) and a bind group layout. A render pipeline adds vertex buffers, primitive topology, and color targets. Pipelines are immutable — create once, reuse.
Buffers & Bind Groups
Create GPUBuffer with usage flags (STORAGE, UNIFORM, MAP_READ). Bind groups wire buffers and textures to shader entry points. Use mapAsync to read results back to JavaScript.
Command Encoding
Open a command encoder, begin a compute or render pass, dispatch workgroups or draw calls, end the pass, and submit to the device queue. All GPU work is recorded explicitly — no implicit state.
Browser support: Chrome 113+, Edge 113+, Firefox Nightly, Safari Technology Preview. Always check navigator.gpu before initializing.