浏览器中的水下焦散以实时光线方式计算

一位网名为 ScottieFox 的开发者公开了 CAUSTIC//VOLUME 项目的源代码——这是两个浏览器中的水体场景，池底的焦散每一帧都按光线计算。水面细密网格上的每个顶点都向下发出一条光线穿过水体，相邻光线在池底汇聚之处便出现明亮的线条。

两个版本都是基于 three.js 的单个 HTML 文件，无需安装也无需构建：在浏览器中打开即可运行。代码以 MIT 许可证发布，也就是说可以阅读、修改并用于商业项目，只需保留版权声明和许可证文本。

焦散的亮度如何计算

亮度取自面积之比：某块水面的光若落在更小的池底区域上，就把光聚得更强，着色器通过屏幕空间导数获得这一比值。相互重叠的区域彼此叠加——特征鲜明的游动光丝正是这样产生的。从水面以下的玻璃壁射入的阳光则单独叠加。

水面由 24 列行进波组成，波长从 1.2 米到 12 厘米不等，各波方向按黄金角错开，避免波长相近的波彼此并行。因此焦散网络呈现出蜂窝状而非条纹状，后者正是单向涌浪会产生的效果。波高的选取使各个尺度对光线的偏折程度大致相同——正是这一点带来了池底最锐利的线条。

水面上可交互的涟漪由一套独立的 GPU 波动方程模拟负责计算，其基础是 three.js 中的 GPUComputationRenderer：它把用户的点击、阵风以及鸭子的尾迹扩散到整个水族箱，并让这一切都在玻璃上反射。水体材质依照菲涅耳公式处理天空的反射、依照斯涅尔定律处理视线向深处的折射，超过临界角便启用全内反射，颜色则由布格-朗伯吸收给出：红色比蓝色衰减得更快。

一个 demo 面向手机，另一个面向顶级显卡

CAUSTIC//LITE 是一个玻璃水族箱、一只漂在水面的橡皮鸭，以及一个可切换的光源：太阳或吊灯。点击可以掀起波浪并推动鸭子，滑块则可以改变波高和湍流强度。整个程序连同注释约 990 行，写作时就考虑到了它会被人阅读。页面会自行监控帧率并调整渲染分辨率，而若 WebGL 2 不可用或 three.js 未能加载，整个场景连同鸭子都会用普通 JavaScript 在 2D 画布上完成追踪。

完整版约 7500 行，由 18 个模块组成，面向性能强劲的硬件：它需要支持 EXT_color_buffer_float 扩展的 WebGL 2。其中新增了：

• 叠加在交互式涟漪模拟（iWave）之上的 FFT 海洋波谱、泡沫与水花；
• 驱动光柱穿过水体的焦散体积，以及带色散的焦散光子追踪；
• 基于物理的浮力，适用于玩具战列舰、海盗船、橡皮鸭、漂流瓶、箱子、锚、双耳瓶和潜水头盔；
• 成群游动的小丑鱼和刺尾鱼、触须摇曳的脉动水母、带两排吸盘的章鱼，以及横着走的螃蟹；
• 三维墨水模拟与层层沉积的彩色沙粒——用拖拽搅动水体时，两者都会被水流卷起；
• 最多三盏各有颜色的灯，以及一束在水体中层发生折射、并在壁面之间反射的激光；
• 从 Low 到 Insane 的画质预设，带时间性抗锯齿、泛光与景深。

水下视角尤其值得一看：追踪器既能处理全内反射，也能还原斯涅尔窗——那正是从水下仰望平静水面时所见的那一圈天空。

在哪里获取，又能用它做什么

CAUSTIC//VOLUME 项目已完整放在 GitHub 上：仓库可以下载为 ZIP 压缩包，然后在本地打开 lite/index.html 或 sandbox/index.html。无需服务器，r186 版本的 three.js 通过 import map 从 jsDelivr CDN 拉取，之后便由浏览器缓存。沙盒可在 Node 18 上用一条命令从模块重新构建，没有额外依赖；可选的测试会通过 Playwright 在无头 Chromium 中运行这两个场景，遇到着色器错误即告失败。

作者请贡献者遵守两个条件：每个版本都保持为基于 three.js、无需安装的单个 HTML 文件；lite 版本不得超过一千行，且必须保留可用的 CPU 回退方案。

为什么这类 demo 又开始在浏览器里做了

实时场景中的焦散最常见的呈现方式是走捷径——用一张预先算好的动画贴图投射到池底；这种手法在 three.js 的典型示例里同样被采用。在大型引擎中，物理正确的计算通常要伴随光线追踪才会出现，或者留在封闭实现内部，美术人员无从窥视。这次公开的价值，大概正在于一份可读的实现被完整放出，且没有许可限制。

方法本身并不新鲜：比较水面原始区域与折射后区域面积的做法，Evan Wallace 早在他的 WebGL demo 中就已使用，那个 demo 至今仍在被移植到各种平台——80 Level 也给出了这类移植版本的链接。这里的新意在于规模与易得性：同样的原理被铺展成一个完备的沙盒，带有浮力、墨水、沙粒和光柱，同时仍然是一个双击即可打开的文件。

该项目恰在此时出现显得顺理成章：WebGL 2 已成为包括 Safari 在内所有主流浏览器的共同基准，浮点渲染目标也不再稀奇，于是浏览器中的严肃模拟变得明显更易实现。文档中的一处说明同样耐人寻味：Chrome 自 141 版起，在没有可用 GPU 的机器上不再回退到软件 WebGL——lite 版之所以强调 CPU 回退，原因正在于此。围绕 three.js 的水体效果，整体上能感受到一股活跃气氛，商业方向亦然，而一个附带详细算法解析的免费项目，为浏览器标签页中何谓可达水准树立了标尺。如果这种单文件开源技术演示的形式能够延续下去，社区将逐步积累起一批效果的参考实现——这些效果过去只能以粗略取巧的形式在项目之间口耳相传。