Unsuffixed literals are abstract: they take the type their context needs (let b: u32 = 2 works) or become i32 and f32; 1u, 1i, 1f and 1h fix the type. Once values are concrete, WGSL converts nothing implicitly: multiplying 312u by a let holding 4.6 failed with "no matching overload for 'operator * (u32, f32)'", followed by the nine * overloads that do exist. Conversions are written as constructors, and bitcast<T>() reinterprets bits without converting:
// out: 6 x u32
@group(0) @binding(0) var<storage, read_write> out: array<u32>;
@compute @workgroup_size(1) fn main() {
var f = 2.5; var negative = -1.5f; var huge = 5e9f; var big = 2147483647;
out[0] = u32(f); // truncates toward zero
out[1] = u32(negative); // float to integer conversions clamp
out[2] = u32(huge);
out[3] = bitcast<u32>(1.0f); // the IEEE 754 bits of 1.0
out[4] = u32(-1i); // integer to integer keeps the bits
out[5] = bitcast<u32>(big + 1); // i32 arithmetic wraps at run time
}Output
out: 2, 0, 4294967040, 1065353216, 4294967295, 2147483648
Float-to-integer conversion clamps: 5e9 became 4294967040, the largest f32 below 2^32. Integer overflow wraps at run time but fails in a constant expression: 2147483647 + 1 gave "value 2147483648 cannot be represented as 'i32'".
<!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="330"></canvas>
<canvas id="labels" width="600" height="330"></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', align = 'left') {
ink.font = `${size}px ${font}`; ink.fillStyle = color; ink.textAlign = align; ink.fillText(text, x, y);
}
const lab = /* wgsl */ `
@group(0) @binding(0) var<storage, read_write> out: array<u32>;
@compute @workgroup_size(1) fn main() {
var f = 2.5; var negative = -1.5f; var huge = 5e9f; var big = 2147483647;
out[0] = u32(f); // truncates toward zero
out[1] = u32(negative); // float to integer conversions clamp
out[2] = u32(huge);
out[3] = bitcast<u32>(1.0f); // the IEEE 754 bits of 1.0
out[4] = u32(-1i); // integer to integer keeps the bits
out[5] = bitcast<u32>(big + 1); // i32 arithmetic wraps at run time
}`;
// One cell per bit: the fragment shader reads the word and tests bit 31 - column.
const view = /* wgsl */ `
@group(0) @binding(0) var<storage> out: array<u32>;
struct Out { @builtin(position) pos: vec4f, @location(0) @interpolate(flat) cell: u32 }
@vertex fn vs(@builtin(vertex_index) v: u32, @builtin(instance_index) i: u32) -> Out {
let q = vec2f(f32(v & 1), f32(v >> 1));
let row = i / 32; let col = i % 32;
let px = vec2f(222 + f32(col) * 11 + f32(col / 8) * 3, 40 + f32(row) * 46) + q * vec2f(10, 22);
return Out(vec4f(px.x / 300 - 1, 1 - px.y / 165, 0, 1), i);
}
@fragment fn fs(in: Out) -> @location(0) vec4f {
let word = out[in.cell / 32];
let bit = (word >> (31 - in.cell % 32)) & 1;
return select(vec4f(0.88, 0.87, 0.84, 1), vec4f(0.08, 0.40, 0.75, 1), bit == 1);
}`;
const rows = ['u32(2.5)', 'u32(-1.5f)', 'u32(5e9f)', 'bitcast<u32>(1.0f)', 'u32(-1i)', 'bitcast<u32>(big + 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 });
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, 6 * 32);
pass.end();
encoder.copyBufferToBuffer(out, 0, read, 0, 24);
device.queue.submit([encoder.finish()]);
await read.mapAsync(GPUMapMode.READ);
const values = new Uint32Array(read.getMappedRange().slice(0));
read.unmap();
label('expression and u32 value', 12, 26, 12, '#666');
label('bit 31', 222, 26, 11, '#666'); label('bit 0', 581, 26, 11, '#666', undefined, 'right');
rows.forEach((text, i) => {
label(text, 12, 48 + i * 46, 12.5, '#222', 'ui-monospace, monospace');
label(`= ${values[i].toLocaleString('en-US')}`, 24, 65 + i * 46, 12.5, '#1f4f8a', 'ui-monospace, monospace');
});
label('Float to integer truncates toward zero and clamps to the u32 range; bitcast only reinterprets bits.', 12, 322, 11.5, '#444');
}
main();
</script>