【摸鱼好物】Figma创始人手搓的实时光线追踪水体物理！GPU流体焦散+光影折射，极客解压神作

在电脑前闲暇时，如果想找个极其丝滑、质感拉满且纯粹用图形学实力说话的交互沙盒，这个诞生多年却依然稳居 WebGL 殿堂级代表作的神器绝对值得重温与探索。

它由 Evan Wallace（著名打包神器 esbuild 缔造者、Figma 联合创始人）手搓而成。没有繁杂的 UI、没有庞大的外部引擎依赖，仅凭单页着色器便在浏览器中榨干 GPU 算力，构建出令人惊叹的实时光线追踪折射焦散（Caustics）与水面浅水波动物理仿真。

👉 在线直达传送门：https://madebyevan.com/webgl-water/

🌊 硬核图形学与物理仿真看点：

1. 
   

   GPU 高度场浅水微分方程（Heightfield Wave Equation）：

   
   
   
   
   • 整个水面由高度场网格驱动，利用双缓冲（Ping-Pong）帧缓冲纹理在 GPU 片元着色器中实时求解二维浅水波波动方程；
   
   
   • 激起的水波在四壁泳池间会产生极其精确的动量干涉、反射与叠加衰减，质感极其逼真。
   
   
   
   


2. 
   

   实时光线追踪水下折射焦散（Raytraced Caustics）：

   
   
   
   
   • 传统游戏引擎中极为昂贵的水下光斑焦散，在这里全部由实时光追算法推导完成；
   
   
   • 着色器追踪入射光线经由凹凸起伏水面法线发生折射后的光子汇聚路径，并动态投射到底部泳池瓷砖与球体表面，呈现波光粼粼的动态聚集亮斑。
   
   
   
   


3. 
   

   菲涅尔全反射与立方体环境映射（Fresnel Reflection & Refraction）：

   
   
   
   
   • 严格遵循菲涅尔光学公式计算反射与透射比例。掠射角观察时，水面呈现清透的天空倒影；俯视角观察时，视线又能直接穿透折射的水流看清池底细节。
   
   
   
   


4. 
   

   刚体浮力与流体双向耦合（Buoyancy & Dynamic Coupling）：

   
   
   
   
   • 池中漂浮的金属球体拥有完整的质量、重力与阿基米德浮力模型；
   
   
   • 当球体在水中被拖拽浸入或从高处坠落时，球体位移会实时扰动高度场网格，在水面激起一圈圈震撼的环形水花与扩散涟漪。
   
   
   
   

🎮 极客交互与快捷操作：

• 水面交互：按住鼠标左键在水面任意划动，激荡出层层扩散的涟漪波动；


• 球体拖拽：按住并拖动水中的金属球，可将其硬生生拽出水面或按入水底，松手后球体会在重力与浮力对抗下阻尼回弹；


• 视角变换：按住空白区域旋转视角，可 360° 全景环顾水面波光与水底焦散；


• 极客按键控制：
  
  
  
  • Space（空格键）：暂停 / 继续水面物理波动演化（定格微观水波瞬间）；
  
  
  • G 键：切换重力开关（感受失重环境下球体漂浮与水流反弹状态）；
  
  
  • L 键：切换环境主光源（太阳）方位角度，观察水底光斑与几何阴影的实时位移与畸变。
  
  
  
  

在闲暇时光中戴上耳机、轻划水面，听着风扇轻转、看着波光摇曳，简直是洗涤视线与打发时光的极品极客玩具！