我朋友发来链接时特意加了句：“用浏览器打开，别用手机，烫手。”当时还觉得玄乎，结果点进去划拉两下水面，风扇直接起飞。这就是Yong Su最近放出来的实时水体模拟Demo——把Evan Wallace当年那个惊艳WebGL水体Demo，完整移植到了Three.js上，还加了料。

说起来Yong Su对这个水体Demo是真上心。之前已经弄过一次WebGPU移植版，现在换到Three.js生态再走一遍，等于让这个经典效果能在更常用的Web图形库里跑起来。打开浏览器就能玩，不需要装任何东西。

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

玩了几分钟，最直观的感受是：这水是真的在“算”。光线追踪反射、折射、焦散全都有，水面上的交互物体拖来拖去，底下光影跟着变。水池形状也能换，圆角矩形水池切换之后，焦散图案的走向完全不一样。还有个灯光跟随镜头模式，转视角的时候高光和焦散动态变化，盯着看容易入迷。

操作也挺直观。在水面上划拉鼠标能造涟漪，拖背景转镜头，拖着那个球到处跑。按L调光源角度，按G开关重力，空格键暂停——暂停那一刻水面定住，焦散图案像琥珀一样凝固，有种莫名的爽感。

技术上值得多说两句。这个Demo的物体系统是可扩展的，按作者的说法，你可以往里面加Three.js自带几何体或者自定义3D模型，前提是定义好渲染shader、水面位移近似算法、碰撞检测和光学描述符。说白了就是给你留了接口，想放个小鸭子或者机器人下去搅水都行，只是门槛不低。

仓库已经公开在GitHub上了。Evan Wallace当年的原始Demo链接也一并附在项目里，想对比着看的老哥可以两个都打开，确实能感受到这几年Web图形在管线上的演进——从裸写WebGL到现在Three.js生态里的模块化实现。

另外还有个跟水体相关的更新：Dan Greenheck的Three.js Water Pro刚发了个大版本，那是整套海洋渲染方案，跟Yong Su这个池子级模拟不是一个路线，但都在水体渲染这条线上折腾。matsuoka_601的流体模拟作品也在相关推荐里，感兴趣的可以一块儿翻翻。

最后说点实在的。这个Demo对显卡要求不低，笔记本集显大概率跑不动。我用的是独显本，1080p下还算流畅，但拖球的时候偶尔掉帧。手机端就更别想了，开头那句“烫手”不是玩笑。但如果你刚好有块还行的显卡，打开之后在水面上划几道涟漪看看光线怎么在池底扭来扭去，确实挺解压。