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.
Sphere EmitterWith 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)
Sphere Emitter With DirectionsHemispheric 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.
Hemispheric EmitterWith 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
Cylinder EmitterWith 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)
Cylinder Emitter With DirectionsCone 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).
Mesh Emitter
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