Particle systems

Karl-Aksel Puulmann, 2014

What is a particle system

• Series of individiual particles.
• Mainly used to model complex systems.
• Fire, smoke, fireworks, snow, stars, ...

Basic demos

So, to generalize - particles

• Have a number of attributes associated with them
• position
• lifetime
• color, transparency
• velocity
• size
• acceleration, force accumulators, ....

In addition...

• We can give a texture to each particle.
• Initial values of attributes are usually "fuzzy".
• Behaviour changes with time.

Emitters

• Centralpiece of each particle system, commander.
• Controls the spawn rate of particles.
• Allows to add behaviours to particles.
• Particles (usually) originate from emitters coordinates.

Updating state

• A general particle engine must allow the user to change the state of each particle on updates.
• Usually handled by allowing to attach custom "event handlers".
• Efficiency - dead particles are reused.
• Have to handle cases when update is not called at 60fps.

Main loop

• New particles are created, .onCreate handlers called for each particle (set position, initial color, etc).
• Particles exceeding lifetime killed, returning them to particle pool.
• For each particle, a .update call is made (doing movement, etc).
• Render

Rendering

• Render each particle as a quad facing camera.
• Apply sprites/textures in shaders.
• Do distance sorting beforehand - avoids issues with transparency.
• ?Often handled for you?

Fireworks.js examples

Time to go home?

Nah. Stuff so far has been pretty basic (lots of demos).

Motion of a particle can be driven by:

• Exterior forces: wind, gravity, targetting
• Physical interaction - gravity, spring connections, collisions
• "self determination" - AI, randomness

Performance

• Increasing particle count makes stuff more impressive.
• But, it gets slow fast

(Increasing) performance

• Problem is that we're doing work in serial.
• Idea: web workers?
• Idea: can we offload calculations to the GPU?
• Yes we can - let's use shaders!

Modified version of http://soulwire.github.io/WebGL-GPU-Particles/ via Codepen

But - this is a tradeoff

Fast vs easy to develop.

Other uses

Morphing, exploding pictures, ...

Crowd modeling

• Particles represent agents, creatures.
• Option - each agent controlled separately, neighbors taken into account.
• Option - behaviour of the whole group is modeled.
• Used for example in LOTR - link to an article.

Flocking

• Algorithm for simulating groups of entities moving together.
• Developed by Craig Reynolds in 1986.
• All entities are controlled by three rules.

Flocking - rules

• Separation - don't let other agents get too close.
• Alignment - steer towards average heading of neighbors.
• Cohersion - steer towards average position of neighbors.

Modeling humans?

• Personal space.
• Don't get too close to obstacles.
• Hidden motivations.
• What happens on collisions?
• Traffic crossing?

Recap

• Particle system - collection of individual particles.
• Used to visualize complex systems.
• Properties and lifecycles of particles, how to update.
• How to render particles, sprites.
• Forces that affect particles, how to simulate.
• How to render 1M particles.
• How to model crowds, birds.
• Demos!

Suggested reading

• Lord of the Rings prologue battle
• Neat algorithms - flocking
• Creation of 1M particles talk, slides
• Experiments by Justin Widle