主要观点总结
本文主要介绍了iOS 26系统中的液态玻璃效果的技术实现细节，包括bug、设计风格和着色器的使用等。
关键观点总结
关键观点1: 液态玻璃效果成为iOS 26的热度标签。
设计风格大变和beta1版本的bug带来了毛坯感，使得液态玻璃效果冲上热搜。
关键观点2: 液态玻璃效果的实现不仅仅是模糊图层。
通过自定义着色器实现，涉及到模糊半径的计算、方向采样的循环、质量参数的设置等。
关键观点3: 着色器的关键部分是边缘液体感的处理。
通过创建扭曲的新坐标uv2，结合位移贴图icon.y和smoothstep函数，实现视觉上的折射效果。
关键观点4: 实际实现中还有其他调整和优化的可能性。
比如调整扭曲效果的范围和强度，以及根据实际需求调整液态放大的效果。
关键观点5: 该效果实现具有挑战性。
在其他平台或框架上实现类似效果的难度较大，涉及能耗控制和渲染成本控制的问题。
正文
vec4 color = texture(tex, uv);
获取当前像素
uv
处的原始颜色
for (float d = 0.0; d < PI; d += PI / direction)
: 外层循环，确定采样的方向，从 0 到 180 度进行迭代。
for (float i = 1.0 / quality; i <= 1.0; i += 1.0 / quality)
内层循环，沿着当前方向
d
进行多次采样，
quality
越高，采样点越密集
color += texture(tex, uv + vec2(cos(d), sin(d)) * radius * i);
在当前像素周围的圆形区域内进行采样，
vec2(cos(d), sin(d))
计算出方向向量，
radius * i
确定了沿该方向的采样距离，通过累加这些采样点的颜色，实际上是在对周围的像素颜色进行平均
color /= (quality * direction + 1.0);
将累加的颜色值除以总采样次数（以及原始颜色），得到平均颜色，这个平均过程就是实现模糊效果的过程
vec4 LiquidGlass(sampler2D tex, vec2 uv, float direction, float quality, float size) {
vec2 radius = size / R;
vec4 color = texture(tex, uv);
for (float d = 0.0; d < PI; d += PI / direction) {
for (float i = 1.0 / quality; i <= 1.0; i += 1.0 / quality) {
color += texture(tex, uv + vec2(cos(d), sin(d)) * radius * i);
}
}
color /= (quality * direction + 1.0); // +1.0 for the initial color
return color;
}
而在着色器的入口，它会将所有部分组合起来渲染，其中关键在于下方代码，这是实现边缘液体感的处理部分：
#define S smoothstep
vec2 uv2 = uv - uMouse.xy / R;
uv2 *= 0.5 + 0.5 * S(0.5, 1.0, icon.y);
uv2 += uMouse.xy / R;
它不是直接用
uv
去采样纹理，而是创建了一个被扭曲的新坐标
uv2
，
icon.y
是前面生成的位移贴图，
smoothstep
