使用webgl的粒子系统

Question

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

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

这似乎是变换反馈,我在这里学习:http://open.gl/feedback

但是,似乎转换反馈目前不包含在WebGL中.这篇博客文章称,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.

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

您可以在此处查看此类系统的示例.这些粒子完全在GPU上运行.传递的唯一内容是用于投影的时间和矩阵.它们处理3D中的粒子定向,随时间改变颜色,随时间旋转,随着时间的推移随着速度和加速度的位置,甚至纹理动画随着时间的推移(参见示例中的数字)

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

这里有一个例子.您甚至可以查看用于计算的纹理.