跳到正文
网页珍奇柜Web Curio

光谱玻璃

Spectral Glass,Saqoosha,2026 年

正在布展…

本柜的现场复刻:按原作的技术思路从零编写,不含原作的代码和素材。为什么不直接展出原作:原作只能在支持 WebGPU 的浏览器里运行;为了让它在所有浏览器里长期可用,本柜用 WebGL 从零复刻了同样的逐波长色散效果。原作请点上方「去看原作」。

它是怎么做的

  1. 第 1 步玻璃形状用 SDF(胶囊、棱镜、圆钻)在着色器里求交
  2. 第 2 步按 Cauchy + Abbe 数计算每个波长的折射率
  3. 第 3 步每像素采样 N 个波长并分层抖动,按波长加 Fresnel
  4. 第 4 步用 CIE 色彩匹配函数把光谱积分回 RGB

复刻配方

一段技术配方,可以直接交给 AI 编程助手,也可以自己照着写。想指定技术栈、位置和性能预算,就把它加入实现方案。

Define glass objects as signed distance functions and ray-march them in a full-screen shader over a background texture. For each pixel, pick N wavelengths across 380-700nm with stratified jitter, compute each wavelength's index of refraction from a Cauchy equation parametrised by refractive index and Abbe number, and refract the view ray through entry and exit surfaces. Sample the background along each refracted ray, weight by that wavelength's CIE x/y/z matching values and Fresnel transmittance, then sum and convert XYZ to sRGB. Add temporal accumulation to hide the stratification noise.

档案

技术

能不能拿来用

原作以 MIT 许可开源:可以阅读源码学习,按许可证条款使用;在自己的项目里引用时保留原作者署名。

性能开销

视觉强度

实现难度

尺度为策展判断(1 到 5),用于比较和推荐。

核实记录:Demo loads (title 'Spectral Glass', requires WebGPU); repo has MIT LICENSE (GitHub field NOASSERTION).