A storage variable's access mode is read (the default) or read_write, matching 'read-only-storage' or 'storage' in the bind group layout (Buffers and Bind Groups). The compiler enforces it, and uniforms are never writable:
// out: 0 x u32
@group(0) @binding(0) var<storage, read_write> out: array<f32>;
@group(0) @binding(1) var<storage, read> prices: array<f32>;
@group(0) @binding(2) var<uniform> discount: f32;
@compute @workgroup_size(1) fn main() {
prices[0] = 12.74;
discount = 0.15;
}Output
6:13 error: cannot store into a read-only type 'ref<storage, f32, read>'
Only the first error is reported, not line 7's. Vertex shaders may not use read_write storage at all: incrementing a counter in a @vertex function failed with "var with 'storage' address space and 'read_write' access mode cannot be used by vertex pipeline stage". Declare read wherever you can.
<!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="360"></canvas>
<canvas id="labels" width="600" height="360"></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);
}
function label(text, x, y, size = 12, color = '#2b2b2b', font = 'system-ui, sans-serif', weight = '') {
ink.font = `${weight} ${size}px ${font}`; ink.fillStyle = color; ink.fillText(text, x, y);
}
const bindings = `
@group(0) @binding(0) var<storage, read_write> out: array<f32>;
@group(0) @binding(1) var<storage, read> prices: array<f32>;
@group(0) @binding(2) var<uniform> discount: f32;`;
const broken = bindings + `
@compute @workgroup_size(1) fn main() {
prices[0] = 12.74;
discount = 0.15;
}`;
const fixed = bindings + `
@compute @workgroup_size(6) fn main(@builtin(local_invocation_index) i: u32) {
out[i] = prices[i] * (1 - discount); // write only through the read_write binding
}`;
// The vertex stage may not even declare read_write storage:
const vertexWriter = `
@group(0) @binding(0) var<storage, read_write> counter: u32;
@vertex fn vs() -> @builtin(position) vec4f { counter += 1; return vec4f(0); }`;
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 });
async function errorOf(code) { // the first compiler error, kept out of the console
device.pushErrorScope('validation');
const { messages } = await device.createShaderModule({ code }).getCompilationInfo();
await device.popErrorScope();
return messages.find((m) => m.type === 'error');
}
const e1 = await errorOf(broken);
device.pushErrorScope('validation');
device.createRenderPipeline({ layout: 'auto', vertex: { module: device.createShaderModule({ code: vertexWriter }) } });
const e2 = await device.popErrorScope();
const B = GPUBufferUsage;
const prices = [14.99, 39.50, 24.00, 18.75, 16.20, 21.30];
const buf = (size, usage, data) => { const b = device.createBuffer({ size, usage: usage | B.COPY_DST }); if (data) device.queue.writeBuffer(b, 0, data); return b; };
const out = buf(24, B.STORAGE), input = buf(24, B.STORAGE, new Float32Array(prices));
const discount = buf(4, B.UNIFORM, new Float32Array([0.15]));
const compute = device.createComputePipeline({ layout: 'auto', compute: { module: device.createShaderModule({ code: fixed }) } });
// The render pass reads both buffers with read-only access, which vertex shaders allow.
const module = device.createShaderModule({ code: `
@group(0) @binding(0) var<storage, read> before: array<f32>;
@group(0) @binding(1) var<storage, read> after: array<f32>;
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 q = vec2f(f32(v & 1), f32(v >> 1));
let book = i / 2;
let sale = i % 2 == 1; // two bars per book: before, after
let value = select(before[book], after[book], sale);
let x = 0.1 + f32(book) * 0.15 + select(0.0, 0.06, sale);
return Out(vec4f(x + q.x * 0.055, -0.85 + q.y * value / 40 * 0.8, 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);
}` });
const render = device.createRenderPipeline({ layout: 'auto', primitive: { topology: 'triangle-strip' },
vertex: { module }, fragment: { module, targets: [{ format }] } });
const encoder = device.createCommandEncoder();
const cp = encoder.beginComputePass();
cp.setPipeline(compute);
cp.setBindGroup(0, device.createBindGroup({ layout: compute.getBindGroupLayout(0), entries: [
{ binding: 0, resource: { buffer: out } }, { binding: 1, resource: { buffer: input } }, { binding: 2, resource: { buffer: discount } }] }));
cp.dispatchWorkgroups(1);
cp.end();
const pass = encoder.beginRenderPass({ colorAttachments: [{ view: context.getCurrentTexture().createView(),
clearValue: [0.97, 0.96, 0.93, 1], loadOp: 'clear', storeOp: 'store' }] });
pass.setPipeline(render);
pass.setBindGroup(0, device.createBindGroup({ layout: render.getBindGroupLayout(0), entries: [
{ binding: 0, resource: { buffer: input } }, { binding: 1, resource: { buffer: out } }] }));
pass.draw(4, 12);
pass.end();
device.queue.submit([encoder.finish()]);
ink.fillStyle = '#fff4f2'; ink.fillRect(8, 8, 584, 170);
label('prices[0] = 12.74; discount = 0.15; in a compute shader:', 16, 30, 13, '#222', 'system-ui, sans-serif', 'bold');
label(e1 ? `line ${e1.lineNum}: ${e1.message}`.slice(0, 82) : 'no error?', 16, 52, 11.5, '#8a2b2b', 'ui-monospace, monospace');
label('Only the first error is reported, not the one for the uniform.', 16, 72, 12, '#555');
label('counter += 1; in a @vertex function:', 16, 104, 13, '#222', 'system-ui, sans-serif', 'bold');
const lines = (e2 ? e2.message : 'no error?').split('\n')[0].match(/.{1,82}(\s|$)/g) || [];
lines.slice(0, 3).forEach((l, i) => label(l.trim(), 16, 126 + i * 17, 11.5, '#8a2b2b', 'ui-monospace, monospace'));
label('Fixed: out[i] = prices[i] * (1 - discount)', 16, 206, 13, '#222', 'system-ui, sans-serif', 'bold');
label('grey: prices (read)', 16, 228, 12, '#666'); label('blue: out (read_write)', 16, 246, 12, '#1f4f8a');
}
main();
</script>