使用WebGL的粒子系统

Question

为了一门图形课程，我们正在WebGL中实现一个粒子系统。在JavaScript中进行粒子模拟计算会非常慢，我们的教授希望我们在GPU上进行粒子模拟。

为了进行这个粒子模拟，我想象我们上传一个顶点缓冲区，其中包含我们的粒子数据（位置、速度、质量等），然后让我的顶点着色器对模拟进行一些数学计算，并将结果写入不同的顶点缓冲区，表示粒子的下一个状态。然后我可以使用不同的渲染着色器程序使用gl.POINTS渲染我的粒子。

这似乎是一种叫做“变换反馈”的技术，我从这里学到了它：http://open.gl/feedback 然而，据这篇博客文章所说，WebGL目前似乎没有包括变换反馈。它说变换反馈将随着WebGL 2.0一起推出。事实上，当我尝试像gl.beginTransformFeedback;这样的语句时，我会得到一个错误，提示该方法未定义。

如果变换反馈不可用，我应该如何在WebGL中进行粒子模拟？

- newprogrammer

Answer 1

一些建议

如果使用四边形而不是点，您可以获得更多的显示灵活性。您基本上需要为每个粒子输入顶点数据，例如：

//localX, localY, data for particle,   data for particle, ...
     -1,      -1, gravityForParticle0, velocityForParticle0, etc..,
      1,      -1, gravityForParticle0, velocityForParticle0, etc..,
     -1,       1, gravityForParticle0, velocityForParticle0, etc..,
      1,       1, gravityForParticle0, velocityForParticle0, etc..,
     -1,      -1, gravityForParticle1, velocityForParticle1, etc..,
      1,      -1, gravityForParticle1, velocityForParticle1, etc..,
     -1,       1, gravityForParticle1, velocityForParticle1, etc..,
      1,       1, gravityForParticle1, velocityForParticle1, etc..,
     -1,      -1, gravityForParticle2, velocityForParticle2, etc..,
      1,      -1, gravityForParticle2, velocityForParticle2, etc..,

因此，每个粒子的数据对于每个正方形的每个顶点都是相同的。换句话说，您拥有

unit vertex #0, particle0 data
unit vertex #1, particle0 data
unit vertex #2, particle0 data
unit vertex #3, particle0 data

unit vertex #0, particle1 data
unit vertex #1, particle1 data
unit vertex #2, particle1 data
unit vertex #3, particle1 data

unit vertex #0, particle2 data
unit vertex #1, particle2 data
unit vertex #2, particle2 data
unit vertex #3, particle2 data

现在您可以在着色器中旋转、缩放和定位四边形，并以任何您想要的方式偏移它，这是使用POINTS无法实现的。

此外，如果您的粒子系统是确定性的（即任何粒子的位置仅基于时间），则可以将所有变量放入属性和统一变量中，并将时间作为统一变量传递。

您可以在这里看到一个这种类型的系统的示例。这些粒子完全在GPU上运行。唯一传递的是时间和用于投影的矩阵。它们处理在3D中定位粒子、随时间改变颜色、随时间旋转、随速度和加速度而改变位置，甚至随时间进行纹理动画（请参见示例中的数字）。

除了这些技术之外，如果您的粒子系统是不确定性的，即每帧都有状态发生变化，则可以通过将纹理附加到帧缓冲对象来将状态写入纹理。如果您的计算机支持浮点纹理，则可以写入RGBA/FLOAT并在随后的绘制调用中在顶点或片段着色器中将该纹理作为输入读取。 这里有一个示例。您甚至可以查看用于计算的纹理。

- gman

---

quad方法对我的项目肯定很有用。我们的粒子系统是非确定性的，所以你的第二个例子非常有帮助。 - newprogrammer

Answer 2

您可以使用FBO并使用多个纹理附件来存储您的模拟变量。要呈现它们，您可以使用顶点位移技术。

- j-p