使用webgl的粒子系统 [英] Particle system using webgl

问题描述

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

For a graphics course, we are implementing a particle system in WebGL. Doing the particle simulation calculations in JavaScript would be quite slow, our professor wants us to do the particle simulation on the GPU.

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

To do this particle simulation, I imagine we upload a vertex buffer containing our particle data (position, velocity, mass, etc.), and then have my vertex shader do some math for the simulation, and write the results to different vertex buffer, representing the next state of the particles. Then I can render my particles using gl.POINTS using a different shader program for rendering.

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

This seems like transform feedback, which I am learning from here: http://open.gl/feedback

但是，WebGL当前似乎未包含转换反馈. 此博客文章说，将会出现转换反馈与WebGL 2.0.确实，当我尝试使用gl.beginTransformFeedback;之类的语句时，我收到一条错误消息，指出未定义该方法.

However, it seems like transform feedback isn't currently included in WebGL. This blog post says transform feedback will come out with WebGL 2.0. Indeed, when I try statements like gl.beginTransformFeedback;, I get an error saying that method is not defined.

如果没有变换反馈，我应该如何在WebGL中进行粒子模拟?

How am I supposed to do particle simulation in WebGL if transform feedback is not available?

推荐答案

一些建议

通过使用四边形而不是点数，可以获得更多的显示灵活性.基本上，每个粒子的顶点数据都类似

You can get way more display flexibility by using quads instead of points. You basically put in vertex data for each particle something like

//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..,

因此，每个四边形的每个顶点的每个粒子的数据都相同.换句话说，您有

So the data for each particle is identical for each vertex of each quad. In other words you have

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

Now you can rotate, scale, and orient the quad in your shader and offset it however you want, something you can't do with POINTS.

此外，如果您的粒子系统是确定性的(就像任何粒子的位置仅基于时间一样)，那么您可以将所有变量置于属性和统一中，并以统一的形式传递时间.

Also, If your particle system is deterministic (as in the position of any particle is based solely on time) then you can put all your variables in attributes and uniforms and just pass in the time as a uniform.

您可以看到此类系统的示例这里.这些粒子完全在GPU上运行.唯一传入的是时间和投影矩阵.他们处理3D方向的粒子，随时间变化的颜色，随时间变化的旋转，随时间变化的位置和速度以及加速度，甚至随时间变化的纹理动画(请参见示例中的数字)

You can see an example of this kind of system here. These particles run entirely on the GPU. The only thing passed in is time and matrices for projecting. They handle orienting the particles in 3D, changing color over time, rotating over time, position with velocity and acceleration over time, even texture animation over time (see the numbers in the example)

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

On top of those techniques, if your particle system is not deterministic, meaning you have state that changes every frame, you can write state to a texture by attaching the texture to a framebuffer object. If your machine supports floating point textures then you can write to an RGBA/FLOAT and read that texture as input in either the vertex or fragment shader in a subsequent draw call.

此处有一个示例.您甚至可以查看用于计算的纹理.

There's an example here. You can even view the texture being used for calculations.

这篇关于使用webgl的粒子系统的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！