文档 v1.0 desktop/liquid-glass.md

液态玻璃材质设计

逐项复刻 shuding/liquid-glass 的折射原理并搬进 Vulkan 片元着色器 —— SDF 圆角法线场、三通道色差、镜面高光、双 Pass 模糊。Aero 是模糊加半透明,与液态玻璃是两种东西。

液态玻璃是桌面唯一的玻璃材质体系,逐项复刻 shuding/liquid-glass 的实现原理(规则 22)。Aero(亚克力/毛玻璃)与液态玻璃是两种完全不同的东西:Aero 是模糊加半透明,液态玻璃是真实折射加色差加镜面高光,两者不得混同、不得互相替代。

  • 文档版本:1.0
  • 定稿日期:2026-09-05

原理同构映射

Web 版依赖程序生成的位移贴图与 SVG 滤镜;原生端把同一数学搬进 Vulkan 片元着色器,逐项对应:

shuding/liquid-glass 的做法 compositord 原生做法
程序生成位移贴图(径向/圆角渐变编码偏移量) 圆角矩形 SDF → 梯度法线场,实时计算无需贴图
feDisplacementMap:P′ = P + scale × (C − 0.5) uv′ = uv + N.xy × depth × falloff(\
radius 参数生成位移贴图形状 SDF 圆角参数,同一值同时驱动几何裁剪与折射
RGB 三通道位移偏移产生色差 三次折射采样:R/G/B 各带方向相反的偏移系数
镜面高光(光照叠加层) 法线 · 半程向量边缘高光项
backdrop 模糊 深度自适应双 Pass 近似高斯模糊

折射数学

对玻璃件覆盖区域逐像素:

  1. 计算圆角矩形有向距离 d(x, y)(SDF),负值在内、正值在外。
  2. 法线场 N = normalize(∇d),仅边缘带 |d| ≤ R_band 内有效,中心区 N = (0, 0)(内部不折射,内容不变形)。
  3. 折射偏移:uv′ = uv + N.xy × depth × falloff(|d|)falloff 在边缘带内由 1 渐变到 0。
  4. 色差:uv_R = uv′ + N.xy × δuv_B = uv′ − N.xy × δδ = aberration × depth × 0.5;G 通道用 uv′
  5. 高光:光源方向 L = normalize(−0.5, −0.7, 1.0)(左上),视方向 V = (0, 0, 1)spec = pow(max(N·H, 0), 24)H = normalize(L + V),以白色叠加。
  6. 模糊:折射后按深度自适应,边缘 6px 渐变到中心 2px,水平 + 垂直双 Pass。

参数表

参数 范围 窗口装饰 Dock / 顶栏 菜单 / 通知
radius 0–32px 12 28 / 18 10
depth 0.0–1.0 0.35 0.50 0.45
blur 0–6px 3 5 4
chromaticAberration 0.0–1.0 0.20 0.30 0.25

参数经合成树 SceneNode.glass_params 下发(见 architecture.md),UI 侧不得绕过合成器自行实现玻璃效果。

应用分级

级别 对象 效果
Dock、顶部状态条、启动器、菜单、通知卡片、登录界面 完整折射 + 色差 + 高光 + 模糊
窗口标题栏、窗口边框带 折射强度减半,色差与高光保留
窗口内容区 关闭折射与色差,仅保留圆角、阴影与底色 alpha,保证正文可读性

几何一致性

圆角半径只有单一来源:合成树 SceneNode.corner_radius。几何裁剪与折射 SDF 必须使用同一个值,禁止两处各写各的——否则出现折射溢出圆角或缺角。

性能预算

  • 每个玻璃件独立 pass:先把 backdrop 渲染到临时目标(viewport 外扩 blur 半径),再折射合成回主目标。
  • 静态缓存:backdrop 无变化且玻璃件未移动/未缩放时,复用上一帧折射结果;失效条件为下层窗口重绘、玻璃件几何变化、壁纸切换。
  • 同屏玻璃件上限 12 个(超出按层级保留最上 12 个);目标 4K@60Hz 满帧。
  • 折射、色差、高光、模糊全部在 16F 域运算,禁止 8bit 中间缓冲。

禁止事项

  1. 不得用「半透明 + 高斯模糊」冒充折射。
  2. 不得用直角位移图替代 SDF 圆角法线场。
  3. 不得把 Aero/亚克力效果冠名为液态玻璃。
  4. 不得在内容区(低级别)开启折射导致文字变形。