写真から、目を離さない。

Lumen の調整パネルはガラスでできている。露出も色温度も、写真の上に浮かべたまま、写真を見ながら動かせる。

そのガラスを、3 つの作り方で用意した。右の写真の上のルーペで、見え方と重さを比べてほしい。

調整

Plate 01 ─ 夜明けの湖（Canvas で手続き生成）ルーペはドラッグで動かせます

ガラスの作り方1ぼかしCSS backdrop-filter2SVG の屈折feDisplacementMap3GPU の屈折WebGPU ＋ TSL

3 つのガラスの違い

3 段とも、写真も、ガラスの形も、屈折の式も同じ。違うのは作り方だけ。fps はほとんどの端末で画面の書き換え回数（60 か 120）に張り付くので、差は「最悪」の値に出やすい。

項目	1 ぼかし	2 SVG の屈折	3 GPU の屈折
仕組み	背景をぼかすだけ	変位マップの画像で背景をずらす	ピクセルごとに屈折を計算する
縁の屈折	なし	あり	あり
色のにじみ	なし	あり（3 色を別々にずらす）	あり
縁の反射	枠線で代用	画像を重ねる	光の向きから計算
対応ブラウザ	ほぼすべて	Chromium 系のみ	WebGPU、無ければ WebGL 2
追加の読み込み	なし	なし（地図画像はその場で生成）	Three.js（約 240 KB・gzip）
形を変えるとき	CSS だけ	地図画像を作り直す	数値を渡すだけ

編集パネルが写真を隠すと、手元の数字ばかり見てしまう。ガラス越しなら、パネルの下の空の色が変わっていくのが、そのまま見える。

だから Lumen では、ガラスを使うのは写真の上に浮かぶパネルだけ。それ以外の画面は、紙のように平らにしてある。