WebGL Beginner's Guide

Time for action – using point sprites to create a fountain of sparks

1. Open the file ch10_PointSprites.html in an HTML5 browser.
   
2. This sample creates a simple fountain of sparks effect with point sprites. You can adjust the size and lifetime of the particles using the sliders at the bottom. Play with them to see the effect it has on the particles.
3. The particle simulation is performed by maintaining a list of particles that comprises of a position, velocity, and lifespan. This list is iterated over every frame and updated, moving the particle position according to the velocity and applying gravity while reducing the remaining lifespan. Once a particle's ...