demo · v137

Tonemap studio

A synthetic HDR gradient with bright highlights, rendered into two canvases — uint8 (clamped at 1.0) and float16 (the new Chrome 137 storage type). Apply a tonemap, change exposure, watch the float canvas hold detail that the uint canvas cannot.

Heads upRequires a Chrome 137+ build with the floatColorBuffer WebGPU feature for the “native” float lane. Without it the demo simulates the float lane in JS so the comparison still works.
probing…
uint8 canvas (clamps at 1.0)

before

—
float16 canvas (Chrome 137+)

after

—

brightness histogram

One bin per 0.05 of relative luminance, log-scaled. The float lane keeps a long highlight tail past 1.0 (clamped at the canvas edge for display) — that’s the data the tonemap operator can roll off instead of throwing away.

the code

const ctx = canvas.getContext("2d", {
  colorSpace: "display-p3",
  pixelFormat: "float16",      // <-- new in Chrome 137
});

// Now you can write values > 1.0 into image data and the canvas
// will keep the precision through the compositor & tonemap step.
const img = new ImageData(w, h, {
  storageFormat: "float16",
  colorSpace: "display-p3",
});

see also