流:WebGPU 粒子流体
Flow,Niklas Niehus (holtsetio),2025 年

正在布展…
它是怎么做的
- 第 1 步MLS-MPM(移动最小二乘物质点法):粒子与背景网格交替传递质量和动量
- 第 2 步所有步骤(P2G、网格更新、G2P)都是 TSL 编写的计算着色器
- 第 3 步粒子数据存放在结构化 storage buffer 中
- 第 4 步渲染阶段把粒子画成按速度着色、带光照的小几何体
- 第 5 步鼠标位置被投射进场景,作为施加在网格上的外力
复刻配方
一段技术配方,可以直接交给 AI 编程助手,也可以自己照着写。想指定技术栈、位置和性能预算,就把它加入实现方案。
Store particle positions, velocities and affine momentum matrices in GPU storage buffers and allocate a 3D grid buffer. Each frame run compute passes: clear the grid, scatter particle mass and momentum to the 27 neighbouring nodes with quadratic B-spline weights (atomic adds on fixed-point integers), update grid velocities with gravity, boundary conditions and a pointer force, then gather velocities back to particles and advect them. Render particles as instanced small meshes oriented and coloured by velocity, with bloom. three.js TSL compute nodes keep this in JavaScript.
档案
性能开销
视觉强度
实现难度
尺度为策展判断(1 到 5),用于比较和推荐。
核实记录:Opened https://holtsetio.com/lab/flow/ (200, title 'Flow - ThreeJS WebGPU Experiment - holtsetio.com'); repo holtsetio/flow exists, licence MIT via GitHub API; saw src/mls-mpm/mlsMpmSimulator.js.


