使用 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/反馈

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屋！