Skip to content

CONCEPT Cited by 1 source

Uniform buffer

A uniform buffer is a chunk of GPU-visible memory that holds shader input parameters (uniforms — values constant across all invocations of a shader dispatch, like a color, a transform matrix, or a scale factor). The application writes a packed struct into the buffer and binds the buffer to the shader; the shader reads named fields from offsets into the buffer.

Why it matters

The uniform upload model differs sharply between legacy and modern GPU APIs:

  • WebGL — uniforms can be set individually, one at a time:
gl.uniform1f(locationAlpha, 1.0);
gl.uniformMatrix3fv(locationTransform, false, transformValue);

Cheap; no buffer management required.

  • WebGPUall uniforms must go through a uniform buffer. Setting an individual uniform requires:
const uniformBuffer = device.createBuffer({ size, usage: UNIFORM | COPY_DST });
device.queue.writeBuffer(uniformBuffer, 0, uniformValues);

Allocating GPU memory and uploading is expensive. Doing it per draw call — one buffer per draw — regresses performance badly compared to WebGL.

The batching requirement

For WebGPU to match or beat WebGL perf, applications must batch uniform uploads: collect all per-draw uniforms for a frame, pack them into one buffer, do one upload, then issue draws that reference the shared buffer with per-draw byte offsets. See patterns/uniform-buffer-batching for the full encode/submit API shape.

Why WebGPU did this

Uniform buffers are how modern native APIs (Vulkan, Metal, D3D12) pass shader input. The web needed to match the underlying hardware model to expose compute shaders and other modern features. Per-uniform setter functions in WebGL hide a lot of driver-side buffer management; WebGPU makes that explicit.

Seen in

  • sources/2026-04-21-figma-rendering-powered-by-webgpu — canonical production documentation of the WebGL → WebGPU uniform-upload shift. Figma explicitly notes naive per-setUniform mapping "would regress performance, because allocating GPU memory and uploading data to a buffer are both expensive operations", and redesigned their graphics interface around an encode/submit split to amortize the upload.
Last updated · 200 distilled / 1,178 read