Spectral Glass

WebGPU · 逐波长色散 · 五形状共享同一折射引擎

这是什么

用 SDF raymarching 在 WebGPU 上渲真玻璃:逐波长 Cauchy 色散 + 进出两次折射 + CIE 1931 光谱合成,白光进、连续彩虹出。

不是"把 R/G/B 的 IOR 各挪一点"那种三色带近似 —— 真玻璃是连续谱。默认场景采样 N = 16;按住 Z 强制降到 N = 3,两条彩虹的差别肉眼可辨。

五种形状

• pill 悬浮胶囊(液态玻璃那一路)
• prism 三棱镜(白光进、彩虹出最直观)
• cube 旋转立方
• plate 起伏波纹板
• diamond 明亮式切工:内部全反射链(TIR)逐次反射直到解析出射,火彩就从这里来

操作

• 拖拽形状 —— 挪位置
• Z(按住)—— 切成 N=3,看假彩虹
• 空格 —— 随机重新摆位
• R —— 换一张 Picsum 底图(未开 HDR 环境贴图时)
• T / S / B / F —— 钻石视角预设
• 右上角面板 —— IOR / Abbe / 采样数 / 形状 / 背景 / 材质 / 环境 / 抗锯齿

性能口径

两遍:便宜的全屏 bg + history,再叠一层实例化 3D proxy;重折射只发生在轮廓内。 背景像素很便宜,逐 λ 循环在 proxy 轮廓里最贵 —— 采样数 N 是唯一的成本旋钮。 加 ?perf 会在有 timestamp query 的机器上打印 GPU ms。

这里跑的是谁

页面外壳、能力探测、兜底与署名是本仓 src/spectral-glass.js 的; 引擎本体是上游构建产物,原样放在 upstream/spectral-glass/engine.js(MIT)。 想看源码实现请去上游仓库,别改 vendored 文件 —— 要改就自己 fork 后重新构建。

上游:Spectral-Glass(Saqoosha,MIT)· HDR 环境贴图:Poly Haven(CC0)· 占位照片:Lorem Picsum