How to Create Particle Systems – BabylonJS Series part 12

Learn WebGL and Babylon.js at your own pace

Feel free to check out our online course 3D Programming with WebGL and Babylon.js for Beginners on Zenva Academy. The course covers the Babylon.js framework and explains all you need to get started with using this fantastic library in new or existing projects.

Tutorial

This tutorial is going to talk about particle system in BabylonJS. Particles are often small sprites used to simulate hard to reproduce phenomena like fire, smoke, water, or abstract visual effect like magic.

Particles

Final result

How can I do this ?

To perform this magic trick, the first thing to do is to create a new object, which will be our emitter. In our case, a box will be our rendering object, representing our fountain.

The emitter acts as the source of the particles, and its location in 3D space determines where they are generated and whence they proceed. So pay attention to the location/rotation of this object. In our case, the emitter is our fountain, but if you need, you can use only a vector (BABYLON.Vector3) as an emitter.

Now, get into the particle system by creating a new ParticleSystem object:

Nothing really new, except the second parameter, which is the maximum number of particles. Now an important part is to define the texture of each particle. Each one have the same pattern, so choose carefully which one you want. Our particle picture is going to be this one:

Flare

To define particle’s texture, you just have to write:

On this texture, you can use an optional mask to filter some colors, or a part of the alpha channel.

This is the output of this configuration:

TextureMask

The last main thing to do is to define our emitter that we have talked about earlier:

Now you should see your particle systems working. But it won’t be our final result before we refine some parameters:

  • Box around our emitter. Our emitter is the center of particles source, but if you want that your particles emits from more than one point, then you can define an entire box:

Like you can see, particles are emitted from different position on X-axis:

EmitBox

  • Now you can give some colors to your particles. Color one and two are combined, and the “colorDead” is the color that take the particle before it disappears.
  • Size of particles:
  • LifeTime of particles:
  • Emit rate. This is the density of particles, the rate of particles flow:

emitRate

Now something that can be interesting if you want to launch only a few particles at once, for example if you want to emit only 300 particles:

Be warned, the stream is no more continuous, this is a one-shot particle emission, so this function is erasing the previous “emitRate” parameter.

  • The selected mode for particles. You can choose between “BLENDMODE_ONEONE” (default choice: source color is added to the destination color without alpha affecting the result), and “BLENDMODE_STANDARD” (to blend current color and particle color using particle’s alpha).
  • Gravity. You can use gravity if you want to give an orientation to your particles (e.g.: fire particles are going up on Y-axis)
  • Direction. Random direction of each particle after it has been emitted, between direction1 and direction2 vectors.

emitRate

  • AngularSpeed. You can define a rotation for each particle (in radian):
  • Speed/Strength. You can define the power in emitting particles, and the overall motion speed (0.01 is default update speed, faster updates = faster animation).
  • Duration. You can set the amount of time the particle system is running (depends of the overall speed above).
  • Dispose. Disposes or not the particle system on stop (very useful if you want to create a one shot particle system with a specific targetStopDuration):

Finally, you can start this particle system whenever you want in your code with:

And naturally stop it:

Published by

David Catuhe

David Catuhe is technical evangelist lead at Microsoft France. He defines himself as a geek. He loves to develop with JavaScript and HTML5 but also with DirectX, C#, C++ or even Kinect (He wrote a book about it which is available on Amazon).David has a blog called Eternal Coding where he writes about HTML5, Windows, Kinect and 3D Development.

Share this article