Reimagined Glass：任意形状的实时玻璃折射

摘要 Abstract

Reimagined Glass 是一套在浏览器端实时运行、不依赖服务端渲染的玻璃折射实现。就本文所知，在「二维有向距离场 + 屏幕空间折射」这一技术路线内，它是目前公开实现中物理一致性最高的一个。该判断建立在四项可验证的技术差异之上：

同时需要明确该判断的适用范围：本实现是屏幕空间的二维近似，而非三维 Snell 求解。它不包含全内反射、焦散，也不包含随入射角变化的 Fresnel 项。其贡献在于——在该类方法内部，将每一个原本依赖圆形对称性才成立的量，替换为对任意形状普遍成立的量。第九节末尾会完整讨论这条边界。

本项目在 liquid-glass（Vue 版） 的基础上进阶开发而来。具体而言，是将参考实现中仅对圆成立的折射公式拆解为若干独立分量，逐项分析其成立条件，并替换为形状无关的等价形式。

一、技术谱系与横向对比

Web 端的玻璃折射效果大致经历了三个阶段，以下三个项目分别代表其中一段。

三者的横向对比如下：

二、参考实现的适用条件

参考实现的折射项化简后为 。将其拆解为三个语义独立的分量：

对于圆，这三个分量之间存在三重巧合：

一旦形状变为正方形，三条巧合同时失效。

• 方向分量失效。 在靠近角点的边上，径向方向与表面法线的夹角最大可达 45°，折射方向随之产生系统性偏差。
• 深度分量失效。 length(st) 不再携带深度信息。正方形边中点到中心的距离为 ，角点为 ，但二者同处边界，深度均应为零。
• 高光分量失效。 参考实现的高光由硬编码的 sdCircle 生成，与实际玻璃轮廓无关。

三、折射模型的泛化

3.1 表面法线：来自场梯度

两条中心差分共需四次额外的场求值，一次得到两个量：精确的表面法线，以及无额外代价的 。后者是下一步的前提。

3.2 度量归一化

有向距离场的定义性质是 （几乎处处成立）。不满足该性质的场——例如超椭圆 ——仍能正确表示轮廓，但在轮廓附近的增长速率不正确，折射强度将随之偏离。

一阶修正为：

该步骤同时校正了超椭圆、动态水滴、形状过渡中的插值场，以及各向异性拉伸后的实例——它们均非度量场。这也是新增形状无需任何逐形状标定的原因。

实现中的表达式为：

1

fd.sd = clamp(f0 / max(gl, 1.0), -60.0, 60.0);

分母在 1 以下不生效，这一约束有明确依据：

3.3 深度权重：内切圆半径

其中 为该形状内切圆的半径（unit 形状下取值，再乘以实例缩放）。

该定义并非任意选取，可由代入验证。取半径 、圆心位于原点的圆：

结果与参考实现逐比特一致。因此该式并非另一种视觉上可接受的近似，而是参考公式的严格推广：圆的呈现结果完全不变，其余形状获得同一条内部深度斜坡。

内切半径在 src/core/shapes.js 中逐形状给出，可解析求值者一律解析求值：

1
2
3
4

{ id: 'polygon', inradius: (s) => Math.cos(PI / Math.max(s.p1, 3)) }   // 正 n 边形的边心距
{ id: 'capsule', inradius: (s) => Math.max(1 - s.p1, 0.02) }           // 胶囊：1 − 半长
{ id: 'star',    inradius: (s) => starInradius(s.p1, s.p2) }           // 星形内顶点半径
{ id: 'baked',   inradius: (s, baked) => baked[s.p1 | 0]?.inradius }   // 烘焙时实测最深值

烘焙形状无解析表达式，故在距离变换完成后取全场最深值作为内切半径——这正是内切圆半径的定义。

3.4 边缘高光：沿轮廓的光带

参考实现的圆形高光被替换为一条贴合轮廓、距边界固定深度的光带，并由表面法线与光照方向的点积调制：

1
2
3
4
5
6
7
8
9
10
11

