这不仅是一汪漂亮的折射水体，焦散也是真正由光照投射出来的，而且整个场景交互性很强。另外，这一切都直接在浏览器中运行。

ScottieFox 发布了这个模拟的两个版本：一个“lite”版本和一个“sandbox of things”版本。第一个版本包含一个装满水的玻璃水缸、一只在水面上下浮动的橡皮鸭，以及太阳或悬挂式灯具将光线投射穿过水体。随着水面运动，光线会聚焦到水缸底部，形成动态焦散。它足够轻量，可以在较老的笔记本和手机上运行，同时仍允许你与场景交互。你可以点击水面产生涟漪，点击鸭子附近把它推开，并调整湍流来观察它如何改变模拟。

第二个版本面向那些真正想压榨高端 GPU 的人。它包含 Lite 版本的所有内容，但把模拟推进得更远：你可以试验会漂浮或下沉的物体，把墨水和沙子搅入水中，玩转激光和多个光源，并使用不同的质量预设。

每个版本都是一个基于 Three.js 构建的单一 HTML 文件，免费且开源。

在这里体验它们，如果你想看看 Three.js 还能做到什么，可以看看 Dan Greenheck 的海洋渲染方案，以及 Yong Su 对 Evan Wallace 的 WebGL demo 的移植版本：

相关链接

• here
• free and open-source

原文链接：https://80.lv/articles/seriously-impressive-real-time-water-caustics-that-run-in-your-browser