跳到正文
网页珍奇柜Web Curio

流:WebGPU 粒子流体

Flow,Niklas Niehus (holtsetio),2025 年

正在布展…

本柜的现场复刻:按原作的技术思路从零编写,不含原作的代码和素材。为什么不直接展出原作:原作只能在支持 WebGPU 的浏览器里运行;为了让它长期可用,本柜用 WebGL 从零复刻。原作请点上方「去看原作」。

它是怎么做的

  1. 第 1 步MLS-MPM(移动最小二乘物质点法):粒子与背景网格交替传递质量和动量
  2. 第 2 步所有步骤(P2G、网格更新、G2P)都是 TSL 编写的计算着色器
  3. 第 3 步粒子数据存放在结构化 storage buffer 中
  4. 第 4 步渲染阶段把粒子画成按速度着色、带光照的小几何体
  5. 第 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.

档案

能不能拿来用

原作以 MIT 许可开源:可以阅读源码学习,按许可证条款使用;在自己的项目里引用时保留原作者署名。

性能开销

视觉强度

实现难度

尺度为策展判断(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.