float band  = max(fd.re * 0.18 * uHighlightSize, px * 2.0);
float depth = -fd.sd;
float t     = (depth - band * 0.35) / (band * 0.55);
float rim   = exp(-t * t);                     // 贴合边界的高斯光带

float lam   = dot(fd.n, uHighlightDir);
float front = pow(max(lam, 0.0), 1.6);         // 迎光面
float back  = pow(max(-lam, 0.0), 3.0) * 0.42; // 背光面回弹

float lt  = depth / (px * 3.2);
float lip = exp(-lt * lt) * (0.30 + 0.70 * front) * 0.26;   // 约 2px 的高光边线

其中宽度约 2 像素的 lip 项对最终观感的贡献显著。真实玻璃边缘存在一条极细的高亮线，该项的有无直接决定画面被识别为玻璃还是半透明色块。由于它同样由场的法线驱动，因此对星形或标志轮廓也同等适用。

四、片元着色器的实现

src/shaders/fragment.glsl 共 444 行，以下按求值顺序逐段说明。

4.1 场的合成：mapRaw

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

vec2 mapRaw(vec2 p) {
  vec2 acc = vec2(1e6, 0.2);
  float skip = uMergeK * 4.0 + uShadowBlur * 1.8 + 0.04;

  for (int i = 0; i < uCount; i++) {
    float bd = length(p - uCenter[i]) - uBound[i];

    // 远离该实例时，包围圆是一个合法且代价低得多的下界估计
    if (bd > skip) {
      acc = sminV(acc, vec2(bd, uBound[i] * 0.6), uMergeK);
      continue;
    }

    vec2 q = uInvMat[i] * (p - uCenter[i]);
    float d  = sdShape(q, uShapeA[i]);
    float re = uShapeA[i].w;

    float m = uMorph[i];
    if (m > 0.0005) {
      d  = mix(d,  sdShape(q, uShapeB[i]), m);
      re = mix(re, uShapeB[i].w,           m);
    }

    acc = sminV(acc, vec2(d, re) * uScaleAvg[i], uMergeK);
  }
  return acc;
}

其中包含三项设计：

其一，uInvMat 将世界空间映射回 unit 形状空间。 全部原语均归一化为内接于 的 unit 形状，因此单个 mat2（旋转、缩放与各向异性拉伸的复合）的逆矩阵即可处理所有实例变换，且同一个包围半径对所有形状类型有效。unit 距离乘以 uScaleAvg（）换算为世界距离；对各向异性映射该换算为近似值，其残差由 §3.2 的度量归一化吸收。

其二，smooth-min 携带 payload。 融合两个形状时不仅需混合距离，还需同步混合内切半径，否则深度斜坡将在融合处出现断裂：

1
2
3
4
5
6

vec2 sminV(vec2 a, vec2 b, float k) {
  k = max(k, 1e-4);
  float h = clamp(0.5 + 0.5 * (b.x - a.x) / k, 0.0, 1.0);
  return vec2(mix(b.x, a.x, h) - k * h * (1.0 - h),   // 距离，含平滑项
              mix(b.y, a.y, h));                      // payload，复用同一 h
}

其三，包围圆早退。 skip 的取值需同时覆盖 smooth-min 的影响半径与投影的柔和外沿（投影同样通过该场求值），因此为 uMergeK * 4.0 + uShadowBlur * 1.8 + 0.04。

4.2 梯度采样与自适应差分步长

1
2

float eMin = px * 0.9;
float e = clamp(abs(f0) * 0.55, eMin, max(re * uSmoothNormal, eMin));

差分步长 并非常量，而是随边界深度线性增长，上界为内切半径的一个比例（uSmoothNormal 默认 0.05）。

其依据如下：

在最近边界点发生切换的位置——正方形内部的对角线、任意形状的中轴、多边形的角——精确法线本身是不连续的。像素级宽度的中心差分会忠实复现该跳变，在画面上表现为一条横穿玻璃的硬边。加宽步长可将跳变展开为一段平滑旋转，但固定的宽步长同时会钝化边界，而边界既是轮廓所在，也是折射强度最大的区域。

