Compose Multiplatform 液态玻璃：折射着色器与双端优化

最近在群里被问得最多的一句就是“Compose Multiplatform 上能不能做出那种新一代 iOS 液态玻璃Liquid Glass的质感”问的人里一半是想把设计稿一比一还原的客户端另一半是已经被“磨砂白卡片”审美喂到吐、想做点不一样东西的人。我前后花了大概三周时间在 Kotlin Compose Multiplatform 的项目里把这个效果从“看起来像”推到“动起来像”中间踩的坑比预想的多得多。先说结论能做而且不用写平台原生视图核心就三件事——把背景像素抓出来、写一段折射着色器、用弹簧把形变喂进去。难的不是算法本身是 Compose 这层封装把“背景”藏得太深你得知道从哪儿撬。这篇文章面向的是已经写过 Compose、至少能独立搭一个跨平台工程、会看一点 GLSL/SkSL 的中级开发者。完全没碰过着色器的读者也能跟下来因为我会把每个参数为什么这么取值都摊开讲。读完之后你应该能拿到一份可跑的双端实现骨架、一套调参表和一份别人不会告诉你的性能屎坑清单。1. 液态玻璃到底“液”在哪把视觉现象拆成可计算的层1.1 肉眼看到的那层“玻璃”其实是四层叠加很多人第一次看到这种效果第一反应是“高斯模糊加个圆角”。我一开始也这么想结果做出来的东西像一块塑料贴纸。后来把放大 4 倍的截图逐像素对着看才把它拆清楚它至少有四个可独立计算的成分在同时起作用。第一层是折射。玻璃是凸透镜透过边缘看背景会被“掰弯”而且越靠近边缘弯得越狠中心几乎不弯。这一层决定了它像不像“玻璃”而不是像“毛玻璃”。第二层是色散。折射率对不同波长不一样所以边缘会析出极细的一圈青蓝色和橙色。这个细节 90% 的仿制品都漏了但恰恰是它让画面显得“贵”。第三层是模糊。背景要被模糊掉但注意——模糊半径跟折射是两套逻辑。模糊是均匀的折射是边缘强化的。很多人只做模糊不做折射就永远出不来那种“摸得到厚度”的感觉。第四层是边缘高光与内阴影。左上角一圈亮线右下角一圈暗边模拟光源斜照。这层严格来说不是物理正确的但它是让元素“浮起来”的关键缺了它整个组件会贴在背景上。把这四层拆开之后实现路径就清楚了一张圆角矩形的距离场SDF决定几何法线决定折射方向和光照采样决定背景模糊通道分离决定色散。全部可以在一个片段着色器里一次算完不需要渲染多层再叠加。提示如果你的目标是“能用就行”的中低端方案可以把色散和高光砍掉只保留折射模糊视觉损失大概 30%性能收益接近一倍。1.2 为什么我没走 Android 原生渲染效果那条路Android 12 之后系统提供了现成的模糊和着色器接口Android 13 更是开放了运行时的片段着色器能力直接在 Compose 的图层上挂一个效果就能出图开发体验相当舒服。我最初也是这么干的Android 端两天就跑通了然后 iOS 端一行都跑不了——两边的渲染底座根本不是同一套。这里的取舍很现实你要么在 Android 用原生那套、iOS 用另一套写两份着色器、调两遍参数、维护两个视觉基线要么统一走 Compose Multiplatform 底层的 Skia 渲染管线共享同一段 SkSL 着色器代码和同一份参数表。我选了后者。理由有三个。一是视觉一致性双端必须做到截图对比肉眼无差否则设计验收根本过不去。二是参数复用折射强度、光照方向这些值在两边调起来完全一样改一次全端生效。三是长期可维护将来新增一个端比如桌面不用再写第三份。代价也有Skia 的着色器能力没有原生那么“新”某些高级特性得绕而且背景捕获这件事在 Compose 里需要一层桥接代码。但整体算下来我认为这笔交易是划算的。注意别指望用 Compose 的Modifier.blur()加简单圆角蒙版来糊弄。它只能模糊元素自身内容拿不到元素背后的画面做出来永远是“半透明”不是“玻璃”。2. 渲染底座怎么在 Compose 里把“背景像素”抓到手2.1 三层渲染接口的关系先理清楚想在着色器里处理背景前提是你得先有背景。Compose 的绘制链路从上层往底层数是这样的最上面是Modifier.drawBehind、drawWithContent这类声明式绘制节点中间是图层GraphicsLayer系统最底下是原生画布。只有沉到最底层你才能拿到任意位置的像素。这里有个容易混淆的点drawWithContent里的drawContext.canvas在共享代码里拿到的是 Compose 封装的画布它只暴露了drawRect、drawPath这类高层接口喂不了着色器。要往下走必须换成org.jetbrains.skia.Canvas也就是 Skia 的原生画布对象。所以整条链是先用图层记录把背景区域渲染成位图再把位图转成 Skia 的Image最后把这张Image作为 uniform 传给运行时着色器。三步缺一不可而且第二步在双端需要不同的实现这是唯一必须写expect/actual的地方。2.2 用图层记录 位图转换拿到背景快照Compose Multiplatform 的较新版本提供了rememberGraphicsLayer()可以把一段绘制内容录制成图层再调用toImageBitmap()导出成位图。这一步在共享代码里就能写不需要分端。val bgLayer rememberGraphicsLayer() Box(Modifier.fillMaxSize()) { // 背景内容照片、渐变、列表都行 BackdropContent() Box( Modifier .drawWithContent { // 先把背景录进图层 bgLayer.record { thisdrawWithContent.drawContent() } drawLayer(bgLayer) } ) { GlassCard() // 玻璃组件叠在上面 } }拿到ImageBitmap之后需要转成 Skia 的Image。双端的转换代码不一样// commonMain expect fun ImageBitmap.toSkiaImage(): org.jetbrains.skia.Image // androidMain actual fun ImageBitmap.toSkiaImage(): org.jetbrains.skia.Image org.jetbrains.skia.Image.makeFromBitmap(asAndroidBitmap().asSkiaBitmap()) // iosMain actual fun ImageBitmap.toSkiaImage(): org.jetbrains.skia.Image org.jetbrains.skia.Image.makeFromBitmap(asSkiaBitmap())asSkiaBitmap()是 Skiko 提供的扩展Android 端需要先asAndroidBitmap()再转。不同版本里这个扩展所在的包名可能有细微差别导入时如果 IDE 不认全局搜一下asSkiaBitmap就能找到。这一步有个大坑必须提前说不要每一帧都抓背景位图。图层录制加位图导出是相当重的操作每帧做一次中端机直接掉到 20 帧以下。正确做法是只在背景发生变化时重抓比如背景是静态图片、或者列表滚动停止之后。如果背景是视频或者实时动效就得降级成低频抓取比如每 6 帧一次加上插值过渡。提示背景抓取的区域不用是整个屏幕只要比玻璃组件大一圈留出折射采样余量就够。抓取面积减半开销大概能降到三分之一。3. 核心着色器折射、色散、高光一次算完3.1 圆角矩形距离场与法线推导整个着色器的地基是一个函数给任意一点返回它到圆角矩形边缘的有符号距离SDF。距离为负代表在内部为正代表在外部。有了距离场圆角、边缘强化、外扩阴影全部迎刃而解。圆角矩形 SDF 的标准写法是先把点平移到中心再对四个象限取绝对值然后减去内缩后的半尺寸最后求长度。这段代码很短但很容易写错我第一版就因为忘了减圆角半径导致四个角变成了直角。float sdRoundBox(float2 p, float2 halfSize, float r) { float2 q abs(p) - halfSize r; return length(max(q, 0.0)) min(max(q.x, q.y), 0.0) - r; }法线怎么来对距离场求梯度就行。数值方法很简单在 x 和 y 方向各取一个微小偏移算出两个方向的偏导归一化之后就是法线向量。这个法线就是后面折射方向和高光计算的输入它的精度直接决定了边缘的细腻程度。float2 gradSDF(float2 p) { float e 0.5; float dx sdRoundBox(p float2(e, 0), halfSize, r) - sdRoundBox(p - float2(e, 0), halfSize, r); float dy sdRoundBox(p float2(0, e), halfSize, r) - sdRoundBox(p - float2(0, e), halfSize, r); return normalize(float2(dx, dy)); }注意偏移量e别取太大1 像素以内最合适。取大了法线会被“抹平”边缘的弧度就出不来取太小又会因为浮点精度产生噪点尤其在高分屏上特别明显。3.2 折射偏移与 RGB 通道分离有了法线和距离场折射就好算了。核心思路是距离边缘越近采样点往内偏移得越多。这个偏移量用一个“边缘权重”来调制权重可以取距离场的负值经过指数衰减也可以简单地用smoothstep做一个窄带。我实测下来比较好用的公式是偏移量 折射强度 × exp(-|距离| / 衰减宽度) × 法线方向。指数衰减的好处是过渡非常自然中心几乎零偏移边缘迅速增强符合真实凸透镜的观感。衰减宽度取组件短边的 8% 到 12% 之间视觉效果最舒服。色散的做法是把偏移量按波长缩放分别采样红、绿、蓝三个通道。红光的偏移量最小蓝光最大差值就是色散强度。这个差值不能大超过 1.5 像素就开始“重影”了看起来像没对焦。half4 refractSample(float2 p, float2 n, float d) { float w exp(-abs(d) / refractFalloff); float2 base p n * w * refractStrength; float2 offR base - n * w * dispersion; float2 offG base; float2 offB base n * w * dispersion; half r uContent.eval(offR).r; half g uContent.eval(offG).g; half b uContent.eval(offB).b; half a uContent.eval(offG).a; return half4(r, g, b, a); }模糊同样可以在这个采样阶段顺手做掉在偏移后的坐标周围再采一圈点加权平均。但采样次数是性能的命门9 次采样3×3 网格已经能出不错的效果再往上性价比骤降。我最后用的是“偏移采样 单次预模糊纹理”的组合预模糊在抓取背景时用 Skia 的高斯滤波做一次着色器里只做偏移采样次数压到 3 次帧率立刻回到 60。3.3 边缘高光与内阴影的取巧算法高光这一层我试过物理模拟假设一个点光源算法线与视线反射效果确实好但参数极难调稍微挪一下位置整个观感就崩。最后换了个“经验公式”反而更稳。做法是把法线方向和固定的光照方向做点积结果映射到 0 到 1再用距离场做一个窄带遮罩只保留边缘 2 到 3 像素的范围两者相乘就是高光强度。内阴影同理把光照方向反过来再做一次乘上更宽一点的窄带。float spec max(dot(n, normalize(float2(-0.6, -0.8))), 0.0); float edge smoothstep(0.0, -edgeWidth, d); // 只在边缘附近有值 half3 highlight half3(1.0) * spec * edge * specIntensity; float inner max(dot(n, normalize(float2(0.6, 0.8))), 0.0); half3 shadow half3(0.0) * inner * edge * shadowIntensity;最后把折射结果、高光、阴影按叠加方式合成再乘上一个统一的透明度。这套算法连光照方向都不用做物理校准直接取左上角入射视觉上就“对”了因为人眼对这类效果本来就宽容。4. 参数调优一份能直接抄的取值表4.1 各参数的物理含义与建议区间调参是这个效果里最耗时的环节我大概花了整整两天在反复微调。下面这张表是三个不同尺寸组件实测下来最稳的一组基线可以直接拿去用再微调。参数含义小尺寸胶囊/图标按钮中尺寸卡片大尺寸面板过大表现refractStrength边缘折射位移量像素6 到 810 到 1416 到 22边缘出现明显“撕裂”refractFalloff折射衰减宽度短边占比0.100.100.12中心也被掰弯像鱼眼dispersionRGB 通道偏移差值0.60.81.0边缘出现三色彩边blurRadius预模糊半径像素81218背景彻底糊成一片色块specIntensity高光强度0.550.450.40边缘发白像描了个边edgeWidth高光窄带宽度像素1.52.02.5高光变成整块亮面shadowIntensity内阴影强度0.200.180.15下半部分整体发灰这张表有个反直觉的地方大尺寸组件的折射强度反而要更大但高光要更弱。原因是尺寸越大边缘占整体面积的比例越小如果折射强度不拉高中心区域就完全看不出折射而高光窄带在大组件上如果太强会形成一条很突兀的亮边反而破坏通透感。4.2 参数不是常量应该跟着尺寸动态算一开始我把所有参数写死结果发现同一套值在胶囊按钮上刚好放到卡片上就完全不对。后来改成按组件短边做归一化问题立刻解决。fun GlassParams.fromSize(w: Float, h: Float): GlassParams { val short min(w, h) return copy( refractStrength short * 0.045f, refractFalloff 0.10f, blurRadius short * 0.06f, edgeWidth clamp(short * 0.008f, 1f, 3f), ) }系数 0.045 和 0.06 是我在十几个尺寸上试出来的经验值。你会发现它们本质上是“按比例说话”跟字体缩放、密度无关因为这里处理的都是物理像素。提示屏幕密度会影响观感。同样的物理像素值在低密度屏上看着更“细腻”在高密度屏上更“糊”。如果不做密度归一化双端截图对比会打架建议把折射强度和模糊半径都乘上density / 2f做校正。5. 让玻璃“液”起来弹簧参数与形变融合5.1 弹簧动画的三个参数决定了“质感”静态的玻璃只是玻璃动起来才有“液态”感。这里的关键是别用线性插值一定要用弹簧。线性插值出来的动效又干又硬完全没有那种“黏稠、有回弹、带延迟”的质感。Compose 的spring有三个参数阻尼比、刚度、初始速度。阻尼比小于 1 会有回弹等于 1 是临界阻尼最快且不震荡大于 1 会缓慢收敛。这三个值的组合直接决定了它是“果冻”还是“水面”。我实测下来按下和抬起的反馈用dampingRatio 0.62f、stiffness 520f出来的效果是轻微过冲一次然后迅速稳定非常接近系统级的手感。而布局位置的变化比如列表里卡片移动用dampingRatio 0.85f、stiffness 320f更稳一点不抢戏。val pressScale animateFloatAsState( targetValue if (pressed) 0.94f else 1f, animationSpec spring( dampingRatio 0.62f, stiffness 520f ) )这里有个细节必须说缩放的时候不能只缩视图着色器的 SDF 参数也得跟着缩。如果只做graphicsLayer缩放着色器里算出来的边缘宽度会被一起放大看起来就像“玻璃变厚了”。正确做法是把当前尺寸实时传给着色器让 SDF 永远基于真实的逻辑尺寸计算。5.2 融合形变两个玻璃靠近时为什么不能“穿模”只要是做过这个效果的人一定会遇到“两个玻璃块靠近时互相穿透”的问题。真实的液态玻璃是彼此排斥又互相吸引的靠近时会有一层薄薄的连接而不是简单叠加。实现思路是距离场融合也就是常说的 metaball。具体做法是把两个圆角矩形的 SDF 取最小值再减去一个平滑量得到一个合并后的隐式曲面。平滑量控制“粘连”的强度取 0 就是硬碰硬取大了会变成一条连接管道。float smoothMin(float a, float b, float k) { float h clamp(0.5 0.5 * (b - a) / k, 0.0, 1.0); return mix(b, a, h) - k * h * (1.0 - h); }这个方案只适合玻璃数量少且距离明确的场景比如底部导航栏的几个按钮、浮动的操作胶囊。如果玻璃数量多、位置动态变化大融合计算的开销会迅速上升我的做法是只对距离小于 1.5 倍短边的一对做融合其余的按普通渲染走。注意融合后的形状内部不要再做折射否则接缝处会出现一条明显的光带看着像裂了。正确做法是融合只影响轮廓和高光折射采样全部按合并后的中心点算。6. 双端差异与性能实测数据6.1 Android 和 iOS 上到底差在哪虽然共享了着色器代码但两端的表现并不是完全一致的差异主要集中在三个地方。第一是精度。片段着色器里我一开始用的是最高精度浮点在 iOS 上跑得很欢Android 中低端机型上直接编译失败或者出图全黑。后来改成中等精度加局部高精度混合稳定了。这个坑很典型着色器编译失败在运行时只会表现为“这块区域不显示”日志里不一定有明确报错排查时很容易怀疑人生。第二是纹理采样方式。两端的纹理坐标系原点不一样Android 的位图原点在左上而 Skia 的Image在某些后端下是左下。我第一版在 iOS 上折射方向整个是反的背景像被“顶”出去而不是“吸”进来。后来统一在着色器里做了一次 Y 翻转才对齐。第三是离屏图层的内存行为。大尺寸组件在高分屏上抓背景位图内存占用非常可观。iOS 的图形内存回收更激进长时间滚动列表容易出现位图被回收导致白屏Android 则更容易一路涨上去直到 OOM。我的处理是两个方向都做iOS 侧每次抓取前检查并重建Android 侧加一个固定大小的位图复用池。6.2 性能预算哪些地方最烧钱怎么降下面这组数据是我在一台中端机和一台旗舰机上实测的帧时间单位毫秒越低越好组件尺寸是 320×180 的卡片背景是一张静态照片。实现方案中端机帧时间旗舰机帧时间说明只做圆角 半透明3.11.8基线完全没有玻璃感加预模糊纹理5.42.6有了磨砂感但不像玻璃加单次折射采样7.23.4开始有厚度感加 3 次 RGB 分离采样10.84.9效果到位中端机已接近临界加 9 次模糊采样21.49.6中端机明显掉帧不建议每帧重抓背景位图34.0 以上15.0直接放弃必卡从表里能看出最重要的一个结论背景抓取的成本远大于着色器本身。只要把抓取频率控制住着色器怎么写都不会太离谱。中端机上 10 毫秒左右的帧时间是可以接受的配合 60 帧预算还有余量前提是图层数量少、玻璃组件不超过 3 个同屏。降级策略我是这么排的按优先级往下砍玻璃组件超过 3 个时非焦点组件降级为纯模糊无折射设备被判定为低端通过帧时间自适应判断时直接关掉色散和高光滚动过程中暂停背景重抓滚动停止后 200 毫秒再刷新组件尺寸小于 60 像素时比如小图标直接用预渲染的静态图替代实时着色器第 4 条特别值得一提。小尺寸组件上折射和色散的视觉收益极低但着色器开销一点不少。烘焙成一张带九宫格拉伸的静态图肉眼几乎看不出差别性能收益却是数量级的。7. 常见问题与排查实录7.1 症状到原因速查表症状最可能的原因排查动作玻璃区域全黑或全透明着色器编译失败运行时静默降级打印编译日志逐段注释代码二分定位折射方向反了背景像被推开纹理 Y 轴未翻转在采样坐标上乘float2(1, -1)并平移回正区间边缘出现彩色噪点法线精度不足e取值过小把e调到 0.5 到 1.0 之间圆角处有一条硬边SDF 忘记减圆角半径检查sdRoundBox的返回值缩放时边缘变粗SDF 参数没有跟随缩放把实时尺寸传进 uniform 而不是用固定值两只玻璃靠近出现光带融合后仍在内部做折射融合只作用于轮廓与高光滚动列表时偶发白屏位图被系统回收每次使用前检查有效性并重建高光位置随组件移动而偏移光照方向用屏幕坐标而非局部坐标光照方向在归一化局部空间里算7.2 几个只有真做过才会知道的坑第一个坑透明度别用图层整体 alpha。我最初把整个玻璃的透明度交给Modifier.alpha()处理结果玻璃内部的高光和外部的背景一起变淡看起来像“褪色”而不是“通透”。正确做法是在着色器内部对最终颜色做 alpha 混合背景采样永远保持不透明只让玻璃自身的叠加层带透明度。第二个坑抓背景时要把玻璃自己排除掉。如果抓取区域包含了玻璃组件本身就会形成反馈回路——玻璃折射了自己下一帧又折射这个结果画面会出现缓慢的“呼吸”式抖动非常诡异。我排查这个花了大半天最后发现是图层录制顺序写反了。第三个坑别在动画过程中改模糊半径。模糊半径是个“重参数”每变一次都会触发纹理重新采样如果跟着弹簧动画每帧变中端机上会看到明显的卡顿。模糊半径要么固定要么用离散的几档做切换绝不要做连续插值。第四个坑调试着色器别靠猜。把中间结果可视化出来——距离场直接输出成灰度图、法线输出成 RGB、边缘遮罩输出成黑白——一眼就能看出哪一步算错了。我现在的习惯是在着色器里留一个调试开关通过 uniform 切换输出模式出问题时直接切过去看比读代码快十倍。提示距离场可视化的时候记得做一次重映射因为原始距离值可能是任意范围直接输出会全白或者全黑。用d * 0.1 0.5之类的映射压到 0 到 1 之间再看。8. 组件封装让调用方完全不用管着色器8.1 对外只暴露一个 Modifier写着色器的人自己看得懂团队里其他人看不懂这套东西就没法落地。所以最后我把所有逻辑收进了一个Modifier.glassSurface()里调用方只需要传几个语义化的参数。fun Modifier.glassSurface( shape: CornerBasedShape RoundedCornerShape(24.dp), intensity: GlassIntensity GlassIntensity.Normal, tint: Color Color.White.copy(alpha 0.08f), content: Composable () - Unit ): ModifierGlassIntensity我做了三档Subtle、Normal、Vivid分别对应三组预设参数。这样设计稿上标注“强一点”的时候开发不用去翻参数表换个枚举就行。tint是玻璃本身的着色建议控制在 0.05 到 0.12 的透明度之间太浓就变成“有色塑料”了。内部实现上把所有 uniform 打包成一个数据类用remember缓存着色器对象只在参数真正变化时重建。这点很重要——运行时着色器对象的创建是有成本的如果每帧重建性能直接崩。8.2 着色器对象的缓存与生命周期RuntimeShaderEffect这类对象在 Skia 里是需要手动管理生命周期的。我在第一版里每帧new一个跑了两分钟内存曲线一路向上最后靠快照对比才定位到。正确的做法是把它挂在remember里跟着组件走组件销毁时自动释放。val effect remember(params) { RuntimeShaderEffect(GLASS_SKSL, main).apply { setUniform(uSize, floatArrayOf(w, h)) setUniform(uRadius, radiusPx) // 其余参数一次性灌入 } }remember的 key 用整个参数对象别用里面的单个字段。用单个字段的话任何一个字段变了都会重建整个对象反而不如整个对象做 key 来得干净——反正参数对象是 data classequals 是值比较。注意着色器源码字符串别放在 Composable 里拼接。有人图省事用字符串模板动态生成 SkSL比如把采样次数拼进去每次重组都会产生一个新字符串编译缓存直接失效。所有变体都应该写成常量字符串用 when 分支选。9. 我个人的几条实践经验这套东西做完之后我在三个项目里复用了一遍每次都会微调。有几点体会是通用的跟具体项目无关。先做减法再做加法。不要一上来就把折射、色散、高光、融合全堆上去。先用纯模糊跑通链路确认背景抓取和着色器管线没问题再一层一层加。我见过太多人卡在第一层就是因为想一次做完所有效果结果任何一个环节出错都无法定位。参数一定要可视化调试。我后来专门做了一个调试面板把折射强度、衰减、色散、高光强度、模糊半径都做成滑块可以实时拖动看效果。这个面板只花了一个小时但省下来的调参时间至少两天。做视觉相关的东西不要在代码里改数字然后重新编译那是纯浪费生命。验收标准要提前定。这种“质感类”效果最难的是没有客观标准设计说“不够透”你说“已经很像了”最后扯不清。我的做法是提前约定三条硬指标双端截图相似度、中端机帧时间上限、极端背景纯黑、纯白、高对比照片下的表现。三条都过了就算交付避免无穷无尽的微调。给降级留好后路。无论你优化得多好总有一批设备跑不动。所以从第一版开始就应该把“降级模式”当成正式功能来做而不是事后补丁。我现在的做法是加一个全局开关运行时根据帧时间自动切换档位用户完全无感。最后分享一个小技巧如果你觉得折射的观感总是“差一口气”试着把衰减曲线从指数换成pow(1 - t, 3)这种三次方曲线。指数衰减在中心附近太平缺乏“骤然收住”的力度三次方曲线在中心是线性增长、到边缘突然收尾视觉上更有“玻璃收边”的味道。这个改动只改一行但效果提升非常直观值得一试。