这是一款液态玻璃气泡效果,基于 Three.js + WebGL + Metaball 算法技术实现,模拟真实水泡的透明质感、光线折射与表面张力——气泡之间靠近时会自然"粘连融合",拖拽可实时交互,点击画布还能随机生成新气泡,整体观感极像 Apple 今年主推的 Liquid Glass 设计语言。折射效果是亮点所在,每个气泡边缘都有高光与内凹感,背景色透过气泡产生真实的弯曲扭变,而不是简单的毛玻璃模糊滤镜——这一点视觉层次要高出常规 CSS backdrop-filter 方案不少。
适用于品牌官网视觉大屏、创意活动 H5、产品发布页等追求高质感沉浸体验的场景,也适合作为 WebGL 粒子交互的学习参考案例。