因此步长随深度自适应：边界处保持精确，中轴处才引入平滑，而中轴所在深度的折射已充分衰减。角点附近的残余接缝由 §4.4 的足迹预滤波处理，该步骤会将接缝两侧模糊为同一颜色。

同一平均过程还消除了采样式 SDF 贴图的双线性折面。双线性插值仅为分段线性，其梯度在每个纹素边界处发生阶跃，这是烘焙蒙版与文字轮廓边缘出现缺口状伪影的成因。

4.3 轮廓覆盖率的解析抗锯齿

参考实现的抗锯齿方式是将完整的 refrakt() 执行五次，纹理采样量随之增至五倍。本实现仅对覆盖率作五点采样，且不产生任何额外纹理读取：

1
2
3
4
5
6

cover = 0.2 * (
    smoothstep(0.0, soft, -fd.sd)
  + smoothstep(0.0, soft, -(fd.sd + fd.n.x * eps))
  + smoothstep(0.0, soft, -(fd.sd - fd.n.x * eps))
  + smoothstep(0.0, soft, -(fd.sd + fd.n.y * eps))
  + smoothstep(0.0, soft, -(fd.sd - fd.n.y * eps)));

由于 是距离场，方向导数 是精确的，邻域四点的距离值可直接推得，无需实际采样；颜色维度的变化则已由预滤波覆盖。

4.4 折射偏移与足迹预滤波

1
2
3
4

float damp = mix(0.55, 1.0, smoothstep(0.08, 0.38, fd.metric));
float den  = min(fd.sd, -max(0.5 * soft, 1e-5));
float w    = clamp(den + fd.re, 0.0, fd.re);
vec2  offP = fd.n * (w / den) * damp;

den 处的 min 用于处理部分覆盖像素。此类像素跨越边界，若按其自身的 求值，偏移量的符号会在边界两侧翻转，在轮廓上产生振铃。将其钳制在边界内侧可保证符号稳定。

随后是预滤波，这是抑制边界混叠的关键：

1
2

float footprint = amp * fd.re * px / max(den * den, 1e-9);
float lod = clamp(log2(max(uvToTexels(footprint), 1.0)), 0.0, uMaxLod);

推导如下。偏移量 （边界附近 ），对深度求导得：

在距边界数个像素处，该差值已达背景尺寸的 30% 量级，即相邻两个屏幕像素的采样位置在背景中相距甚远。这属于对梯度无界的函数作点采样，提高超采样倍数无法使其收敛，结果表现为边界处的彩色噪点。

正确的处理方式是选取与屏幕空间足迹匹配的 mip 层级。该工作本应由硬件纹理单元自动完成，但在此场景下不可用：

uvToTexels() 的换算不可省略。fitUV 会先对屏幕 UV 作缩放，而在 Page 模式下整篇文档均位于纹理内，一个视口高度的跨度仅占纹理的 。忽略该换算会使边界模糊量偏大一个数量级。

预滤波同时处理了 §4.2 遗留的问题：法线翻转接缝的两侧被模糊为同一颜色，角点因而呈现为平滑过渡。

4.5 色散的上界

1
2
3
4
5

const float DISP_MAX = 0.02;

vec2 d = offUv * (uDispersion * 0.2);
float m = length(d);
if (m > DISP_MAX) d *= DISP_MAX / m;

基础偏移在边界处按 发散。若色散仅按固定比例拆分通道，边界处三个通道的分离量将达到屏幕尺寸的显著比例，呈现为高饱和的彩虹涂抹而非玻璃质感。对分离量本身施加上界，可使边缘彩边的宽度在任意折射强度下保持稳定。

4.6 磨砂采样

textureLod(uv, frost * maxLod) 这一常见写法只读取高层 mip 的单个纹素，相当于将该层的纹素网格整体放大，画面上表现为块状伪影。本实现的方案为：

