WebGPU Pipeline Layout and Storage Buffer Alignment Constraints

Answer

Use the adapter’s minStorageBufferOffsetAlignment limit to obtain the required alignment (currently 256 bytes on all implementations) and round both the buffer offset and size up to a multiple of that value before creating the GPUBufferBinding for a bind‑group entry.

Confirmed facts from the WebGPU spec and current implementations

1. The specification defines GPUSupportedLimits.minStorageBufferOffsetAlignment (analogous to the uniform‑buffer limit).
2. All shipped WebGPU back‑ends (Vulkan, Metal, D3D12) return 256 bytes for this limit.
3. If an offset or size is not a multiple of the returned alignment, the GPU generates a validation error at pipeline creation or command submission.
4. The alignment query is performed once per GPUAdapter via adapter.limits.minStorageBufferOffsetAlignment.

Likely explanation for portable layout calculation

1. Read the alignment value: const align = adapter.limits.minStorageBufferOffsetAlignment;
2. For each storage buffer you intend to bind, compute the aligned offset:
3. const alignedOffset = Math.ceil(desiredOffset / align) * align;
4. Compute the aligned size in the same way (or round the buffer’s byte length):
5. const alignedSize = Math.ceil(desiredSize / align) * align;
6. Create the buffer with at least alignedSize bytes, then bind it using { buffer, offset: alignedOffset, size: alignedSize }.
7. Include the binding in the bind‑group layout as { type: "storage-buffer" } and use setBindGroup before dispatching compute work.

If the returned alignment differs from 256 bytes (for example, a future hardware feature level), the same calculation will automatically produce a compatible offset, so no code change is required. To confirm the exact alignment for your hardware, please share the value returned by adapter.limits.minStorageBufferOffsetAlignment.