demo · v142

HDR Gradient with float16 vs 8-bit

The motivating workload behind tier1/tier2 in the WebGPU explainer: HDR rendering. rgba16float lets the compositor pass colour values above 1.0 to the display, and Tier 1 promises blending / multisampling on that format. With only 8-bit formats you get banding in dim gradients and clip everything above pure white. Slide the exposure to see both: the left canvas is an emulated 8-bit pipeline, the right uses float16. On displays + browsers without the tier, the right canvas falls back gracefully.

rgba8unorm (clipped to [0,1])

rgba16float (tier 1 — Chrome 142+)

rgba16float blendable (tier1)
—
rgba32float storage (tier2)
—
CSS color-gamut
—

Real HDR output additionally requires configure({format:"rgba16float", colorSpace:"display-p3"}) and an HDR-capable display. The probe above reports what the adapter advertises; the visual difference between the canvases is reproduced on the CPU for clarity.

relevant API

// Chrome 142+ guarantees tier1 = blending / multisampling on rgba16float
context.configure({
  device,
  format: "rgba16float",
  colorSpace: "display-p3",
  toneMapping: { mode: "extended" },
});

see also