WebGPU Fluid Simulation
SPH · FLIP · 粒子流体动力学仿真展示
WebGPU
WGSL
Compute Shader
SPH
FLIP
APIC
需要支持 WebGPU 的浏览器
浏览器 WebGPU 支持:
检测中…
|
推荐
Chrome 113+
或
Edge 113+
🌊
SPH 2D 仿真
4 个 Demo
Canvas2D 流体
Canvas2D
纯 CPU Canvas2D 实现,无需 GPU,兼容性最好。粒子推动、边界碰撞、实时交互。
🔧 Canvas2D
💻 CPU
WebGPU 2D 流体
SPH
GPU 加速 SPH 2D 仿真,Compute Shader 并行计算粒子密度与压力。
⚡ WebGPU
🎮 GPU
Canvas2D 基础版
Canvas2D
轻量级 Canvas2D SPH,适合学习粒子流体力学基础。
🔧 Canvas2D
💻 CPU
WebGPU 2D 基础版
SPH
WebGPU SPH 2D 单文件实现,粒子碰撞、颜色传递函数。
⚡ WebGPU
🎮 GPU
🌐
SPH 3D 仿真
7 个 Demo
⚛ 3D 组合仿真器
4渲染器
统一 UI 切换 4 种渲染模式:粒子 / 光线步进 / Marching Cubes / 屏幕空间。最完整的演示。
⚡ WebGPU
🔀 切换
⭐ 推荐
粒子渲染
SPH
Billboard 粒子渲染,视锥剔除,动态阴影映射,盒/球障碍物。
⚡ WebGPU
🎨 粒子
光线步进渲染
SPH
体素密度散射 + 物理光线步进,折射反射、Beer–Lambert 透射率、环境光遮蔽。
⚡ WebGPU
🔮 体积
Marching Cubes
SPH
Compute Shader 网格重建,间接实例化绘制,Lambert 着色,动态阴影。
⚡ WebGPU
🧊 网格
屏幕空间渲染
SPH
多 Pass 屏幕空间:曲率流平滑、泡沫/喷雾模拟、双边深度滤波、折射。
⚡ WebGPU
🖥 屏幕空间
3D 流体(独立)
SPH
独立 WebGPU 3D SPH 流体仿真页,粒子推拉交互、轨道相机。
⚡ WebGPU
🧪 独立
3D 流体场景
SPH
场景化 3D 流体演示,含环境设置和预设场景。
⚡ WebGPU
🎬 场景
💧
FLIP 仿真
4 个 Demo
PIC/FLIP 混合
FLIP
Particle-In-Cell + FLIP 混合方法,结合 PIC 稳定性与 FLIP 涡量保持。
⚡ WebGPU
2D
混合 FLIP
FLIP
混合 PIC/FLIP 流体仿真,可调 Blend 系数,节点边界条件。
⚡ WebGPU
2D
APIC 方法
FLIP
Affine PIC 传输方法,消除 FLIP 噪声,保留更多涡量细节。
⚡ WebGPU
2D
FLIP 3D
FLIP 3D
WebGPU 3D FLIP 流体仿真,GPU 加速的网格投影与粒子平流。
⚡ WebGPU
3D
🎬
综合场景
1 个 Demo
3D 场景集成
综合
多渲染器集成场景,含环境光照、轨道相机和 GUI 控制面板。
⚡ WebGPU
🎬 场景
原始项目:
github.com/jeantimex/fluid
· 原作:
Sebastian Lague
· 部署于
deeptriz.tech
所有仿真均需浏览器支持 WebGPU(Chrome 113+ / Edge 113+ / 部分 Chromium 浏览器)