Native APIs let a program enumerate GPUs and pick one by name; WebGPU deliberately does not, since a GPU list is more fingerprinting data. Your levers are the requestAdapter() options: none gives the browser's default (usually the GPU driving the display), powerPreference asks for the integrated or discrete GPU, and xrCompatible for the GPU a WebXR runtime uses.
This book's machine has one GPU, so beyond Power Preference this is documentation only, not run here. On Windows, where Chrome 154 1 ignores powerPreference, the user's per-app choice in Settings > System > Display > Graphics decides which GPU Chrome uses. Resources never move between devices, so one device per page is the right default.
<!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 = 'center', weight = '') {
ink.font = `${weight} ${size}px system-ui, sans-serif`; ink.fillStyle = color; ink.textAlign = align;
ink.fillText(text, x, y);
}
// WebGPU never lists GPUs by name; these options are the only levers a page has.
const requests = [['{ }', {}], ["powerPreference: 'low-power'", { powerPreference: 'low-power' }],
["powerPreference: 'high-performance'", { powerPreference: 'high-performance' }],
['forceFallbackAdapter: true', { forceFallbackAdapter: true }]];
async function main() {
if (!navigator.gpu) return showMessage('WebGPU is not available in this browser');
const results = [];
for (const [name, options] of requests) results.push([name, await navigator.gpu.requestAdapter(options)]);
const adapter = results[0][1];
if (!adapter) return showMessage('WebGPU is not available in this browser (no adapter)');
const device = await adapter.requestDevice(); // one device per page is the right default
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
results.forEach(([name, a], i) => {
const x = 12 + (i % 2) * 294, y = 16 + Math.floor(i / 2) * 150;
boxes.push([x, y, 282, 136, 1, 1, 1, 12]);
// a little GPU chip: body plus pins, green when an adapter came back
const c = a ? (a.info.isFallbackAdapter ? [0.85, 0.60, 0.10] : [0.16, 0.56, 0.30]) : [0.70, 0.70, 0.70];
boxes.push([x + 16, y + 44, 48, 48, ...c, 6]);
for (let k = 0; k < 4; k++) boxes.push([x + 22 + k * 11, y + 38, 4, 60, ...c, 2], [x + 10, y + 50 + k * 11, 60, 4, ...c, 2]);
boxes.push([x + 28, y + 56, 24, 24, 1, 1, 1, 4]);
label(name === '{ }' ? 'requestAdapter()' : `{ ${name} }`, x + 141, y + 22, 11.5, '#222', 'center', 'bold');
if (!a) { label('null', x + 180, y + 74, 16, '#8a2b2b', 'center', 'bold'); return; }
label(`vendor: ${a.info.vendor || '(hidden)'}`, x + 84, y + 58, 12, '#333', 'left');
label(`architecture: ${a.info.architecture || '(hidden)'}`, x + 84, y + 78, 12, '#333', 'left');
label(`fallback adapter: ${a.info.isFallbackAdapter ? 'yes' : 'no'}`, x + 84, y + 98, 12, '#333', 'left');
label(`${a.features.size} features`, x + 84, y + 118, 12, '#666', 'left');
});
label('The options are hints: on Windows the user\'s Graphics settings decide, and resources never move between devices.', 300, 330, 11, '#555');
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 / 170, 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.93, 0.91, 0.87, 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>