Canvas 3d JS Library

I have been working on the particle system and now have something much more interesting! Here’s the link for the updated version. I wrote a test environment and figured I may as well post it, so this is it. You can create some pretty neat effects by playing around with the parameters.

click the screenshot to run the demo!

Billboarding

Making the particles always face the camera wasn’t too difficult, but this demo doesn’t actually show the billboarding effect. Since the emission in this demo is dependent on the cursor, changing the camera’s orientation would prevent proper particle emission. Calculating the vectors to get billboarding to work is not too expensive, however I still limit it to when the camera orientation changes rather than per frame.

Recycling Particles

When creating a particle system, it is common to see implementations recycle particles. When a particle exceeds its lifetime, it is marked as dead and the next time a particle is needed, the first dead particle found is recycled by having its attributes reassigned. This prevents the need to create a new particle and append it to the list/array. It also prevents the need to delete them, which can be costly when the structure you’re working with isn’t a real array.

Emission

In this demo, the particles are emitted from the cursor location at a rate indicated by the first input control. This can range from zero to the number of particles which exist in the system. I simplified the emission into two types, continuous and non-continuous. If the user needs a continuous fire effect, they would call setEmitRate(50) and 50 particles will be emitted per second. On the other hand, if the user wants an effect like an explosion when a spaceship is hit, they can set the emission rate to zero. When they want their explosion effect, they call emit(50) and exactly 50 particle would be emitted. Both could be used as well, hitting the space key in the demo launches a bunch of particles.