WebGPU

Core Idea

The two streams above draw the same twelve objects and end on the same picture — watch the traffic instead of the screens. WebGPU is WebGL’s successor, not its next version: WebGL is OpenGL ES transplanted into the browser, while WebGPU is an original design that speaks directly to whichever modern native API the machine runs — Vulkan, Direct3D 12, or Metal — under one web standard. What it exposes is the same GPU pipeline through a newer, lower-overhead door — plus one door WebGL never had at all: compute.

Two Conversations With the Same GPU

WebGL’s two structural costs are the ones its own article warns about, and the left stream pays both in plain sight: the global state machine (bind, then hope nothing rewired the board) and per-draw driver validation — the ▲ lines, one for every single draw, because the driver can never be sure what your last three calls changed. That re-checking is a large part of why draw calls are the classic CPU-bound wall. The right stream is the redesign:

• Pipelines are immutable objects. All state — shaders, blend mode, depth config, vertex layout — is baked into a pipeline once, validated at creation (✓), then swapped whole with a single setPipeline. No board to rewire, nothing to re-check per draw: a sealed cartridge instead of a patch bay.
• Bind groups attach resources (buffers, textures) as pre-declared, pre-validated sets rather than one global slot at a time.
• Command encoding records work into a buffer and submits it in one batch — the API is built for preparing frames cheaply, even from workers.

Then let the instrument roll into frame 2, because that’s where the argument lands: WebGL pays its full conversation again — every bind, every re-validation — while WebGPU’s entire creation column is simply gone, already paid at startup. Same stations on the assembly line; dramatically less ceremony walking a draw to the front of it. That’s the head-room that turns “hundreds of draws per frame” into “thousands.”

Compute: The Genuinely New Thing

WebGL can only reach the GPU through the rendering line — historically, “GPU computation” on the web meant encoding data into textures and abusing the fragment shader. WebGPU adds compute shaders: GPU programs with no vertices, no fragments, no pixels — just storage buffers, workgroups, and massive parallelism on demand.

That one addition changes what a browser tab is. Particle systems move their update loop onto the GPU and scale from thousands to millions; fluid and physics simulation run at interactive rates; and machine-learning inference runs on the visitor’s own GPU — model weights cached locally, the heavy matrix math in compute shaders, tokenization handled by WebAssembly in a worker so the UI thread never stalls. The browser stops being only a rendering window and becomes a computation engine.

WGSL, Briefly

WebGPU speaks WGSL, not GLSL — a stricter, Rust-flavored syntax. Set the same fragment side by side and the accent is obvious but the language underneath is not new:

// GLSL — the fragment stage
uniform float u_time;
varying vec2 vUv;
void main() {
  vec3 a = vec3(0.35, 0.63, 0.69), b = vec3(0.95, 0.76, 0.36);
  gl_FragColor = vec4(mix(a, b, vUv.x + 0.2 * sin(u_time)), 1.0);
}

// WGSL — the same stage
@fragment
fn fs(@location(0) uv: vec2f) -> @location(0) vec4f {
  let a = vec3f(0.35, 0.63, 0.69); let b = vec3f(0.95, 0.76, 0.36);
  return vec4f(mix(a, b, uv.x + 0.2 * sin(u.time)), 1.0);
}

Explicit stage attributes, explicit locations, let and typed literals — but vectors, swizzling, mix, dot, normalize, and the slots-plus-uniforms model transfer concept-for-concept from everything the GLSL article teaches. Higher-level layers (like Three.js’s node-based shader system) generate GLSL or WGSL from one description.

Adoption Reality

Support in current browsers is maturing but not yet the universal floor WebGL enjoys — production work still feature-detects (if (navigator.gpu)) and keeps a WebGL fallback, which renderers like Three.js’s WebGPU backend handle automatically. The honest rule: reach for WebGPU when you need what only it has (compute, huge draw counts, ML in the tab); for a portfolio scene or product viewer, WebGL remains the answer that works everywhere today.

Connections

WebGPU is the newest door onto the GPU pipeline, replacing WebGL’s inherited OpenGL shape with pipelines-as-objects, and relieving the draw-call pressure the CPU-bound frame diagnoses. Its shaders are WGSL cousins of GLSL, its data still lives in buffers, and its compute pass is the natural home for particle updates and the broader compute-shader story — with WebAssembly as its CPU-side partner when the browser turns into a compute platform.