1
2
3
4
5
6
7
8
9
10
11
12

const int N = 10;
float spacing = blur / sqrt(float(N));
float bl = clamp(max(lod, log2(max(uvToTexels(spacing), 1.0))), 0.0, uMaxLod);

for (int i = 0; i < N; i++) {
  float fi = float(i) + 0.5;
  float a = fi * GOLDEN_ANGLE;              // 2.39996323 rad = 137.507°
  float r = blur * sqrt(fi / float(N));     // 面积均匀分布
  vec2  o = vec2(cos(a), sin(a)) * r / vec2(uAspect, 1.0);
  float wt = 1.0 - 0.5 * (r / blur);
  acc += chromaTriplet(base + o, d, bl) * wt;
}

其中包含两项设计：

• 黄金角分布。 角度步进 配合 ，得到面积均匀且无方向性的采样点分布，消除网格伪影；
• 由采样间距选层。 。据此选取的 mip 使单点模糊核半径约等于采样间距，各核叠合为一个连续卷积核；若改由总半径选层，相邻核之间会留下未覆盖的空隙。

4.7 主函数：分级剔除与合成

1
2
3
4
5
6
7

float reach = uShadowBlur * 1.8 + length(uShadowOffset) + uMergeK * 4.0 + 0.02;
if (cull > reach) { /* 完全在外：仅输出背景并返回 */ }

float sh = shadowAt(p);
if (cull > uMergeK * 4.0 + 0.03) { /* 玻璃外、投影内：仅输出投影 */ }

Field fd = sampleField(p, px);   // 至此才产生五次场求值的开销

屏幕上多数像素与玻璃无交集，两级剔除将高开销路径限制在实际需要的像素范围内。

合成阶段包含三项与参考实现不同的处理：

透明合成方面，上下文以 premultipliedAlpha: false 创建，因此着色器需输出直通 alpha：

1
2
3

float aShadow = sh * (1.0 - cover);
float a = clamp(cover + aShadow, 0.0, 1.0);
fragColor = vec4(col * cover / max(a, 1e-4), a);

同时禁用混合（gl.disable(gl.BLEND)）。全屏四边形本身即直接写入整帧，任何 src-alpha 混合都会在绘制缓冲中留下预乘值，导致合成器二次相乘，在 Page 模式下表现为玻璃周围的暗边。

4.8 关于形状相关形变项的取舍

参考实现包含一个液态拖拽项：

该项按一个仅取决于「与指针距离」的量收缩整个场。对圆而言，边界上各点到中心等距，效果为均匀收缩；对正方形而言，边中点到中心的距离远小于角点，被收缩的比例约为角点的两倍，直边因而被拗为星形。此外，min(-tweak, 0) 会在 低于某一定值时使整项失效，该阈值在正方形上对应一个同心的小正方形，其内部完全不产生折射。

由于该项的行为与形状强相关，本实现未予移植。运动感改由 instances.js 中面积守恒的速度拉伸提供——后者是仿射映射，因而与形状无关。

五、任意轮廓的距离场烘焙

解析原语覆盖了常见形状，但「任意形状」意味着无解析表达式的形状：标志、字形、SVG 路径、PNG 剪影。src/core/sdfBaker.js 负责将其转换为着色器可像其他原语一样采样的数据。

5.1 精确距离变换的必要性

折射项需除以距离，因此距离场中的任何误差都会被 放大后呈现在画面上。近似距离变换（chamfer、8SSEDT）的误差随方向不均匀分布，在轮廓上表现为规律性波纹。本实现采用 Felzenszwalb–Huttenlocher 精确欧氏距离变换，复杂度为 。

一维情形下，距离变换定义为

每个样点 贡献一条顶点位于 、开口向上的抛物线， 即该族抛物线的下包络。算法以一次扫描维护包络（栈中保存当前生效的抛物线 v[] 与相邻两条的交点 z[]），再以一次扫描判定每个 所属区段：

1
2
3
4
5
6
7
8

