实时WebGL着色器打造的触感果冻玻璃UI

浏览器里跑出的“果冻玻璃”正在重新定义实时图形交互的边界，而它背后的技术栈和创作者生态，比这个效果本身更值得关注。

Giuseppe Recupero，网上更常被称为 Jae，用 WebGL 直接在浏览器中构建了一系列着色器实验，核心聚焦于 dispersion（色散）、absorption（吸收）和 subsurface scattering（次表面散射）这几类光学现象。他最新的作品把 cloth simulation（布料模拟）用来驱动一个折射材质的表面，再叠加 ray-marched cube（光线步进立方体）、色散和实时折射，最终呈现出一种“玻璃做的果冻”的质感。这不是一个预渲染的视频，而是打开链接就能在浏览器里实时拖拽、悬停、交互的东西。

这个实验真正在做的，是试探 2D 与 3D 图形之间的那条边界——当布料模拟控制了一个折射材质的表面，你看到的到底是二维的着色器技巧，还是三维的物理模拟？

技术拆解：为什么“果冻玻璃”不是一个简单的视觉噱头

Ray marching 是这套效果的核心渲染手段之一。与传统的 rasterization（光栅化）不同，ray marching 通过逐步推进光线来求解场景中物体的交点，特别适合渲染 SDF（Signed Distance Field，有符号距离场）定义的几何体。Jae 用 ray-marched cube 作为基础几何，意味着这个立方体的表面不是由顶点网格定义的，而是由数学函数实时计算的。这给了他在着色器内部自由变形、扭曲、折射的能力。

Dispersion（色散）模拟的是不同波长的光在折射时偏折角度不同的现象——现实中棱镜把白光分解成彩虹就是这个原理。在着色器里实现色散，意味着对 R、G、B 三个通道分别用不同的 index of refraction（折射率）进行采样，产生色边。Absorption 则模拟光穿过介质时被部分吸收的效果，通常用 Beer-Lambert 定律 来近似，让玻璃厚的地方颜色更深、更饱和。Subsurface scattering 模拟的是光进入半透明材质后在内部分散再射出的现象——皮肤、牛奶、玉石、果冻都有这种特征。

这三者叠加在一起，再加上布料模拟驱动的表面形变，才产生了“玻璃果冻”的视觉感受。单独拿出任何一个技术都不新鲜，但把它们全部塞进一个浏览器里实时运行，并且保持交互帧率，这是工程上的硬功夫。

软体物理的加入：从“好看”到“好摸”

Jae 最近给玻璃实验加入了 soft-body physics（软体物理）。具体表现是：当你旋转那个骰子形状的物体时，表面上的小点会跟着移动，然后回弹到原位。这个细节看似微小，但它把交互从“视觉反馈”推进到了“触觉暗示”的层面。

用户不是在“看”一个效果，而是在“摸”一个东西——尽管鼠标和触控板并没有力反馈，但视觉上的弹性回弹已经足够让大脑补全触觉预期。

这对游戏 UI、产品展示页、交互式艺术装置都有直接启示。传统的 Web UI 交互是离散的：点击、悬停、滚动。而 Jae 的实验展示了一种连续、物理驱动的交互范式——界面元素有质量、有弹性、有惯性。如果这种交互方式被引入到实际的 Web 产品中，用户对界面的感知会从“操作控件”变成“触碰物体”。

FragCoord 与代码高尔夫：一个正在成形的着色器社区

Jae 把大量着色器实验分享在 FragCoord 上。这是一个由 XorDev 创建的在线着色器分享平台，定位是 Shadertoy 的替代品。Shadertoy 长期以来是这个领域的默认平台，但它的社区氛围、功能迭代和开放性一直有争议。FragCoord 的出现意味着着色器创作者开始有了第二个选择。

Jae 还练习 code golfing——一种把代码写到尽可能短的编程挑战。在着色器领域，code golfing 不只是炫技，它迫使创作者深入理解数学本质，因为每一个字符都占用宝贵的 GPU 周期和代码空间。这种实践反过来会提升代码效率，而效率在实时渲染中就是一切。

XorDev 最近公开了超过 70 个着色器教程，定位不是“手把手入门”，而是 deep dives——深入讲解着色器背后的数学和技术，覆盖 noise（噪声）、ray marching、fractals（分形）等主题。他还分享了一些即用型着色器，包括玻璃效果。这意味着一个完整的学习路径正在形成：从教程理解原理，从 FragCoord 获取灵感，从 code golfing 锤炼效率，最终产出自己的实验。

这对行业意味着什么

对游戏开发者来说，这套技术栈的启示是直接的。WebGL 已经足够成熟，可以在浏览器中实时渲染带有色散、吸收、次表面散射的折射材质，并且支持物理驱动的交互。这意味着网页端的游戏 Demo、产品配置器、交互式广告可以做到几年前只有原生引擎才能实现的视觉效果。

对技术美术和着色器程序员来说，FragCoord 的崛起和 XorDev 的教程公开，降低了进入实时图形编程的门槛。过去学习着色器往往需要啃大量数学教材和零散的博客文章，现在有了系统化的 deep dive 内容和活跃的分享社区。

对交互设计师来说，Jae 的软体物理实验提出了一个问题：当界面元素有了物理属性，交互设计的原则是否需要重写？Fitts 定律、反应时间、反馈延迟这些传统 HCI 指标，在物理驱动的界面中可能需要新的补充维度——比如“弹性感知”、“质量感”、“惯性预期”。

更多值得一看的实验

如果你对 creative coding 感兴趣，原文还提到了另外两个项目：mesq 的 jiggly jelly dessert 和 ScottieFox 的 water caustics。前者聚焦于果冻质感的抖动，后者专注于水面焦散——光穿过水面后在底部形成的光斑图案。这两个方向和 Jae 的玻璃实验形成了互补：一个偏向软体形变，一个偏向光学模拟。

所有这些实验的共同点是：它们都运行在浏览器里，都基于 WebGL 着色器，都可以实时交互。这不是未来趋势，这是正在发生的事。