wgpu (gfx-rs/wgpu (https://github.com/gfx-rs/wgpu 18,143 ), MIT or Apache-2.0, about 18,100 stars) is a "safe, pure-Rust graphics API" that follows the WebGPU standard and, in its README's words, "serves as the core of the WebGPU integration in Firefox 555 , Servo 185,019 , and Deno 60,577 ". Version 30.0.1 (August 2026) is current. Its crates:
wgpu-core: validation, resource tracking and state. Firefox's gfx/wgpu_bindings and Deno's ext/webgpu depend on it directly, not on the top-level crate.
wgpu-hal: a thin, unsafe layer over Vulkan, Metal, Direct3D 12 and OpenGL (ES).
naga: the shader translator and validator (WGSL to SPIR-V, HLSL, MSL or GLSL), wgpu's Tint.
wgpu: the ergonomic Rust API for native apps; compiled to WebAssembly it can target WebGPU or WebGL 2.
wgpu-native (gfx-rs/wgpu-native (https://github.com/gfx-rs/wgpu-native 1,393 )): the webgpu.h C API that Dawn 1,149 also implements, for C, C++, Python and other languages.
Firefox runs wgpu-core in its GPU process behind IPC. Mozilla's Firefox 141 announcement admitted that its "unbuffered inter-process communication ... introduces significant overhead", which later releases reworked. For native Rust code, cargo add wgpu (Native WebGPU).
<!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="370"></canvas>
<canvas id="labels" width="600" height="370"></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 USER = [0.84, 0.91, 0.97], CRATE = [0.97, 0.87, 0.78], API = [0.88, 0.88, 0.88], NAGA = [0.87, 0.94, 0.85];
// text, sub-text, x, y, w, h, colour
const blocks = [
['Firefox', 'gfx/wgpu_bindings', 20, 20, 130, 44, USER], ['Servo', '', 160, 20, 90, 44, USER],
['Deno', 'ext/webgpu', 260, 20, 100, 44, USER], ['Native Rust apps', 'cargo add wgpu', 380, 20, 200, 44, USER],
['wgpu', 'Rust API; as Wasm: WebGPU or WebGL 2', 380, 96, 200, 50, CRATE],
['wgpu-native', 'webgpu.h for C, C++, Python...', 380, 164, 200, 50, CRATE],
['wgpu-core', 'validation, resource tracking, state', 20, 130, 340, 50, CRATE],
['wgpu-hal', 'thin, unsafe layer over the native APIs', 20, 212, 340, 50, CRATE],
['naga', 'WGSL to SPIR-V, HLSL, MSL or GLSL', 380, 232, 200, 50, NAGA],
['Vulkan', '', 20, 300, 76, 36, API], ['Metal', '', 108, 300, 76, 36, API],
['Direct3D 12', '', 196, 300, 84, 36, API], ['OpenGL (ES)', '', 290, 300, 70, 36, API]];
// arrows: from (x, y) down or across to (x, y); drawn as thin boxes with a dot at the end
const links = [[85, 64, 85, 130], [205, 64, 205, 130], [310, 64, 310, 130], [480, 64, 480, 96],
[480, 146, 480, 164], [380, 189, 360, 189], [380, 121, 360, 121], [190, 180, 190, 212],
[58, 262, 58, 300], [146, 262, 146, 300], [238, 262, 238, 300], [325, 262, 325, 300], [360, 250, 380, 250]];
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 = []; // x, y, w, h, r, g, b, corner radius
for (const [x1, y1, x2, y2] of links) {
boxes.push([Math.min(x1, x2) - 1, Math.min(y1, y2) - 1, Math.abs(x2 - x1) + 2, Math.abs(y2 - y1) + 2, 0.45, 0.45, 0.45, 1]);
boxes.push([x2 - 4, y2 - 4, 8, 8, 0.45, 0.45, 0.45, 4]);
}
for (const [name, sub, x, y, w, h, c] of blocks) {
boxes.push([x, y, w, h, ...c, 9]);
label(name, x + w / 2, y + (sub ? h / 2 - 2 : h / 2 + 5), 13, '#222', 'center', 'bold');
if (sub) label(sub, x + w / 2, y + h / 2 + 14, 10.5, '#444');
}
label('gfx-rs/wgpu: MIT or Apache-2.0, v30.0.1 (August 2026)', 300, 360, 12, '#444');
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 / 185, 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 });
device.queue.writeBuffer(buffer, 0, data);
const group = device.createBindGroup({ layout: pipeline.getBindGroupLayout(0), entries: [{ binding: 0, resource: { buffer } }] });
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()]);
}
main();
</script>