A few mistakes cause most WebGPU errors. Each row is one made on purpose on this machine, with the start of Chrome 154 1 's message ("..." marks a cut):
| Mistake | Message |
|---|---|
| Storage binding without STORAGE usage | Binding usage (BufferUsage::CopyDst) of [Buffer "prices"] ... |
| Uniform buffer smaller than its WGSL struct | Binding size (16) of [Buffer "uniforms"] is smaller than the minimum binding size (32). |
| Pipeline format differs from the canvas | Attachment state of [RenderPipeline "spine pipeline"] is not compatible ... |
Read the numbers: a struct of vec4f and f32 looks like 20 bytes but occupies 32 (Arrays and Alignment). Suspect formats: this canvas is bgra8unorm, so a pipeline hard-coded to rgba8unorm fails (Canvas Format). Find the first error: a bad shader module invalidates every pipeline built from it, and the cause is only in its compilation messages:
<script type="module">
const device = await (await navigator.gpu.requestAdapter()).requestDevice();
const module = device.createShaderModule({ label: 'price.wgsl', code: `@fragment
fn fs() -> @location(0) vec4f { let price: f32 = 14u; return vec4f(price); }` });
const { messages: [m] } = await module.getCompilationInfo();
console.log(`price.wgsl:${m.lineNum}:${m.linePos} ${m.type}: ${m.message}`);
device.pushErrorScope('validation');
device.createRenderPipeline({ layout: 'auto', vertex: { module, entryPoint: 'fs' } });
console.log((await device.popErrorScope()).message.split('\n')[0]);
</script>price.wgsl:2:37 error: cannot initialize 'let' of type 'f32' with value of type 'u32' [Invalid ShaderModule "price.wgsl"] is invalid due to a previous error.
WGSL has no implicit conversions (Conversions); column 37 is the price identifier. getCompilationInfo() goes further.