Web 上复刻 Apple 玻璃效果，参数可调
Andrew Prifer 开源了 Liquid DOM，一个基于 WebGPU 和实验性 HTML-in-Canvas API 的库，用于在 Web 上复现 Apple visionOS/iOS 26 的 Liquid Glass 视觉效果。它通过场景图的三层模型（Scene-Container-Glass/Html）实现光学合成，支持形状融合、折射（折射率默认 1.5）、色散（RGB 分离）、镜面高光等参数。必须使用 WebGPU 和 Chrome flag canvas-draw-element 才能完整运行。
把 Apple visionOS / iOS 26 的 Liquid Glass 视觉效果搬到 Web，基于 WebGPU + 实验性 HTML‑in‑Canvas API 的真正光学合成！ 这就是...
把 Apple visionOS / iOS 26 的 Liquid Glass 视觉效果搬到 Web，基于 WebGPU + 实验性 HTML‑in‑Canvas API 的真正光学合成！ 这就是 @AndrewPrifer 开源的「Liquid DOM」 github.com/AndrewPrifer/l… 技术前提 · 必须 WebGPU：渲染依赖 navigator.gpu · 必须 Chrome flag：chrome://flags/# canvas-draw-element，开启 WICG HTML‑in‑Canvas 才能把真实 DOM 元素当作纹理采样。没开 flag 玻璃壳能初始化，但底下的页面内容采不进来 · Three 集成必须用 Three 的 WebGPURenderer，不是 WebGLRenderer 核心抽象：场景图的三层模型 Scene ─┬─ Container ─┬─ Glass ── DOM │ └─ Group ├─ Html └─ Group · Container 是光学单元 · Glass 只是形状壳 · Html 是 DOM 纹理节点 · z 顺序语义巧妙 Container 的光学参数 参数被分了五组，每一组都对应一个真实光学概念，不是装饰： · 形状与融合：spacing、normalDivergenceBlendPower —— 控制 SDF 融合时法线方向的混合，决定桥接区域是"软糖"还是"硬边"。 · 模糊与位移：blur、bezelWidth、displacementFactor、displacementBlur —— bezel 是玻璃边缘的厚度带，位移就是边缘对背景像素的偏移量，决定"棱镜感"。 · 折射：thickness、ior（玻璃折射率，默认 1.5）、contentIor、contentDepth、dispersion（色散，制造 RGB 分离的彩边）、surfaceProfile（convex 凸 / concave 凹 / lip 唇缘）。 · 镜面高光与反射：lightDirection、specularStrength、specularWidth（支持 'hairline' 这种 1 设备像素的细线）、oppositeSpecularStrength（对侧高光，模拟边缘双面反光）。 · 颜色与阴影：tint、shadowColor/Offset/Blur/Spread，语义对齐 CSS 但参与 GPU 合成。 Andrew Prifer @AndrewPrifer Dear frontend devs and UI designers. I bring you Liquid DOM, a complete and faithful implementation of Liquid Glass on the Web. - Shape morphing - All properties animatable - Dynamic refraction and reflection - Adaptive tint - Adaptive specular highlight - Dispersion - Full html integration - Super fast layout engine that works across Canvas and html - Pointer event handling - Framework and renderer-agnostic low level API - High level React API - Ootb @threejs and r3f integration And lots more. Read on for implementation details and demos. Your browser does not support the video tag. 🔗 View on Twitter 🔗 View Quoted Tweet 💬 1 🔄 0 ❤️ 0 👀 111 📊 1 ⚡