液态玻璃是桌面唯一的玻璃材质体系,逐项复刻 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 近似高斯模糊 |
折射数学
对玻璃件覆盖区域逐像素:
- 计算圆角矩形有向距离
d(x, y)(SDF),负值在内、正值在外。 - 法线场
N = normalize(∇d),仅边缘带|d| ≤ R_band内有效,中心区N = (0, 0)(内部不折射,内容不变形)。 - 折射偏移:
uv′ = uv + N.xy × depth × falloff(|d|),falloff在边缘带内由 1 渐变到 0。 - 色差:
uv_R = uv′ + N.xy × δ,uv_B = uv′ − N.xy × δ,δ = aberration × depth × 0.5;G 通道用uv′。 - 高光:光源方向
L = normalize(−0.5, −0.7, 1.0)(左上),视方向V = (0, 0, 1),spec = pow(max(N·H, 0), 24),H = normalize(L + V),以白色叠加。 - 模糊:折射后按深度自适应,边缘 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 中间缓冲。
禁止事项
- 不得用「半透明 + 高斯模糊」冒充折射。
- 不得用直角位移图替代 SDF 圆角法线场。
- 不得把 Aero/亚克力效果冠名为液态玻璃。
- 不得在内容区(低级别)开启折射导致文字变形。