Different Methods to Animate Particles in the Browser

(without flash)

1. DOM Manipulation + CSS

Each particle is represent as a HTML DOM element. It could be an image, div, span, a canvas element or even a text node. They can be moved around by adjusting their CSS properties in JS, having a absolute position and changing its offsets and size. These is typically 2 or 2.5D, but with CSS transformations, they can be translated into a 3d world (sometimes with hardware acceleration from the browsers!)

2. 2D Canvas

The Canvas is a drawing API which allows particles to be drawn at which every position they are at. This again may be a 2D API, but an engine like three.js can make use of it to render in a 3d perspective. When drawn effectively, the 2D canvas can display more particles with better performance than DOM approach.

3. WebGL Canvas

As you wish to display more particles (perhaps from 10 thousands to a 100 thousands or even a million particles) rendering with the 2d canvas would reach its performance limit and render at really slow rates or even freeze your browser. WebGL allows the drawing of the canvas to be run on the hardware with your graphics card. This speeds things up a lot and increase the amount of particles you can render in realtime.

4. Particle Simulation with Shaders

However, using a usual WebGL pipleline, we will soon encounter another bottleneck. Firstly, the particle simulation is done with javascript which is also dependent on the amount of CPU power available to it. Secondly the particle data from the CPU memory has to be transferred to the GPU memory, which is another bottleneck even if we take the processing time of particles simulation with the CPU out of the picture. The idea is to simulate and render the particles mostly in the graphics card and you have the potential to run large amount of particles quickly. There are stateless and stateful ways of simulation (using FBO textures) but that would a topic for another time!