Efficient particle system in javascript? (WebGL)

Question

I\'m trying to write a program that does some basic gravity physics simulations on particles. I initially wrote the program using the standard Javascript graphics (with a 2d con

Answer 1

It depends on what you are trying to do. When you say "gravity" to you mean some kind of physical simulation with collisions or do you just mean velocity += acceleration; position += velocity?

If the latter then you can do all the math in the shader. Example is here

https://www.khronos.org/registry/webgl/sdk/demos/google/particles/index.html

These particles are done entirely in the shader. The only input after setup is time. Each "particle" consists of 4 vertices. Each vertex contains

• local_position (for a unit quad)
• texture_coord
• lifetime
• starting_position
• starting_time
• velocity
• acceleration
• start_size
• end_size
• orientation (quaterion)
• color multiplier

Given time you can compute the particles's local time (time since it starts)

 local_time = time - starting_time;

Then you can compute a position with

 base_position = start_position + 
                 velocity * local_time + 
                 acceleration * local_time * local_time;

That's acceleration * time^2. You then add the local_position to that base_position to get the position needed to render the quad.

You can also compute a 0 to 1 lerp over the lifetime of the particle

 lerp = local_time / lifetime;

This gives you a value you can use to lerp all the other values

 size = mix(start_size, end_size, lerp);

If the particle a size of 0 if it's outside the it's lifetime

 if (lerp < 0.0 || lerp > 1.0) {
   size = 0.0;
 }

This will make the GPU not draw anything.

Using a ramp texture (a 1xN pixel texture) you can easily have the particle change colors over time.

 color = texture2D(rampTexture, vec4(lerp, 0.5));

etc...

If you follow through the shaders you'll see other things similarly handled including spinning the particle (something that would be harder with point sprites), animating across a texture for frames, doing both 2D and 3D oriented particles. 2D particles are fine for smoke, exhaust, fire, explosions. 3D particles are good for ripples, possibly tire tracks, and can be combined with 2D particles for ground puffs to hide some of the z-issues of 2D only particles. etc..

There are also examples of one shots (explosions, puffs) as well as trails. Press 'P' for a puff. Hold 'T' to see a trail.

AFAIK these are pretty efficient particles in that JavaScript is doing almost nothing.