in webgl-threejs

NeHe Lesson 19 – Particle Engines

Introduction to Particle Engines
Two particle engines in action

Two particle engines in action

This post is part of ongoing series on implementing the legacy NeHe lessons (originally done in C++ with OpenGL 1.x) using the three.js library. This post covers  Lesson 19, which covers particle engines.  Two implementations are discussed:

  • Using the three.js particle engine
  • Creating a custom particle engine which uses three.js

Particle engines are pretty cool. They allow you to do very cool effects from snow drops to flames to flocks of birds, Anything that is composed of groups of object that obey some rules.  There are many good implementations of particle engines using three.js, including implementations by three.js, Stemkoski  and squarefeet.

The three.js Particle Engine

The three.js implementation of a particle engine is fairly simplistic one.  For all that, there is a lot one can do with it.  The usage in this lesson is very simple, just some softly falling snowflakes. One aspect to note about the three.js implementation is that each “particle” is a sprite.  In three.js sprites are rendered as Canvas2D objects. So they are effectively parallel to the surface on which the 3D space is projected.  The result is that sprites are always “facing the camera” so you can’t have 3D objects as sprites.  The plus side of using sprites in this way is that the three.js implementation can handle VERY large numbers of particles before performance is significantly impacted.

A Custom Particle Engine in JavaScript

The second implementation is one I wrote just for this series.  It is not terribly sophisticated, but it does support 3D objects. In this case, little colored spheres being shot out of a cannon. The spheres then bounce and roll to the edge of a checkerboard, where they fall off  and fade away.

The physics of the cannon and the bouncing balls is crude, but it looks kind of cool (if I do say so myself). It serves to illustrate the basic principles, which is the goal. It also demonstrates how to manage a system with many objects without having to create and destroy objects all the time (thus wasting memory and performance).

The Lessons and Source

You can find the Lesson 19 at Geo-F/X here,    As always, the sources are on github here. Feel free to contact me at or comment on this article directly below.

Write a Comment