先看一个反常识的画面：一块看起来像玻璃的东西，你拖它一下，它居然会像果冻一样抖。不是动画师手K的，也不是视频后期做的，是浏览器里实时跑出来的。

做这件事的人叫 Giuseppe Recupero，在网上更常被叫作 Jae。他有一整个作品集，都是在浏览器里用 WebGL 直接写出来的着色器实验，方向集中在色散、吸收和次表面散射这类效果上。这次这个实验，玩的是 2D 和 3D 图形之间的那条边界——当一层布料模拟去控制一块折射材质的表面，会发生什么。

打开网易新闻 查看精彩图片

玻璃和果冻，差的是哪一步

按素材里的描述，最终呈现出来的感觉就是"玻璃做的果冻"。这个效果不是单一技术堆出来的，而是几样东西叠在一起：一个光线步进（ray-marched）的立方体、色散、以及实时折射。布料模拟负责让表面动起来，折射材质负责让光在动的时候跟着变，两者一叠加，静态的玻璃就有了软体的手感。

这里的关键在于"实时"。它不是渲染好一段视频循环播放，而是你鼠标悬停、拖动的时候，界面会当场给出反应。换句话说，你看到的每一次抖动，都是浏览器在那一瞬间算出来的。

Jae 最近还给他的玻璃实验加了软体物理。具体表现是：那些小圆点会随着你转动骰子而移动，转完之后再慢慢回到原位。整个过程同样是在浏览器里实时运行的。

他还在玩一种叫 code golfing 的东西

除了做视觉效果，Jae 还练 code golfing——一种编码挑战，目标是把一段代码写得尽可能短。他把很多着色器实验分享在 FragCoord 上，这是一个在线着色器分享平台，由 XorDev 创建，定位是 Shadertoy 之外的另一个选择。

顺着这条线还能摸到更多东西。如果你想学着色器编程，XorDev 最近把他自己的 70 多个教程开放给了所有人。这些教程更像深度解析，而不是一步一步的教学，讲的是着色器背后的数学和技术，从噪声、光线步进到分形等等。同时他也分享了一些可以直接拿来用的着色器，其中就包括做玻璃效果的。

如果对创意编程感兴趣，素材里还提到另外两个项目可以看看：

  • mesq 的 jiggly jelly dessert（会抖的果冻甜点）
  • ScottieFox 的水焦散效果

为什么这件事值得多看一眼

把布料模拟和折射材质接在一起，听起来像是两个不太搭的东西。布料模拟通常服务于衣服、旗帜这类软性物体，折射材质则属于光学那一挂。Jae 这个实验有意思的地方，是他没有去追求"更真实的玻璃"，而是反过来问：如果玻璃的表面由布料来驱动，它会变成什么？

答案就是那块会抖的果冻。它既不是纯粹的 2D，也不是标准的 3D，而是卡在中间的一种状态。素材里对这个实验的定位也是这么说的——探索 2D 和 3D 图形之间的边界。

另一个值得注意的点是门槛。这些东西全部跑在浏览器里，不需要装引擎，不需要配环境。你打开链接，悬停、拖动，就能直接感受到它在实时响应。对于想入门着色器的人来说，这种"所见即所得"的反馈，比看十页公式要直观得多。

至于想自己动手的，路径也摆在那：FragCoord 上有 Jae 的实验可以翻，XorDev 的 70 多个教程和现成着色器也已经开放。从噪声、光线步进到分形，再到玻璃效果，该有的入口基本都有了。

说到底，这个实验最让人愣一下的地方，不是技术有多复杂，而是它把两个看起来不相关的东西缝在了一起，还缝得挺自然。玻璃的质感，果冻的动态，浏览器里实时跑——三件事凑一块，就成了你拖一下它会抖的那块东西。