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!
↓ click the "share" button below!