Shape Emitters

Starting from Babylonjs 3.2 you can shape the region the particles are emitted from as a

• Point
• Box
• Sphere
• Hemisphere
• Cylinder
• Cone
• Mesh
• Custom

by the addition of specific emitter function.

Point Emitter

To create a point emitter, you can run this code:

var pointEmitter = particleSystem.createPointEmitter(new BABYLON.Vector3(-7, 8, 3), new BABYLON.Vector3(7, 8, -3));

The createPointEmitter method takes four parameters in the following order

• direction1: Vector3,
• direction2: Vector3

The returned pointEmitter object can be used to change the values of these properties.

pointEmitter.direction1 = new BABYLON.Vector3(-5, 2, 1); 
pointEmitter.direction2 = new BABYLON.Vector3(5, 2, 1);

Box Emitter

To create a box emitter you use, for example

var boxEmitter = particleSystem.createBoxEmitter(new BABYLON.Vector3(-7, 8, 3), new BABYLON.Vector3(7, 8, -3), new BABYLON.Vector3(-1, 0, 0), new BABYLON.Vector3(1, 0, 0));

The createBoxEmitter method takes four parameters in the following order

• direction1: Vector3,
• direction2: Vector3,
• minEmitBox: Vector3,
• maxEmitBox: Vector3

The returned boxEmitter object can be used to change the values of these properties.

boxEmitter.direction1 = new BABYLON.Vector3(-5, 2, 1); 
boxEmitter.direction2 = new BABYLON.Vector3(5, 2, 1);  
boxEmitter.minEmitBox = new BABYLON.Vector3(-2, -3, -4);  
boxEmitter.maxEmitBox = new BABYLON.Vector3(2, 3, 4);

Sphere Emitter

You can create a sphere emitter with a given radius, 1.2 for example, using

var sphereEmitter = particleSystem.createSphereEmitter(1.2);

The returned sphereEmitter object can be used to change the value of the radius.

The particles are emitted in the direction of the surface normals, ie the lines from the center of the sphere through a surface point.

With sphereEmitter.radiusRange you can define where along the radius the particles should be emitted. A value of 0 means only on the surface while a value of 1 means all along the radius.

If you prefer to chose the emission direction, you can create a directed sphere emitter

var sphereEmitter = particleSystem.createDirectedSphereEmitter(1.2, new BABYLON.Vector3(1, 1, 1), new BABYLON.Vector3(2, 8, 2));

The createDirectedSphereEmitter method takes three parameters in the following order

• radius: Number,
• direction1: Vector3,
• direction2: Vector3,

The returned sphereEmitter object can be used to change the values of these properties.

sphereEmitter.radius = 3.4;
sphereEmitter.direction1 = new BABYLON.Vector3(-5, 2, 1); 
sphereEmitter.direction2 = new BABYLON.Vector3(5, 2, -1);

The first parameter is the radius the second is direction1 and third is direction2. (The direction will be generated randomly between direction1 and direction2)

Hemispheric Emitter

You can create a hemispheric emitter with a given radius, 1.2 for example, using

var hemisphericEmitter = particleSystem.createHemisphericEmitter(1.2);

The returned hemisphericEmitter object can be used to change the value of the radius.

The particles are emitted in the direction of the surface normals, ie the lines from the center of the hemisphere through a surface point.

With hemisphericEmitter.radiusRange you can define where along the radius the particles should be emitted. A value of 0 means only on the surface while a value of 1 means all along the radius.

Cylinder Emitter

You can create a cylinder emitter with a given radius, height, radiusRange, directionRandomizer with the following:

var cylinderEmitter = particleSystem.createCylinderEmitter(1,1,0,0);

The returned cylinderEmitter object can be used to change the value of the radius, height, etc.

The particles are emitted in the direction of the surface normals, ie outward from the cylinder

With cylinderEmitter.radiusRange you can define where along the radius the particles should be emitted. A value of 0 means only on the surface while a value of 1 means all along the radius. With cylinderEmitter.directionRandomizer can change how much to randomize the particles direction.

The createDirectedCylinderEmitter method takes three parameters in the following order

• radius: Number,
• height: Number,
• radiusRange: Number,
• direction1: Vector3,
• direction2: Vector3,

The returned cylinderEmitter object can be used to change the values of these properties.

cylinderEmitter.radius = 3.4;
cylinderEmitter.direction1 = new BABYLON.Vector3(-5, 2, 1); 
cylinderEmitter.direction2 = new BABYLON.Vector3(5, 2, -1);

The first parameter is the radius the second is direction1 and third is direction2. (The direction will be generated randomly between direction1 and direction2)

Cone Emitter

To create a cone emitter you use, for example

var coneEmitter = particleSystem.createConeEmitter(2, Math.PI / 3);

The createConeEmitter method takes two parameters in the following order

• radius: Number;
• angle: Number, measured in radians, the vertex angle of the cone.

The cone is created with its axis along the Y-axis and its vertex at the bottom.

With coneEmitter.radiusRange you can define where along the radius the particles should be emitted. A value of 0 means only on the surface while a value of 1 means all along the radius.

The same applies to coneEmitter.heightRange: you can define where along the height the particles should be emitted. A value of 0 means only on the top surface while a value of 1 means all along the height.

Here is an example of a particle system emitted only from the outside of a flat cone: Emitter From Outside A Cone

The returned coneEmitter object can be used to change the values of these properties.

coneEmitter.radius = 3.4;
coneEmitter.angle = Math.PI / 2;

With coneEmitter.emitFromSpawnPointOnly = true you can force the emitter to only emit particles from the spawn point (the start of the cone).

You can use the MeshParticleEmitter to emit your particles from the surface of a mesh:

var meshEmitter = new BABYLON.MeshParticleEmitter(sphere);

By default the direction of the particles will be the normal of the surface of the mesh but you can turn it off and then use a custom direction:

meshEmitter.useMeshNormalsForDirection = false;
meshEmitter.direction1 = new BABYLON.Vector3(0, 1, 0);
meshEmitter.direction2 = new BABYLON.Vector3(0, -1, 0);

Please note that the MeshParticleEmitter is not supported by GPU Particle

Here is an example of a mesh particle emitter: Mesh Emitter

Custom Emitter

To create a custom emitter you need to provide 2 functions:

var customEmitter = new BABYLON.CustomParticleEmitter();

 var id = 0;
 customEmitter.particlePositionGenerator = (index, particle, out) => {
     out.x = Math.cos(id) * 5;
     out.y = Math.sin(id) * 5;
     out.z = 0;
     id += 0.01;
 }

 customEmitter.particleDestinationGenerator = (index, particle, out) => {
     out.x = 0;
     out.y = 0;
     out.z = 0;
 }

A custom emitter will let you define the position and the destination of each particle.

When used with a GPU Particle system the generators(particlePositionGenerator and particleDestinationGenerator) will provide a particle index whereas when used with a CPU Particle system they will provide the actual particle to update.

Here is an example of a custom particle emitter: Custom Emitter