for (let q = 1; q < n; q++) {
  let s = (f[q] + q*q - (f[v[k]] + v[k]*v[k])) / (2*q - 2*v[k]);
  while (k > 0 && s <= z[k]) {           // 新抛物线完全覆盖栈顶
    k--;
    s = (f[q] + q*q - (f[v[k]] + v[k]*v[k])) / (2*q - 2*v[k]);
  }
  k++; v[k] = q; z[k] = s; z[k+1] = INF;
}

欧氏距离的平方可分离，因此二维情形只需按列执行一次、再按行执行一次。

数值精度方面，全流程使用 Float32 已足够：即使在 2 倍超采样分辨率下，平方距离仍不超过 ，变换保持精确，同时将工作集减半（两张 的 Float64 网格需 67 MB）。

5.2 亚像素修正与降采样次序

距离变换在二值化蒙版上执行，因此其恢复的边界被量化至采样格点。该量化在常规 SDF 应用中不可见，但在本场景中会被 放大为可见抖动。实现采用两项措施：

1
2
3
4
5
6

let d = Math.sqrt(outer[i]) - Math.sqrt(inner[i]);
const ad = Math.abs(d);
if (ad < 1.8) {
  const k = 1 - Math.min(Math.max((ad - 0.8) / 1.0, 0), 1);
  d += (0.5 - alpha[i]) * k;      // 由抗锯齿覆盖率恢复亚采样边界位置
}

• 2 倍超采样。 整个变换在 上执行，随后对结果距离场作盒式降采样。次序不可颠倒：距离场在边界附近可正确平均，蒙版则不能；
• 亚像素修正。 抗锯齿的 alpha 覆盖率携带了边界的亚采样位置信息，将其叠加回距离值，并随深度增加迅速衰减，以免影响内部区域。

5.3 纹理格式与场的外延

烘焙结果为一张 的 R16F sampler2DArray 图层，共 4 层，可同时挂载 4 个自定义形状。着色器的采样方式为：

1
2
3
4
5
6

float sdTex(vec2 p, float layer) {
  vec2 pc = clamp(p, vec2(-SDF_SPAN), vec2(SDF_SPAN));
  vec2 uv = pc / (2.0 * SDF_SPAN) + 0.5;
  float d = textureLod(uSdfArray, vec3(uv, layer), 0.0).r;
  return d + length(p - pc);       // 贴图之外以「到贴图的距离」外延
}

末项使场在贴图之外保持连续且单调，投影依赖该性质，否则玻璃外围会出现硬边。此处同样必须使用 textureLod：该函数在动态循环内部、且位于动态分支之后被调用。

三个烘焙入口分别为 bakeFromSvgPath（Path2D 配合 getBBox）、bakeFromText（measureText 的 actualBoundingBox*）与 bakeFromImage（透明 PNG 取 alpha，完全不透明的图像按亮度阈值二值化，因此黑白剪影同样适用）。默认烘焙对象为一个凹形四角星——凹形是解析原语最难表达的形状类别，可作为该管线的验证用例。

六、实例模型与运动学

6.1 各向同性的 p 空间

所有几何量位于统一的 p 空间：原点为视口中心，单位长度为视口高度， 分量乘以宽高比。

该空间为各向同性，这是折射偏移能够正确换算回 UV 的前提：

1

vec2 offUv = offP * amp / vec2(uAspect, 1.0);

参考实现在宽高比缩放后的空间中计算偏移，却将结果直接叠加到原始 UV，导致在任何非正方形视口下，折射被横向拉伸一个宽高比因子。该偏差在圆上不易察觉（圆本身已被拉伸为椭圆，观感上自洽），在正方形上则明显可见。

6.2 实例变换矩阵

中间的 行列式恒为 1，即面积守恒。该变换作用于速度坐标系（ 为速度方向的旋转），因此高速运动时玻璃沿运动方向伸长、垂直方向变薄，形成液体而非刚性透镜的观感。

由 派生出三个量：

1
2
3

