Question

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

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

这似乎是转换反馈，我在这里学习：http://open.gl/feedback

然而，似乎转换反馈目前还没有包含在WebGL中。 This blog post表示转换反馈将在WebGL 2.0中出现。实际上，当我尝试像gl.beginTransformFeedback;这样的语句时，我得到一个错误，说明方法没有定义。

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

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无法做到的。

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

您可以看到an example of this kind of system here。这些粒子完全在GPU上运行。传递的唯一内容是用于投影的时间和矩阵。它们处理3D中的粒子定向，随时间改变颜色，随时间旋转，随着时间的推移随着速度和加速度的位置，甚至纹理动画随着时间的推移（参见示例中的数字）

除了这些技术之外，如果你的粒子系统不是确定性的，意味着你有改变每一帧的状态，你可以通过将纹理附加到帧缓冲对象来将状态写入纹理。如果您的机器支持浮点纹理，那么您可以写入RGBA / FLOAT并在随后的绘制调用中将该纹理作为输入读取到顶点或片段着色器中。

There's an example here。您甚至可以查看用于计算的纹理。

Answer 2

您可以使用FBO并使用多个纹理附件来存储simulation变量。要渲染而不是使用vertex displacement技术。

使用webgl的粒子系统

2 个答案: