The address spaces backed by your buffers are declared at module scope with @group and @binding (@group and @binding):
var<uniform>: read-only, fixed-size data every invocation reads alike, such as a camera or material; a UNIFORM buffer, by default at most 64 KiB per binding and 12 bindings per stage.
var<storage>: large data in a STORAGE buffer, by default up to 128 MiB per binding and 8 bindings per stage, writable if declared so (Storage Access Modes), and the only home of runtime-sized arrays. Declaring var<uniform> prices: array<f32> failed with "variables in 'uniform' address space must have a fixed footprint".
Uniforms once had a stricter layout, padding array elements and nested structs to 16 bytes, which is why older code turns array<f32, 6> into array<vec4f, 6>. Chrome 154 1 reports the uniform_buffer_standard_layout extension, which applies the storage rules of Arrays and Alignment to uniforms, and a uniform struct Shelf { prices: array<f32, 6>, count: u32 } compiled here without error; keep the padding if you target browsers without it. Use uniforms for small per-draw data and storage for anything large, variable or written.
<!doctype html>
<style>
body { margin: 0; background: #f7f4ee; font: 14px system-ui, sans-serif; }
.stage { position: relative; width: 100%; max-width: 600px; }
.stage canvas { display: block; width: 100%; }
.stage canvas + canvas { position: absolute; inset: 0; pointer-events: none; }
</style>
<div class="stage">
<canvas id="view" width="600" height="340"></canvas>
<canvas id="labels" width="600" height="340"></canvas>
</div>
<script>
const canvas = document.getElementById('view');
const ink = document.getElementById('labels').getContext('2d');
function showMessage(text) { // 2D fallback when WebGPU is missing
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#fbeaea'; ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#8a2b2b'; ctx.font = '18px system-ui, sans-serif'; ctx.textAlign = 'center';
ctx.fillText(text, canvas.width / 2, canvas.height / 2);
}
const titles = ['Quiet Harbor', 'Small Steps', 'Salt and Saffron', "Clockmaker's", 'Night Trains', 'Paper Gardens'];
const prices = [14.99, 39.50, 24.00, 18.75, 16.20, 21.30];
const code = /* wgsl */ `
@group(0) @binding(0) var<uniform> discount: f32; // small, fixed-size, read by all
@group(0) @binding(1) var<storage> prices: array<f32>; // large, runtime-sized
struct Out { @builtin(position) pos: vec4f, @location(0) color: vec3f }
@vertex fn vs(@builtin(vertex_index) v: u32, @builtin(instance_index) i: u32) -> Out {
let book = i / 2;
let sale = i % 2 == 1; // two bars per book
let price = prices[book] * select(1.0, 1.0 - discount, sale);
let q = vec2f(f32(v & 1), f32(v >> 1));
let x = -0.92 + f32(book) * (1.84 / f32(arrayLength(&prices))) + select(0.0, 0.1, sale);
let p = vec2f(x + q.x * 0.09, -0.62 + q.y * price / 42 * 1.35);
return Out(vec4f(p, 0, 1), select(vec3f(0.72, 0.70, 0.66), vec3f(0.08, 0.40, 0.75), sale));
}
@fragment fn fs(in: Out) -> @location(0) vec4f { return vec4f(in.color, 1); }`;
async function main() {
const adapter = await navigator.gpu?.requestAdapter();
if (!adapter) return showMessage('WebGPU is not available in this browser');
const device = await adapter.requestDevice();
const context = canvas.getContext('webgpu');
const format = navigator.gpu.getPreferredCanvasFormat();
context.configure({ device, format });
// What the compiler says about a runtime-sized array in the uniform address space:
// (An error scope keeps the expected failure out of the console.)
device.pushErrorScope('validation');
const bad = device.createShaderModule({ code: '@group(0) @binding(0) var<uniform> prices: array<f32>;' });
const complaint = (await bad.getCompilationInfo()).messages.find((m) => m.type === 'error');
await device.popErrorScope();
const B = GPUBufferUsage;
const uniform = device.createBuffer({ size: 4, usage: B.UNIFORM | B.COPY_DST });
const storage = device.createBuffer({ size: prices.length * 4, usage: B.STORAGE | B.COPY_DST });
device.queue.writeBuffer(storage, 0, new Float32Array(prices));
const module = device.createShaderModule({ code });
const pipeline = device.createRenderPipeline({ layout: 'auto', primitive: { topology: 'triangle-strip' },
vertex: { module }, fragment: { module, targets: [{ format }] } });
const group = device.createBindGroup({ layout: pipeline.getBindGroupLayout(0), entries: [
{ binding: 0, resource: { buffer: uniform } }, { binding: 1, resource: { buffer: storage } }] });
function frame(now) {
const discount = 0.25 + 0.2 * Math.sin(now / 900); // one 4-byte write per frame
device.queue.writeBuffer(uniform, 0, new Float32Array([discount]));
const encoder = device.createCommandEncoder();
const pass = encoder.beginRenderPass({ colorAttachments: [{ view: context.getCurrentTexture().createView(),
clearValue: [0.97, 0.96, 0.93, 1], loadOp: 'clear', storeOp: 'store' }] });
pass.setPipeline(pipeline);
pass.setBindGroup(0, group);
pass.draw(4, prices.length * 2);
pass.end();
device.queue.submit([encoder.finish()]);
ink.clearRect(0, 0, 600, 340);
ink.font = 'bold 13px system-ui, sans-serif'; ink.fillStyle = '#222';
ink.fillText(`var<uniform> discount = ${(discount * 100).toFixed(0)}% grey: list price, blue: sale price`, 14, 22);
ink.font = '11px system-ui, sans-serif'; ink.textAlign = 'center';
titles.forEach((t, i) => ink.fillText(t, 52 + i * 92, 290));
ink.textAlign = 'left'; ink.fillStyle = '#8a2b2b'; ink.font = '11.5px ui-monospace, monospace';
ink.fillText('var<uniform> prices: array<f32> ->', 14, 314);
ink.fillText(complaint ? complaint.message.slice(0, 76) : 'compiled (this browser relaxes the rule)', 14, 330);
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
}
main();
</script>