this.inv      = mat2Inverse(M)                    // 世界空间 → unit 形状空间
this.scaleAvg = Math.sqrt(Math.abs(mat2Det(M)))   // unit 距离 → 世界距离
this.bound    = mat2SpectralNorm(M) * 1.02        // 包围圆半径

包围半径采用谱范数（最大奇异值）而非任一缩放分量：

对同时含旋转与各向异性拉伸的 mat2，这是唯一正确的包围圆半径；剔除逻辑的正确性依赖于它构成真正的上界。

6.3 形变、形状过渡与运动积分

• 形状过渡：切换形状时两个场在约 0.6 s 内混合（easeInOutCubic），并叠加幅度为 的尺寸涨落。由于插值场非度量场，其表现依赖 §3.2 的归一化。
• Follow 模式：首个实例跟随指针，其余实例依次跟随前一个，配合 smooth-min 融合，形成可分离并重新聚合的液态拖尾。
• Drag 模式：实例可被抛出，具备动量、墙壁反弹（系数 0.62）与沿速度方向的形变。
• 帧率无关的平滑：

1
2
3
4

export function damp(current, target, s, dt) {
  const k = 1 - Math.pow(1 - clamp(s, 0, 1), Math.max(dt, 0) * 60);
  return current + (target - current) * k;
}

参数 定义为每 60 fps 帧的收敛比例，因而调参直观，同时在 60 / 120 / 144 Hz 下结果一致。

七、渲染器与工程实现

八、适用场景

在背景静止或缓慢变化的场景中，该实现已具备直接使用的条件。

• 组件级拟物：dock、悬浮导航、通知卡片、播放器控制条、模态框背板。此类元素通常覆盖在主视觉图或渐变之上，背景本身静止。
• 品牌形状：这是相对其他实现最具区分度的能力。将标志的 SVG 路径直接烘焙为玻璃轮廓，可使品牌形状本身成为玻璃，而非在圆角矩形内放置标志。
• 文字标题：bakeFromText 产生的字形轮廓同样具备完整的折射、边缘光与色散。
• 数据可视化透镜：可拖动的玻璃透镜在图表上移动，边界处的强折射构成自然的焦点—上下文隐喻。
• 移动端系统级界面：提高 liquidity 后的拖尾与融合行为，接近系统动效的质感。

工程选型建议如下：

九、能力边界与工程限制

9.1 背景纹理无法动态更新

这是该类实现最核心、且在当前 Web 平台上无解的限制。

其根源不在实现层面，而在浏览器的安全模型：

因此唯一可行的路径是重建：html2canvas 并非截图工具，而是以 JavaScript 遍历 DOM、解析计算样式并重新绘制至 2D 画布。该路径的代价是结构性的。

其一，单次快照开销显著。

1
2
3

const docW = Math.max(document.documentElement.scrollWidth, window.innerWidth);
const docH = Math.max(document.documentElement.scrollHeight, window.innerHeight);
const scale = Math.min(this.scale, 8192 / Math.max(docW, docH, 1));

以一篇 1440 × 6000 的文档为例，按 1.5 倍缩放后为 像素，RGBA 数据约 78 MB。DOM 遍历耗时数十至数百毫秒，texImage2D 上传与 generateMipmap 再耗时数十毫秒。该开销构成可感知的卡顿，无法按帧执行，甚至无法按秒执行。

其二，滚动不构成失效条件。

由于快照覆盖整篇文档而非视口，滚动时仅需更新四个 float：

第四项取补是因为纹理按 y 轴翻转上传。滚动的成本因此降至可忽略，玻璃与页面保持严格同步，不会出现「先显示陈旧画面、再等待昂贵重拍」的现象。

其三，除滚动外的任何变化均导致快照失效。 包括 hover 状态、折叠块展开、图片懒加载、字体替换（FOUT）、暗色模式切换、CSS 动画、<video>、<canvas> 以及跨源 iframe。

