Dawn 1,149 is Google's open-source C++ implementation of WebGPU (google/dawn (https://github.com/google/dawn 1,149 ), BSD 3-Clause), used by every Chromium 4,389 browser. Dawn Wire is its client-server layer: the wire client in the renderer process serializes each call, and the bytes travel through shared memory over Chrome 1 's GPU command buffer IPC to the wire server in the GPU process. Dawn Native then validates the call against the specification and runs it on a native backend. WGSL shaders go through Tint, Dawn's compiler, inside the GPU process.
Dawn is also a standalone native library with a C API (webgpu.h) for C++ programs and Emscripten 175,027 builds (Native WebGPU); its source is tagged daily rather than versioned.
<!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="380"></canvas>
<canvas id="labels" width="600" height="380"></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 = 'center', weight = '') {
ink.font = `${weight} ${size}px system-ui, sans-serif`; ink.fillStyle = color; ink.textAlign = align;
ink.fillText(text, x, y);
}
const CARD = [1, 1, 1];
// name, x, y, w, h: the stations a call passes through
const cards = [['JavaScript: queue.submit()', 20, 80, 190, 40],
['Wire client: serializes it', 20, 170, 190, 40],
['Dawn Wire server: copies, then parses', 300, 80, 270, 36],
['Dawn Native: validates against the spec', 300, 136, 270, 36],
['Tint: WGSL to HLSL, MSL or SPIR-V', 300, 192, 270, 36],
['Backend: Direct3D 12, Metal or Vulkan', 300, 248, 270, 36],
['GPU driver', 300, 330, 270, 34]];
const centre = ([, x, y, w, h]) => [x + w / 2, y + h / 2];
const path = [centre(cards[0]), centre(cards[1]), [255, 190], [255, 98], centre(cards[2]),
centre(cards[3]), centre(cards[4]), centre(cards[5]), centre(cards[6])];
function pointOnPath(t) { // t in 0..1 along the polyline
const lengths = path.slice(1).map((p, i) => Math.hypot(p[0] - path[i][0], p[1] - path[i][1]));
let d = t * lengths.reduce((a, b) => a + b);
for (let i = 0; i < lengths.length; i++) {
if (d <= lengths[i]) { const k = d / lengths[i]; return [path[i][0] + (path[i + 1][0] - path[i][0]) * k, path[i][1] + (path[i + 1][1] - path[i][1]) * k]; }
d -= lengths[i];
}
return path[path.length - 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 boxes = [[10, 40, 210, 190, 0.85, 0.91, 0.97, 14], // renderer process
[290, 40, 290, 256, 0.92, 0.88, 0.96, 14], // GPU process
[232, 60, 46, 150, 0.95, 0.90, 0.78, 8]]; // shared memory + IPC
for (const [, x, y, w, h] of cards) boxes.push([x, y, w, h, ...CARD, 8]);
label('Renderer process (sandboxed)', 115, 60, 12, '#1f4f8a', 'center', 'bold');
label('GPU process', 435, 60, 12, '#5b2b6e', 'center', 'bold');
ink.save(); ink.translate(259, 135); ink.rotate(-Math.PI / 2);
label('shared memory + IPC', 0, 4, 11, '#7a5a10'); ink.restore();
for (const [name, x, y, w, h] of cards) label(name, x + w / 2, y + h / 2 + 4, 11.5, '#222');
label('Every Chromium browser uses Dawn', 115, 262, 11, '#555');
label('(google/dawn, BSD 3-Clause)', 115, 278, 11, '#555');
const firstPacket = boxes.length, PACKETS = 7;
for (let i = 0; i < PACKETS; i++) boxes.push([0, 0, 12, 12, 0.85, 0.40, 0.10, 6]);
const module = device.createShaderModule({ code: `
struct Box { rect: vec4f, style: vec4f } // style: r, g, b, corner radius
@group(0) @binding(0) var<storage> boxes: array<Box>;
struct Out { @builtin(position) pos: vec4f, @location(0) local: vec2f,
@location(1) @interpolate(flat) i: u32 }
@vertex fn vs(@builtin(vertex_index) v: u32, @builtin(instance_index) i: u32) -> Out {
let corner = vec2f(f32(v & 1), f32(v >> 1)); // triangle-strip corners
let r = boxes[i].rect;
let px = r.xy + corner * r.zw;
return Out(vec4f(px.x / 300 - 1, 1 - px.y / 190, 0, 1), corner * r.zw, i);
}
@fragment fn fs(in: Out) -> @location(0) vec4f {
let b = boxes[in.i];
let half = b.rect.zw / 2;
let q = abs(in.local - half) - half + b.style.w; // signed distance to a rounded box
let d = length(max(q, vec2f(0))) + min(max(q.x, q.y), 0) - b.style.w;
let a = clamp(0.5 - d, 0, 1);
return vec4f(b.style.rgb * a, a); // premultiplied alpha
}` });
const blend = { srcFactor: 'one', dstFactor: 'one-minus-src-alpha' };
const pipeline = device.createRenderPipeline({ layout: 'auto',
vertex: { module }, primitive: { topology: 'triangle-strip' },
fragment: { module, targets: [{ format, blend: { color: blend, alpha: blend } }] } });
const data = new Float32Array(boxes.flat());
const buffer = device.createBuffer({ size: data.byteLength, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST });
const group = device.createBindGroup({ layout: pipeline.getBindGroupLayout(0), entries: [{ binding: 0, resource: { buffer } }] });
function frame(now) {
for (let i = 0; i < PACKETS; i++) { // commands flowing through the stations
const [px, py] = pointOnPath((now / 6000 + i / PACKETS) % 1);
data.set([px - 6, py - 6], (firstPacket + i) * 8);
}
device.queue.writeBuffer(buffer, 0, data);
const encoder = device.createCommandEncoder();
const pass = encoder.beginRenderPass({ colorAttachments: [{ view: context.getCurrentTexture().createView(),
clearValue: [0.97, 0.96, 0.93, 1], loadOp: 'clear', storeOp: 'store' }] });
pass.setPipeline(pipeline);
pass.setBindGroup(0, group);
pass.draw(4, boxes.length);
pass.end();
device.queue.submit([encoder.finish()]);
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
}
main();
</script>