Getting Started - Chapter 6 - Particle Spray

Particle Spray

In this case, particles are small sprites emitted in a cluster, or cloud, to simulate fire, smoke, water, or even faery dust.

The basis for a cloud of particles is the ParticleSystem. With this, we specify the number of particles to use.

import { ParticleSystem } from "@babylonjs/core/Particles/particleSystem";
const particleSystem = new ParticleSystem("particles", 5000, scene); //scene is optional

Particles are emitted from a specifically defined region. Each particle is given a lifetime, and when that lifetime is reached, it is reused and re-emitted.

They are given a texture, which governs their appearance.

import { Texture } from "@babylonjs/core/Materials/Textures/texture";
particleSystem.particleTexture = new Texture("textures/flare.png", scene);

The basic emitter region is a box of given dimensions around a specified point:

import { Vector3 } from "@babylonjs/core/Maths/math.vector";
particleSystem.emitter = new Vector3(0, 10, 0); // the point at the top of the fountain
particleSystem.minEmitBox = new Vector3(-1, 0, 0); // minimum box dimensions
particleSystem.maxEmitBox = new Vector3(1, 0, 0); // maximum box dimensions

Up to three colors can be given in the form (r, g, b, a) for red, green, blue, and alpha. Alpha goes from 0 for fully transparent up to 1 for fully opaque. The first two are combined, or blended, to set the color of the particle. The method of blending can be specified. The third is the colorDead property and is useful when particle recycling is turned off. This third property is not needed for our fountain.

import { Color4 } from "@babylonjs/core/Maths/math.color";
import { ParticleSystem } from "@babylonjs/core/Particles/particleSystem";
particleSystem.color1 = new Color4(0.7, 0.8, 1.0, 1.0);
particleSystem.color2 = new Color4(0.2, 0.5, 1.0, 1.0);
particleSystem.blendMode = ParticleSystem.BLENDMODE_ONEONE;

The size of a particle and its lifetime are within the range set by minimum and maximum values.

particleSystem.minSize = 0.1;
particleSystem.maxSize = 0.5;

particleSystem.minLifeTime = 2;
particleSystem.maxLifeTime = 3.5;

We also need to set the number of particles emitted per second. Too high an emission rate with a long lifetime can result in gaps in the particle emission.

particleSystem.emitRate = 1500;

We also set two possible directions for the particles and control the speed at which each particle travels by giving a minimum and maximum power value and an update speed.

import { Vector3 } from "@babylonjs/core/Maths/math.vector";
particleSystem.direction1 = new Vector3(-2, 8, 2);
particleSystem.direction2 = new Vector3(2, 8, -2);
particleSystem.minEmitPower = 1;
particleSystem.maxEmitPower = 3;
particleSystem.updateSpeed = 0.025;

Setting a negative value for gravity in the y component ensures the particles fall downward.

import { Vector3 } from "@babylonjs/core/Maths/math.vector";
particleSystem.gravity = new Vector3(0, -9.81, 0);

Finally, we can start the fountain:

particleSystem.start();

Here is an example of our fountain:

Let's now provide an on-off click event.