Saturday, February 23, 2013

Efficient procedural flame particle effects

I was playing the other month with making flame particle effects.  Lots of flame particle effects:

The challenge - in webGL - is to minimise the data transfer per frame.  So I created my flame effects procedurally using a random seed.

I claim no invention nor credit; I based this upon a million Google searches and nothing I’ve done is unique; but is novel and fun for me so I share.

What I did was create a single big VBO of random numbers.  I never updated this list of random numbers; I just kept re-using it.  Its an immutable list.  The list is as long as the maximum number of particles in any system.

Then for each particle system I created a unique random number for it.  And a few other things like its position and size.

To draw each system I computed the matrix so that, in its model coordinates, it was always drawing inside a -1,-1 -> 1,1 square.   That just simplifies life inside the shaders.

In vertex shader I use the per-system random number uniform combined with the per-vertex random number attribute to seed a random number generator to derive the particle’s attributes e.g. size, start-position, direction, colour etc.  I then had a uniform float ‘time’ passed to determine the frame of animation to draw.

In this way I could have lots - easily filling the whole screen with tens of thousands - of point-sprite-based fire particles and no two systems looked identical!


  1. williamedwardscoder posted this

 ↓ click the "share" button below!