LUMEN / 001 REAL HDR ON THE WEB

比白更亮。

你的屏幕能发出的光，远不止 #FFFFFF。这一页用 WebGPU 把数倍于 SDR 白的亮度，原样送上 HDR 显示器——没有图片，没有视频，每个像素都是此刻算出来的光。

FORMATRGBA16F
GAMUTDISPLAY‑P3
TONE MAPEXTENDED
PEAK6.0× SDR

移动指针或手指，牵引那颗钻石 · 按 H 对比 HDR / SDR

02 PROOF · 眼见为实

这不是「看起来像」HDR。

下面这条光带由 GPU 逐像素绘出，亮度从 ¼× 一路升到 16× SDR 白。在 SDR 屏幕上，1× 右侧会坍缩成同一种白；在 HDR 屏幕上，它会继续变亮，直到撞上你显示器的物理峰值。

¼×½×1×2×4×8×16×

↑ CSS #FFFFFF —— 传统网页能发出的最亮的白，与上方 1× 等亮上半：连续渐变 · 下半：整档色块

哪一格之后不再变亮，那里就是这块屏幕当前的 HDR 余量。把底部的「峰值」调到那个倍数，高光层次最完整。

显示动态范围—

显示色域—

画布—

色调映射—

渲染分辨率—

帧率—

GPU—

当前输出峰值—

03 HOW · 原理

三个决定，一条不妥协的光路。

半浮点画布

format: 'rgba16float'

每个通道 16 位浮点。像素值不再被锁死在 0–1 之间，1.0 只是「SDR 白」这个参考点。

扩展色调映射

toneMapping: { mode: 'extended' }

请浏览器别把超过 1.0 的值压回 SDR，而是原样交给显示器的 HDR 余量。

线性光着色

scene‑linear → rolloff → OETF

着色器在线性光里求和：日冕 2×，日珥 3×，钻石环直冲峰值；再经柔性肩部与扩展 sRGB 编码输出。

// 让画布亮过白色，只需要这些
const ctx = canvas.getContext('webgpu');
ctx.configure({
  device,
  format: 'rgba16float',
  colorSpace: 'display-p3',
  toneMapping: { mode: 'extended' },
});

Windows 11：设置 › 系统 › 显示 › 使用 HDR，或直接按 Win + Alt + B，本页会实时切换。
浏览器：Chrome / Edge 129 及以上（WebGPU HDR 画布）。
macOS：XDR / EDR 屏幕 + Chrome。
SDR 设备同样可以观看，只是高光会被压进白色——这正是 HDR 存在的理由。