switch selects on an i32 or u32. Each case lists constant selectors (default may join a list), and each clause is a braced block:
// out: 6 x u32
@group(0) @binding(0) var<storage, read_write> out: array<u32>;
const genre = array(0u, 1u, 2u, 3u, 1u, 5u); // Fiction, Technology, Cooking, Travel, ...
@compute @workgroup_size(1) fn main() {
for (var i = 0u; i < 6; i++) {
switch genre[i] {
case 0u, 1u: { out[i] = 10; } // several selectors, one clause
case 2u { out[i] = 20; } // the colon is optional
case default, 3u: { out[i] = 99; }
}
}
}Output
out: 10, 10, 20, 99, 10, 99
There is no fallthrough: a clause ends at its closing brace, no break needed. WGSL's fallthrough statement was removed in August 2022 (gpuweb pull request 3315) and now fails to parse ("expected '}' for case statement"); list selectors together instead. Duplicates fail too: case 1, 1 gave "duplicate switch case '1'".
<!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);
}
function label(text, x, y, size = 12, color = '#2b2b2b', align = 'left', weight = '', font = 'system-ui, sans-serif') {
ink.font = `${weight} ${size}px ${font}`; ink.fillStyle = color; ink.textAlign = align; ink.fillText(text, x, y);
}
const genres = ['Fiction', 'Technology', 'Cooking', 'Travel', 'Technology', 'Poetry'];
const lab = /* wgsl */ `
@group(0) @binding(0) var<storage, read_write> out: array<u32>;
const genre = array(0u, 1u, 2u, 3u, 1u, 5u); // Fiction, Technology, Cooking, Travel, ...
@compute @workgroup_size(1) fn main() {
for (var i = 0u; i < 6; i++) {
switch genre[i] {
case 0u, 1u: { out[i] = 10; } // several selectors, one clause
case 2u { out[i] = 20; } // the colon is optional
case default, 3u: { out[i] = 99; }
}
}
}`;
// The vertex shader reads each book's section number and puts it on that shelf.
const view = /* wgsl */ `
@group(0) @binding(0) var<storage> section: array<u32>;
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));
if (i >= 6) { // three planks
let y = 110 + f32(i - 6) * 100;
let px = vec2f(170 + q.x * 410, y + q.y * 8);
return Out(vec4f(px.x / 300 - 1, 1 - px.y / 170, 0, 1), vec3f(0.55, 0.38, 0.22));
}
var shelf = 2u;
switch section[i] {
case 10u: { shelf = 0u; }
case 20u: { shelf = 1u; }
default: { shelf = 2u; }
}
let px = vec2f(190 + f32(i) * 64 + q.x * 40, 110 + f32(shelf) * 100 - q.y * (60 + f32(i % 3) * 8));
let tints = array(vec3f(.12, .37, .55), vec3f(.36, .25, .60), vec3f(.88, .60, .06),
vec3f(.25, .49, .23), vec3f(.71, .27, .18), vec3f(.16, .62, .56));
return Out(vec4f(px.x / 300 - 1, 1 - px.y / 170, 0, 1), tints[i]);
}
@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 });
device.pushErrorScope('validation'); // the removed fallthrough statement, kept quiet
const fall = await device.createShaderModule({ code: 'fn f(x: u32) { switch x { case 1u: { fallthrough; } default: {} } }' }).getCompilationInfo();
await device.popErrorScope();
const B = GPUBufferUsage;
const out = device.createBuffer({ size: 24, usage: B.STORAGE | B.COPY_SRC });
const read = device.createBuffer({ size: 24, usage: B.COPY_DST | B.MAP_READ });
const compute = device.createComputePipeline({ layout: 'auto', compute: { module: device.createShaderModule({ code: lab }) } });
const module = device.createShaderModule({ code: view });
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 } }] }));
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: out } }] }));
pass.draw(4, 9); // six books and three planks
pass.end();
encoder.copyBufferToBuffer(out, 0, read, 0, 24);
device.queue.submit([encoder.finish()]);
await read.mapAsync(GPUMapMode.READ);
const section = new Uint32Array(read.getMappedRange().slice(0));
read.unmap();
label('case 0u, 1u -> 10', 12, 100, 12, '#222', 'left', 'bold', 'ui-monospace, monospace');
label('case 2u -> 20', 12, 200, 12, '#222', 'left', 'bold', 'ui-monospace, monospace');
label('default, 3u -> 99', 12, 300, 12, '#222', 'left', 'bold', 'ui-monospace, monospace');
genres.forEach((g, i) => {
const shelf = section[i] === 10 ? 0 : section[i] === 20 ? 1 : 2;
label(g, 210 + i * 64, 128 + shelf * 100, 10.5, '#333', 'center');
});
const e = fall.messages.find((m) => m.type === 'error');
label(`fallthrough; was removed in 2022: "${e ? e.message : 'accepted?'}"`, 12, 22, 11.5, '#8a2b2b');
}
main();
</script>