demo · v131
Hand off a canvas configured by Three.js to a custom overlay
The motivating use case: a host app uses a 3D library (Three.js, Babylon.js, deck.gl) that calls configure() on the canvas. A custom overlay pass needs to render to the same canvas but doesn't know what the host configured. getConfiguration() returns the exact options so the overlay can match without guessing.
host (e.g. three.js)
called configure()
host has not called configure() yet
overlay pass
read back
click "overlay reads…" to learn the live config
the api
// host
const ctx = canvas.getContext("webgpu");
ctx.configure({
device, format: "bgra8unorm", alphaMode: "opaque",
colorSpace: "display-p3", usage: GPUTextureUsage.RENDER_ATTACHMENT
});
// overlay (different file, doesn't know what host passed)
const cfg = ctx.getConfiguration();
overlayPipeline = device.createRenderPipeline({
fragment: { targets: [{ format: cfg.format }] }, ...
});