Babylon.js supports two types of particles. These are sprites using the ParticleSystem and meshes using the Solid Particle System

Particle System


The particle system uses small 2D sprites, including animated sprites, which always face the camera to simulate effects such as smoke or abstract visual forms such as glitter and faery dust. The clouds of particles produced can be controlled with a wide range of properties including size, life time and emission rates, region and power. Gravity can also be added to the particles. In addition further customization is possible using shader effects and user functions.

Normally when particle 'dies' it is recycled as a particle. Starting from Babylon.js v3.2, you can create sub emitter which lets you spawn a new particle system when a particle dies. Each one of these spawned sub particle systems is totally independent from the parent.

From Babylon.js V3.2, where the browser supports WebGL2, GPU particles are available making full use of the GPU rather than handling some parts of the particle system with the CPU. The GPUParticleSystem and the ParticleSystem are very similar to use though there are some minor differences and due to the nature of WebGL2 there are a few facilities, such as sub emitters, that are not available. Where used when WebGL2 is not available the GPUParticleSystem will fall back to the ParticleSystem automatically.

Solid Particle System


The solid particle system (SPS) creates a cloud of particles from one or more base meshes. The resulting system is itself a single mesh requiring a single draw call per frame and has the same properties as any mesh which include positioning, rotatind, texturing etc.. However you have to implement the behaviour of individual particles yourself. There are many features of the SPS that help you to do this based on the index number of the particle. You can affect the position, rotation, quaternion, velocity, color, scaling, pivot, uvs, visibility and life of each particle and parent it to another particle.

There are a number of features available to increase the frame rate, including disabling properties if not required and, if appropriate, using freeWorldMatrix and freezeNormals. If after initialisation the particles will not change in any way then there are further techniques such as making its updatable property false. Even when particles are not updatable the mesh making up the SPS can still be moved, rotated and scaled. If you want to maintain the flexability of the SPS you can restrict the update to a limited range of particles.

Individual particles are pickable with a pointer and there are methods to check if two particles are intersecting.

Normally the particles and the triangular facets that make them up are rendered in index order and this can cause issues with transparent particles. It is possible to force a depth order sort but this will affect the frame rate so should only be used when really needed.

Yet another feature, digest mesh, is to take an existing mesh and turn its triangular facets into particles, allowing a mesh to be 'blown apart' for example.

Further Reading

Basic - L1

Particles Overview

Particles 101

How to Create Animated Particles
How to Use Sub Emitters

Solid Particle System

Intermediate - L2

How to Customize the Particle System