Skip to content

2025-09-13-liquid-glass-in-the-browser-refraction-with-css-and-svg-—-kube.io.md

Latest commit

 

History

History
38 lines (30 loc) · 3.02 KB

2025-09-13-liquid-glass-in-the-browser-refraction-with-css-and-svg-—-kube.io.md

File metadata and controls

38 lines (30 loc) · 3.02 KB
Raw

Liquid Glass in the Browser: Refraction with CSS and SVG — kube.io

TL;DR

本文介绍使用CSS和SVG模拟苹果Liquid Glass折射效果，涵盖折射原理、玻璃表面建模、SVG位移图实现与高光效果，但需注意该方案仅限于Chrome环境，性能开销较大。

Summary

本文旨在介绍如何使用 CSS 和 SVG 实现类似苹果 Liquid Glass（液态玻璃）的折射效果，重点是通过折射计算和 SVG 位移图模拟玻璃材质的光学表现。以下是内容的总结：

一、折射原理基础

  • 折射定义：光从一种介质进入另一种介质时方向改变的现象，遵循斯涅尔定律（Snell–Descartes law），其公式为 ( n_1 \sin(\theta_1) = n_2 \sin(\theta_2) )，其中 ( n ) 为折射率，( \theta ) 为入射/折射角。
  • 简化假设：为简化计算，设环境介质折射率为 1（空气），玻璃折射率为 1.5，仅考虑单次折射、正交入射光线和 2D 圆形对象（无透视效果）。

二、玻璃表面建模

  • 表面函数：通过数学函数定义玻璃的厚度变化，例如使用凸圆形、凸方圆形（Squircle）、凹形和唇形（混合凸凹）四种函数，影响折射的光线行为。
  • 法线计算：通过导数近似法计算表面法线，用于确定光线折射方向。

三、位移矢量场与 SVG 位移图

  • 位移计算：基于折射原理预计算光线位移矢量，并归一化处理（最大值缩放至 1），确保对称性以减少计算量。
  • SVG 位移图实现：
    • 使用 <feDisplacementMap> 元素，将位移矢量转换为 RGB 图像（红绿通道代表 X/Y 轴位移，蓝通道忽略）。
    • 位移范围受 8 位通道限制（-128 至 127 像素），通过 scale 属性缩放至实际位移值。
    • 支持动画效果（如调整 scale）以动态控制折射强度。

四、高光效果与组件集成

  • 高光模拟：添加镜面高光（rim light effect），通过表面法线与固定光源方向的角度控制亮度，增强真实感。
  • 组件示例：
    • 包括放大镜、搜索框、开关、滑块和音乐播放器等 UI 元素，使用凸或唇形边框折射背景。
    • 依赖 backdrop-filter 实现效果，但仅 Chrome 浏览器支持（因 SVG 滤镜作为 backdrop-filter 的特性未标准化）。

五、局限性与注意事项

  • 浏览器兼容性：目前仅 Chrome 支持完整效果（SVG 滤镜用于 backdrop-filter），其他浏览器需降级处理（如使用模糊效果模拟）。
  • 性能开销：动态调整形状或大小需重建位移图，计算成本较高，仅适合实验性应用。
  • 扩展性：代码需优化后才考虑开源，建议用于 Chromium 环境（如 Electron）。

六、总结

本文提供了从光学原理到前端实现的完整流程，通过物理计算和 SVG 技术近似 Liquid Glass 效果，但受限于浏览器支持，实际应用需谨慎评估兼容性和性能。