之前的方法主要是靠 backdrop-filter 折射背后的内容,这在 Safari 和 Firefox 上不兼容而无法实现。AAVE 这边提出另一种实现方法:主动把被折射的内容放进 Glass 组件渲染范围里,然后 SVG filter 只处理这份内容本身,而不是去采样真是的背景内容。
之前的方法主要是靠 backdrop-filter 折射背后的内容,这在 Safari 和 Firefox 上不兼容而无法实现。AAVE 这边提出另一种实现方法:主动把被折射的内容放进 Glass 组件渲染范围里,然后 SVG filter 只处理这份内容本身,而不是去采样真是的背景内容。
Liquid Glass 是 Apple 推出的全新设计语言,围绕光线在曲面玻璃中的弯曲物理特性构建。文章以此为起点,描述 Aave 团队如何受其启发,开发跨浏览器的网页玻璃效果,并构建了一系列配套组件。
Aave Glass 是 Aave 团队为移动应用开发的玻璃效果版本,已成为 App 界面的核心体验元素。它通过折射真实渲染内容实现深度与触感,目前正被扩展到网页,支持开关、滑块等多种交互组件的无缝使用。
早期玻璃效果演示大多仅在 Chromium 浏览器中运行,依赖 SVG backdrop-filter 或实验性 HTML-in-Canvas API,无法兼容 Safari 和 Firefox。Aave 的技术则在包括 Chromium 在内的所有现代浏览器中均可正常工作,无需标志或回退方案。
本文中 Safari 是除 Chromium 外重点支持的浏览器,作者的技术方案可直接在其桌面与 iOS 版本运行,无需开关或降级方案。文章详细列举了 Safari 的多项限制,包括 SVG 滤镜 ID 缓存导致画面冻结、源图形尺寸上限、以及无法对实时应用 SVG 滤镜等,并给出了对应的绕过方法。
文章对比表格显示,作者的自研玻璃效果能在 Firefox 中正常工作,而基于 SVG backdrop-filter 或 HTML-in-Canvas API 的方案均不支持 Firefox。
作者使用 SVG 的 feDisplacementMap 滤镜原语实现玻璃折射,输入为实时渲染的 DOM 内容与动态生成的位移贴图,内容像素本身被移动,因此文字仍可选、链接仍可点击。位移贴图由玻璃形状实时生成,其红绿通道控制水平与垂直偏移。
文章提到社区早期方案使用 SVG backdrop-filter,仅在 Chromium 中有效,Safari 与 Firefox 均不支持。作者最终放弃该方案,转而采用自研的跨浏览器技术。
该实验性 API 被社区用于实现玻璃效果,但需开启 flag 且仅在 Chromium 可用,Safari 与 Firefox 均不支持。作者在构建前已测试过此方案,最终选择不依赖它的跨浏览器实现。
本文中 WebGL 用于在无法应用 SVG 滤镜的场景下实现玻璃折射效果,例如绘制 QR 码的 canvas 或 Safari 下的直播视频。它接收与 DOM 版本相同的 displacement map,通过 shader 对像素进行弯曲处理,确保效果在不同渲染介质上一致运行,同时保持帧率稳定。
本文玻璃效果的核心是 SVG 滤镜原语 feDisplacementMap,它接收实时渲染的内容和动态生成的位移贴图,根据贴图红绿通道决定像素偏移方向,从而模拟光线穿过曲面玻璃的弯曲。该原语直接作用于真实 DOM 像素,使内容保持可选可点击,仅镜头区域发生折射,是跨浏览器实现的基础技术。
文中指出 WebKit 存在长期限制:它将视频内容直接在 GPU 合成,不把像素交给滤镜管线,导致 Safari 无法使用 SVG 滤镜。作者因此在视频播放器组件中改用 WebGL 实现相同折射效果。
Apple 在去年六月 WWDC 上发布了 Liquid Glass 设计语言,核心是模拟光线透过曲面玻璃的物理折射效果。这一发布迅速激发行业兴趣,Aave 团队受其启发,先在移动应用中实现自家版本,随后扩展到网页平台。
WWDC 是 Apple 发布 Liquid Glass 设计语言的年度开发者大会。去年六月 Apple 在会上推出该语言后,迅速引发设计师和开发者对玻璃效果的广泛实验,Aave 团队也由此开始网页版实现工作。
Aave 团队先在 iOS 和 Android 应用中推出自家玻璃效果,随后聚焦网页跨浏览器实现。他们构建了包含开关、滑块、切换组和视频播放器等在内的组件家族,使网页界面获得与移动端一致的立体感和触觉反馈。
文章结尾以 Aave Labs 招聘结尾,强调团队注重常人忽略的设计细节,并邀请有相同追求的人加入,共同扩展玻璃组件家族。这体现了 Aave Labs 在将移动端 Aave Glass 体验移植到 Web 时的技术投入与产品理念。
可左右滑动查看