#优质博文 #前端 #LiquidGlass #CSS #svg #demo #webgl #course
超级棒的交互式教程，并且技术解析的也很全面，内含非常多 demo，玩明白了，非常值得一看。
Liquid Glass in the Browser: Refraction with CSS and SVG

AI 摘要：本文通过物理折射原理（Snell 定律）、几何曲面函数、向量场计算以及 SVG displacement map，逐步构建出类似 Apple Liquid Glass 的玻璃折射与高光效果。作者在 Chrome 中实现了交互式演示，并展示了如何组合折射与高光生成 UI 组件（如 magnifying glass、searchbox、switch、slider、music player）。该方法目前仍为实验性质，仅限 Chromium 引擎支持。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 引言与目标
• Apple 在 WWDC 2025 引入 Liquid Glass 特效，形式上像弯曲玻璃产生的真实折射。
• 文章聚焦于折射物理与 CSS + SVG 技术结合，打造近似效果，而非完全复刻。

2. 折射原理（Refraction）
• 光在不同介质中的传播方向变化由 Snell 定律描述。
• 光线可能发生直线穿过、偏折、或在特定条件下全反射。
• 本文限制简化：空气介质、玻璃折射率 1.5、单次折射、平行二维场景。

3. 表面函数（Surface Function）与曲面建模
• 使用数学函数描述玻璃表面（厚度与曲率变化）。
• 四种典型函数：凸圆（convex）、squircle、凹面（concave）、Lip 混合曲线。
• 借助导数计算表面法线，用于后续光线折射角度推导。

4. 光线模拟与向量场计算
• 通过 ray tracing 可视化不同表面对光线的影响。
• 总结规律：凸面内聚，凹面外推。
• 基于对称性，预计算半径上的位移值，旋转生成完整 displacement field。
• 向量归一化处理，便于映射到位图。

5. SVG Displacement Map 实现
• <feDisplacementMap /> 用红绿通道（X/Y 轴）编码位移。
• 位移向量场需转为位图像素值（Color Encoding）。
• scale 属性用于匹配实际像素位移最大值。
• 支持动画 scale 参数，使折射动态变化。

6. 高光效果（Specular Highlight）
• 在折射效果之上叠加 rim light 模拟玻璃边缘光泽。
• 通过 feBlend 合成折射图层与高光。
• 高光强度取决于表面法线与光源角度。

7. 在 UI 组件中的应用（Proof-of-Concept）
• Magnifying Glass：双 displacement map 模拟放大镜折射 + 阴影。
• Searchbox：背景折射 + 边缘高光。
• Switch：Lip 曲线导致中间收缩，边缘放大。
• Slider：凸曲面保持背景可读性，边缘折射。
• Music Player：近似 Apple Music Liquid Glass 效果，结合磁贴相册背景。

8. 限制与展望
• 仅 Chromium 支持 backdrop-filter 调用 SVG filter。
• 性能瓶颈：动态形变需重建 displacement map。
• 可作为 Electron 等环境下的实验性特效；非生产级实现。
• 未来方向：代码优化、开放源码、跨引擎兼容处理。

author kube