liquidGL 在该问题上的处理最为完整：它维护一份动态节点清单，对这些节点单独重拍并合成回快照，视频则逐帧 drawImage，重负载交由 Worker 执行。但其 README 的特性表中，Real-time Refraction (CSS animations) 一项标记为不支持——CSS 动画的中间状态不在 JS 可枚举的范围内。

其四，根本解法只能来自浏览器平台。 所需能力是可编程的 backdrop，即允许着色器直接获取合成器已计算完成的图层。目前最接近的机制为 Firefox 的 -moz-element()（非标准、仅 Firefox 支持）与 Screen Capture 系的 Element Capture / Region Capture（需用户授权，面向屏幕共享而非渲染）。Houdini 的 Paint API 同样不具备 backdrop 访问权限。

9.2 其他限制

文字清晰度。 玻璃下方的文字来自快照，已丢失子像素抗锯齿，经折射与 mip 预滤波后进一步模糊。因此玻璃适合覆盖图片、渐变与装饰性排版，不适合覆盖正文。Page 模式的设计正是基于这一点：画布透明合成于原生 DOM 之上，玻璃之外的文字不受任何影响。

覆盖层的交互。 画布采用 position: fixed; inset: 0; pointer-events: none，页面自身的交互不受影响；但玻璃的拖拽需在 window 级事件中针对 SDF 自行完成命中测试（GlassScene.pick()），并显式跳过 [data-gl-ignore="1"] 子树。

实例数上限为 8。 该上限受限于 uniform 数组尺寸与逐像素执行的实例循环。包围圆早退可显著降低远处实例的开销，但循环本身无法消除。

功耗。 全屏片元着色器在 120 Hz 显示设备上持续运行对移动设备电池不友好。自适应分辨率可缓解但无法改变性质，该效果更适合局部、短时、有明确目的地使用。

html2canvas 的保真度。 它是 CSS 渲染的再实现，对 backdrop-filter、部分 mask、复杂 clip-path 与 filter 链的支持并不完整。跨源图片必须携带 CORS 响应头（配置为 useCORS: true, allowTaint: false，画布一旦被 taint，getImageData 与纹理上传均不可用）。

色彩管理。 全流程假设 sRGB，未处理 P3 与 HDR。在广色域显示设备上，折射结果与原生 DOM 之间存在可辨识的色差。

物理模型的适用范围。 这是一个屏幕空间的二维模型：玻璃厚度由内切半径斜坡近似，折射方向来自二维法线而非三维表面法线与 Snell 定律，不包含全内反射、焦散，以及随入射角变化的 Fresnel 反射率。

综合上述，摘要中判断的成立边界是明确的：在该类方法内部，每一个原本依赖圆形对称性的量都被替换为普遍成立的量。它并非在模拟一块真实的三维玻璃，而是将一项视觉技巧转化为一个自洽的模型。二者的差别，正体现为「更换形状即失效」与「对任意形状均成立」之间的差别。

十、后续方向

• WebGPU 与增量快照：以 compute shader 生成 mip 链，并按脏矩形增量更新纹理，可将重拍代价由整篇文档降至变化区域。
• 由 DOM 几何直接生成 SDF：元素的 border-radius 本身即 sdRoundBox 的参数，跳过烘焙即可使每个 DOM 元素自动获得精确的解析场。
• 厚度贴图：当前厚度为内切半径的线性斜坡；若允许烘焙一张厚度图，则可表达真实透镜、棱镜与倒角。
• 主题集成：将其封装为 Redefine-X 的可选插件，是该项目较为自然的落地形态。

参考与致谢

• naughtyduk/liquidGL —— DOM 贴片路线中完成度最高的实现，其动态节点与视频合成方案具有参考价值。
• Muggleee/liquid-glass —— 本项目的直接前身，本文的分析即由其折射公式 mix(vec2(0), normalize(st)/sd, length(st)) 展开。
• Inigo Quilez —— sdf.glsl 中绝大多数精确原语的出处。
• P. Felzenszwalb, D. Huttenlocher, Distance Transforms of Sampled Functions —— 烘焙管线所用的 精确距离变换。

Powered by Claude Opus 5