Validation Mistakes

Common Validation Mistakes and How to Read Them

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):

Real validation messages for common mistakes
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:

The pipeline error points back to the shader's compilation messageHTMLLive
<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>

WGSL has no implicit conversions (Conversions); column 37 is the price identifier. getCompilationInfo() goes further.