主 题：【摸鱼好物】Figma创始人手搓的实时光线追踪水体物理！GPU流体焦散+光影折射，极客解压神作
发 布 者：Yux1n
标签分类： 日常
时 间：2026-10-20 00:19:11
内容预览：在电脑前闲暇时，如果想找个极其丝滑、质感拉满且纯粹用图形学实力说话的交互沙盒，这个诞生多年却依然稳居 WebGL 殿堂级代表作的神器绝对值得重温与探索。它由 Evan Wallace（著名打包神器 esbuild 缔造者、Figma 联合创始人）手搓而成。没有繁杂的 UI、没有庞大的外部引擎依赖，仅凭单页着色器便在浏览器中榨干 GPU 算力，构建出令人惊叹的实时光线追踪折射焦散（Caustics）与水面浅水波动物理仿真。👉 在线直达传送门：https://madebyevan.com/webgl-water/🌊 硬核图形学与物理仿真看点：GPU 高度场浅水微分方程（Heightfield Wave Equation）：整个水面由高度场网格驱动，利用双缓冲（Ping-Pong）帧缓冲纹理在 GPU 片元着色器中实时求解二维浅水波波动方程；激起的水波在四壁泳池间会产生极其精确的动量干涉、反射与叠加衰减，质感极其逼真。实时光线追踪水下折射焦散（Raytraced Caustics）：传统游戏引擎中极为昂贵的水下光斑焦散，在这里全部由实时光追算法推导完成；着色器追踪入射光线经由凹凸起伏水面法线发生折射后的光子汇聚路径，并动态投射到底部泳池瓷砖与球体表面，呈现波光粼粼的动态聚集亮斑。菲涅尔全反射与立方体环境映射（Fresnel Reflection %26 Refraction）：严格遵循菲涅尔光学公式计算反射与透射比例。掠射角观察时，水面呈现清透的天空倒影；俯视角观察时，视线又能直接穿透折射的水流看清池底细节。刚体浮力与流体双向耦合（Buoyancy %26 Dynamic Coupling）：池中漂浮的金属球体拥有完整的质量、重力与阿基米德浮力模型；当球体在水中被拖拽浸入或从高处坠落时，球体位移会实时扰动高度场网格，在水面激起一圈圈震撼的环形水花与扩散涟漪。🎮 极客交互与快捷操作：水面交
直达链接： https://www.nodeseek.com/post-994710-1
发 布 者：Yux1n
标签分类： 日常
时 间：2026-10-20 00:19:11
内容预览：在电脑前闲暇时，如果想找个极其丝滑、质感拉满且纯粹用图形学实力说话的交互沙盒，这个诞生多年却依然稳居 WebGL 殿堂级代表作的神器绝对值得重温与探索。它由 Evan Wallace（著名打包神器 esbuild 缔造者、Figma 联合创始人）手搓而成。没有繁杂的 UI、没有庞大的外部引擎依赖，仅凭单页着色器便在浏览器中榨干 GPU 算力，构建出令人惊叹的实时光线追踪折射焦散（Caustics）与水面浅水波动物理仿真。👉 在线直达传送门：https://madebyevan.com/webgl-water/🌊 硬核图形学与物理仿真看点：GPU 高度场浅水微分方程（Heightfield Wave Equation）：整个水面由高度场网格驱动，利用双缓冲（Ping-Pong）帧缓冲纹理在 GPU 片元着色器中实时求解二维浅水波波动方程；激起的水波在四壁泳池间会产生极其精确的动量干涉、反射与叠加衰减，质感极其逼真。实时光线追踪水下折射焦散（Raytraced Caustics）：传统游戏引擎中极为昂贵的水下光斑焦散，在这里全部由实时光追算法推导完成；着色器追踪入射光线经由凹凸起伏水面法线发生折射后的光子汇聚路径，并动态投射到底部泳池瓷砖与球体表面，呈现波光粼粼的动态聚集亮斑。菲涅尔全反射与立方体环境映射（Fresnel Reflection %26 Refraction）：严格遵循菲涅尔光学公式计算反射与透射比例。掠射角观察时，水面呈现清透的天空倒影；俯视角观察时，视线又能直接穿透折射的水流看清池底细节。刚体浮力与流体双向耦合（Buoyancy %26 Dynamic Coupling）：池中漂浮的金属球体拥有完整的质量、重力与阿基米德浮力模型；当球体在水中被拖拽浸入或从高处坠落时，球体位移会实时扰动高度场网格，在水面激起一圈圈震撼的环形水花与扩散涟漪。🎮 极客交互与快捷操作：水面交
直达链接： https://www.nodeseek.com/post-994710-1
