Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Particle system using webgl

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.

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.

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

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.

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

like image 213
newprogrammer Avatar asked Apr 13 '14 21:04

newprogrammer


People also ask

How do you add particle system to an object?

Adding a Particle System 1. From the top menu dropdown, select: GameObject > Effects > Particle System. 2. To add a Particle System to an existing GameObject, select that GameObject, and in the Inspector window, select the Add Component button, and type Particle System in the search field.

How are particles rendered as billboards?

Billboards and particles are usually rendered as flat quads, which cause hard edges when they intersect with other geometry in the scene. "Soft particles" are rendered by performing a depth check in the pixel shader. Soft particles create smooth transitions when they intersect with other geometry.

How does particle system work?

Particle systems are collections of small images that when viewed together form a more complex “fuzzy” object, such as fire, smoke, weather, or fireworks. These complex effects are controlled by specifying the behavior of individual particles using properties such as initial position, velocity, and lifespan.

Does Godot have a particle system?

Godot provides a particles system. You can use particles system for simulate complex physical effects such as sparks, fire, magic particles, smoke, mist, magic, etc. The idea is that a particle is emitted at a fixed interval and with a fixed lifetime.


1 Answers

Some suggestions

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

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.

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)

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.

like image 116
gman Avatar answered Nov 15 '22 09:11

gman