
## Creating Animated Particles
Here we are talking about the animation of the texture of a particle rather than any movement or the particle itself. This feature uses a similar system to that of sprite animation and was added to Babylon.js v3.1. As for sprite animation it require an uniform spritesheet.


You must set the property *isAnimationSheetEnabled* as true for animated particles either on or after construction (fourth parameter)

```javascript
particleSystem = new BABYLON.ParticleSystem("particles", capacity, scene, null, true); // on construction


particleSystem = new BABYLON.ParticleSystem("particles", capacity)
particleSystem.isAnimationSheetEnabled = true; //after construction
```

As an example we are using the same spritesheet as for the sprite manager section of the documentstion.

![sheet](/img/how_to/sprites/08-2.png)

This spritesheet is used as the *particleTexture* 

```javascript
particleSystem.particleTexture = new BABYLON.Texture("textures/player.png", scene, true, false);
```

In this case the third parameter *noMinMaps* is set to true and the fourth, *invertY* to false to read the texture data from top to bottom.

```javascript
particleSystem.spriteCellHeight = 64;
particleSystem.spriteCellWidth = 64;
particleSystem.startSpriteCellID = 0;
particleSystem.endSpriteCellID = 9;
particleSystem.spriteCellChangeSpeed = 4; // default is one
```

The *spriteCellHeight* and *spriteCellWidth* are are the cell width and height for each sprite in the animation sheet. 

![Cell Dimensions](/img/how_to/sprites/08-1.png)

We are only going to use the first 10 cells of the spritesheets and so *startSpriteCellID* is 0 and *endSpriteCellID* is 9. The top, left most sprite is in cell 0 and you count from left to right from the top row downwards.

Starting with Babylon.js v3.3, you can also use

```javascript
particleSystem.spriteRandomStartCell = true;
```
to randomly pick the start cell id of each particles between *startSpriteCellID* and *endSpriteCellID*.

To control the speed of animation you can play around with adjusting direction, emitPower and updateSpeed though doing this adjusts thee whole particle animation and not just the sprite animation frame rate. 

To adjust the sprite animation frame rate you set the property *spriteCellChangeSpeed*. A value of 1 matches the animation rate to lifetime of a particle. The particle will be emitted with the sprite at *startSpriteCellID* and will die displaying the sprite at *endSpriteCellID*. As values increase above 1 the animation frame rate speeds up. Although the particle will be emitted with the sprite at *startSpriteCellID* the sprite on display when the particle dies will depend on the value of the speed and the lifetime of the particle.

## Examples
Adjust emit power and update speed: <Playground id="#0K3AQ2#47" title="Adjust Emit Power And Update Speed" description="Simple example of adjusting emit power and update speed." image=""/>
Cell Change Speed: <Playground id="#0K3AQ2#48" title="Cell Change Speed" description="Simple example of adjusting the cell change speed." image=""/>


## How To Customize Particles

As you will have seen there are many properties of the particle system that can be tweaked to control its look.. Babylon.js allows you even more customization to obtain the system you want. These can be split into into two types; custom functions and custom effects.

## Custom Functions

There are three methods you can customize:

-   startDirectionFunction: specifies the direction for each new particle;
-   startPositionFunction: specifies the start position for each new particle;
-   updateFunction: provides an update to each particle each frame and can effect position, color, age, size etc. Try to keep it simple and fast.

You can directly attach all these functions to the particleSystem.

Since Babylon.js V3.2 you can use the first two, `startDirectionFunction` and `startPositionFunction`, in creating a new particle emitter type as was done with the [createBoxEmitter, createSphereEmitter and createConeEmitter](/divingDeeper/particles/particle_system/shape_emitters).

### Direct

The start direction function has the default form

```javascript
particleSystem.startDirectionFunction = (emitPower: number, worldMatrix: Matrix, directionToUpdate: Vector3, particle: Particle, isLocal: boolean) {
    var randX = randomNumber(this.direction1.x, this.direction2.x);
    var randY = randomNumber(this.direction1.y, this.direction2.y);
    var randZ = randomNumber(this.direction1.z, this.direction2.z);

    Vector3.TransformNormalFromFloatsToRef(randX * emitPower, randY * emitPower, randZ * emitPower, worldMatrix, directionToUpdate);
}
```

The start position function has the default form

```javascript
particleSystem.startPositionFunction = (worldMatrix: Matrix, positionToUpdate: Vector3, particle: Particle, isLocal: boolean): void => {
    var randX = randomNumber(this.minEmitBox.x, this.maxEmitBox.x);
    var randY = randomNumber(this.minEmitBox.y, this.maxEmitBox.y);
    var randZ = randomNumber(this.minEmitBox.z, this.maxEmitBox.z);

    Vector3.TransformCoordinatesFromFloatsToRef(randX, randY, randZ, worldMatrix, positionToUpdate);
};
```

The update function has the default form

```javascript
updateFunction = function (particles) {
    for (var index = 0; index < particles.length; index++) {
        var particle = particles[index];
        particle.age += this._scaledUpdateSpeed;

        if (particle.age >= particle.lifeTime) {
            // Recycle
            particles.splice(index, 1);
            this._stockParticles.push(particle);
            index--;
            continue;
        } else {
            particle.colorStep.scaleToRef(this._scaledUpdateSpeed, this._scaledColorStep);
            particle.color.addInPlace(this._scaledColorStep);

            if (particle.color.a < 0) particle.color.a = 0;

            particle.angle += particle.angularSpeed * this._scaledUpdateSpeed;

            particle.direction.scaleToRef(this._scaledUpdateSpeed, this._scaledDirection);
            particle.position.addInPlace(this._scaledDirection);

            this.gravity.scaleToRef(this._scaledUpdateSpeed, this._scaledGravity);
            particle.direction.addInPlace(this._scaledGravity);
        }
    }
};
```

Two simple examples of customizing the update function

**Randomize the Particle's Color per Frame**

Add the line in the `else` section

```javascript
particle.color = new BABYLON.Color4(Math.random(), Math.random(), Math.random(), 1);
```

<Playground id="#MRRGXL#6" title="Random Colored Particles" description="Simple example of creating random colored particles." image=""/>

**Grow Particles from Size 0 to a Final Size**

A little trickier since the particles are to start from size 0 both min and max sizes must be 0 and a new property must be added to give the final size.

Add in main body of code

```javascript
particleSystem.minSize = 0;
particleSystem.maxSize = 0;

particleSystem.finalSize = 1;
```

And the in the `else` section, to get the particle to final size by 35% of life time add

```javascript
if (particle.age < particle.lifeTime * 0.35) {
    particle.size = (particleSystem.finalSize * particle.age) / (particle.lifeTime * 0.35);
}
```

<Playground id="#WJBZQH#2" title="Growing Particles" description="Simple example of creating growing particles." image=""/>

### Particle Emitter Type

Starting from Babylon.js V3.2 you can create a new object of type `IParticleEmitterType` into the particle system. [Examples](/divingDeeper/particles/particle_system/shape_emitters) of this type of object are `sphereParticleEmitter` and `coneParticleEmitter` which are produced by using createSphereEmitter and createConeEmitter.

These objects are assigned to a new property `particleEmitterType` of the particleSystem.

You use the `startDirectionFunction` and `startPositionFunction` as methods for objects of this type to determine the region of space that the particles are emitted from and their direction of travel.

You can create your own ParticleEmitterType by extending IParticleEmitterType and assigning it to `particleEmitterType`, overriding the default methods `startDirectionFunction` and `startPositionFunction`.

Below is an example to create a new spray emitter which will send streams of particles out of the top, bottom and sides of a cylindrical region.

#### Create Spray Emitter

In order to determine where a particle is emitted from the cylinder is divided into two regions as in the diagram below.

![cylinder emitter](/img/how_to/particles/cyl_particles.png)

Any particle with a start position inside the red region is emitted in the direction from the center to the particle. Any particle with a start position inside the blue region is emitted horizontally.

The `createSprayEmitter` method sets the radius and height of the cylinder, creates a new `SprayParticleEmitter` object which is assigned to the 'particleEmitterType` property.

```javascript
BABYLON.ParticleSystem.prototype.createSprayEmitter = function (radius, height) {
    if (radius === void 0) {
        radius = 0.5;
    }
    if (height === void 0) {
        height = 1;
    }
    var particleEmitter = new BABYLON.SprayParticleEmitter(radius, height);
    this.particleEmitterType = particleEmitter;
    return particleEmitter;
};
```

The `SprayParticleEmitter` class is formed with two methods `startDirectionFunction` and `startPositionFunction` and Babylon.js takes care of the rest.

```javascript
var SprayParticleEmitter = (function () {
    function SprayParticleEmitter(radius, height, directionRandomizer) {
        if (radius === void 0) {
            radius = 0.5;
        }
        if (height === void 0) {
            height = 1;
        }
        if (directionRandomizer === void 0) {
            directionRandomizer = 0;
        }
        this.height = height;
        this.directionRandomizer = directionRandomizer;
        this.radius = radius;
    }

    SprayParticleEmitter.prototype.startDirectionFunction = function (worldMatrix, directionToUpdate, particle) {
        var direction = particle.position.subtract(worldMatrix.getTranslation()).normalize();
        var randX = BABYLON.Scalar.RandomRange(0, this.directionRandomizer);
        var randY = BABYLON.Scalar.RandomRange(0, this.directionRandomizer);
        var randZ = BABYLON.Scalar.RandomRange(0, this.directionRandomizer);
        if (direction.x * direction.x + direction.z * direction.z > 0.1 * this.radius && Math.abs(direction.y) > (0.1 * this.height) / 2) {
            direction.x += randX;
            direction.y = randY;
            direction.z += randZ;
        } else {
            direction.x += randX;
            direction.y += randY;
            direction.z += randZ;
        }
        direction.normalize();
        BABYLON.Vector3.TransformNormalFromFloatsToRef(direction.x, direction.y, direction.z, worldMatrix, directionToUpdate);
    };

    SprayParticleEmitter.prototype.startPositionFunction = function (worldMatrix, positionToUpdate, particle) {
        var s = BABYLON.Scalar.RandomRange(0, Math.PI * 2);
        var h = BABYLON.Scalar.RandomRange(-0.5, 0.5);
        var radius = BABYLON.Scalar.RandomRange(0, this.radius);
        var randX = radius * Math.sin(s);
        var randZ = radius * Math.cos(s);
        var randY = h * this.height;
        BABYLON.Vector3.TransformCoordinatesFromFloatsToRef(randX, randY, randZ, worldMatrix, positionToUpdate);
    };
    return SprayParticleEmitter;
})();
BABYLON.SprayParticleEmitter = SprayParticleEmitter;
```

<Playground id="#V07WF8#10" title="Custom Spray Emitter Showing Container" description="Simple example of a custom spray emitter showing container." image=""/>
<Playground id="#V07WF8#11" title="Custom Spray Emitter Without Container" description="Simple example of a custom spray emitter without container." image=""/>

## Custom Effects

A custom effect is achieved via a fourth parameter when creating a new particle system

```javascript
var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene, customEffect);
```

The customEffect is a type of BABYLON.Effect used to target a valid shader program and is created with the `createEffectForParticles` method of the `engine` object.

This method takes three parameters

```javascript
var customEffect = engine.createEffectForParticles(fragment, uniforms, samplers);
```

-   fragment: string, the name of the fragment shader which can be in the [shaders store](/divingDeeper/materials/advanced/custom_procedural_textures#using-a-shaderstore-for-shader-storage) or the [id of a DOM element](/advanced_topics/introToShaders/shaderCodeInBjs#shader-code-in-script-tags);
-   uniforms: [strings], array of uniforms used in the shader;
-   samplers: [strings], array of names of samplers for additional textures!

### Fragment Shader Assignment

When assigning a fragment shader to the shader store the name should have `FragmentShader` appended. So for example the creation of a custom effect using fragment name `myParticle` would require a `myParticleFragmentShader` added to the shader store

```javascript
BABYLON.Effect.ShadersStore["myParticleFragmentShader"] = [...]
```

```javascript
var customEffect = engine.createEffectForParticles("myParticle", [...]);
```

### Uniforms Assignment

By default Babylon.js will give you a vUV and a vColor varying parameter. It will also transmit you the particle texture.

You can add further uniform variables, for example to pass a `uniform` variable such as time, put it into the uniforms array

```javascript
var customEffect = engine.createEffectForParticles("myParticle", [time]);
```

then pass it using `setFloat` with an `onBind` method for `customEffect`.

```javascript
var time = 0;
var order = 0.1;

customEffect.onBind = function () {
    customEffect.setFloat("time", time);

    time += order;

    if (time > 100 || time < 0) {
        order *= -1;
    }
};
```

you can see an example of the above in this playground  
<Playground id="#1ASENS#43" title="Custom Effect using Shader Store" description="Simple example of a custom effect using shader store." image=""/>

### Particle Effect Object

The particle effect object is a slightly-modified [Babylon Effect Object](/typedoc/classes/babylon.effect). Also notice that the ShadersStore is a namespace upon this special effect-object.



# GPU Particles

Starting from Babylon.js v3.2, you can leverage a new WebGL2 feature, the transform feedback buffer, to drastically boost the performance of particles. Whereas regular particles use the CPU for animation and the GPU for rendering the new WebGL2 API allows Babylon.js to use the GPU for both animation and rendering. With GPU particles, everything is offloaded to the GPU.

Unfortunately this feature is only available when WebGL2 is available. You can use `BABYLON.GPUParticleSystem.IsSupported` to detect if GPU particles can be used. When they are supported, GPU particles can almost be used like regular particles:

```javascript
var particleSystem = new BABYLON.GPUParticleSystem("particles", { capacity:1000000 }, scene);
```

As CPU is no longer involved, you can go crazy with active particles (1000000 in this example). Also, you can use `particleSystem.activeParticleCount` to define the number of active particle count if you want to limit the GPU usage.

**Note:** Sub emitters are not supported in GPU particles.

## Random Texture
It is a shame but there is no good way to get random numbers when running on the GPU. To fill this gap, Babylon.js will create a texture filled with thousands of random values. These values will be read by the particle update shader to animate the particles.
By default the biggest supported texture size is used (16K). You may want to reduce the size of this texture by initializing the system like this:

```javascript
var particleSystem = new BABYLON.GPUParticleSystem("particles", { capacity:1000000, randomTextureSize: 4096 }, scene);
```

## Fallback
As the GPUParticleSystem and the ParticleSystem share almost all their API, it is easy to switch from one to another when WebGL2 is not supported. Keep in mind that the CPU cannot animate as many particles as the GPU can. So you will probably have to reduce the capacity of your system when not using the GPUParticleSystem.

## Stopping a GPU Particle System
When calling `system.stop()` on a `GPUParticleSystem` object, you will force the system to stop generating new particles. But particles will still be rendered even if not visible.

To completely stop a `GPUParticleSystem`, you have to call `dispose()` on it.

## Unsupported Features
The following features are not supported by GPU particles due to their inner nature:
- ManualEmitCount
- Custom effects
- disposeOnStop
- Dual values per gradient (only one value is supported)
- Emit rate gradients are not supported
- Start size gradients are not supported
- Mesh emitter

## Example

GPU Particles: <Playground id="#PU4WYI#4" title="GPU Particles Example" description="Simple example of a GPU particle systems." image=""/>



## Introducing the Particle Helper
Starting with Babylon.js v3.3, you can now use the Particle Helper to create complex particle systems without having to deal with individual properties.

To use the Particle Helper, you only need to know the name of the effect and then call this code:

```
BABYLON.ParticleHelper.CreateAsync("sun", scene).then((set) => {
    set.start();
});
```

This will create regular particle systems. If you want to use GPU particle systems instead, just call this code:

```
BABYLON.ParticleHelper.CreateAsync("sun", scene, true).then((set) => {
    set.start();
});
```

You can find a demo here: <Playground id="#1VGT5D#2" title="Particle Helper Example" description="Simple example of creating a particle system with the particle helper." image=""/>

## ParticleSystemSet

When calling `BABYLON.ParticleHelper.CreateAsync()`, you will get a Promise that will resolve returning a `ParticleSystemSet`.
This class can be used with the following properties and functions:

* `emitterNode`: Use this property to get the transform node used as emitter by the particle systems
* `start(emitter)`: Call this function to start all particle systems associated with the current set. You can use the optional parameter to overwrite the emitter
* `dispose()`: Call this function to stop and clear all particle systems

You can also get the list of particle systems used by the set with `set.systems`.


## Available effects

Each effect can be described using a json file like this one: https://github.com/BabylonJS/Assets/blob/master/particles/systems/sun.json

List of available effects:

Effect name | Image | Playground  
---|---|---|---|--- 
**sun** | ![sun](/img/how_to/particles/sun.jpg) | <Playground id="#1VGT5D#2" title="Particle Sun Demo" description="Particle Sun Demo." image=""/>
**smoke** | ![smoke](/img/how_to/particles/smoke.jpg) | <Playground id="#HT18SF#0" title="Particle Smoke Demo" description="Particle Smoke Demo." image=""/>
**rain** | ![rain](/img/how_to/particles/rain.jpg) | <Playground id="#XQ8H3C#0" title="Particle Rain Demo" description="Particle Rain Demo." image=""/>
**fire** | ![fire](/img/how_to/particles/fire.jpg) | <Playground id="#7IM02G#0" title="Particle Fire Demo" description="Particle Fire Demo." image=""/> 
**explosion** | ![explosion](/img/how_to/particles/explosion.jpg) | <Playground id="#X37LS1#3" title="Particle Explosion Demo" description="Particle Explosion Demo." image=""/>

## Custom ParticleSets

It is reasonably simple to create your own custom particleSet.  Each of the particleSets listed above... is stored in a BabylonJS folder currently located [**here**](https://github.com/BabylonJS/Assets/tree/master/particles/systems). For instance, when you use “sun” as the particleSet _type_, the particleHelper will pick [**this json**](https://github.com/BabylonJS/Assets/blob/master/particles/systems/sun.json) (which defines the 'sun' particleSet _type_).

You may store these custom JSON particleSets anywhere you wish. You can set the base URL for the particleHelper with:  ```BABYLON.ParticleHelper.BaseAssetsUrl = “https://yourBaseUrl”;```

This must be done BEFORE you execute the CreateAsync call which loads your particleSet json file:

```
var myParticleSet = new BABYLON.ParticleHelper.CreateAsync("tornado", scene).then(function(set) {
    set.start();
});
```
In the above example, 'tornado' is NOT the _name_ of a particle system.  It is the name of a particleSet _TYPE_.  In a moment, we will see how the _type_ string is used.

Let's look at the code-line that loads JSON particleSets into the particleHelper:

```Tools.LoadFile(`${ParticleHelper.BaseAssetsUrl}/systems/${type}.json`, (data) => {```

Notice the _type_ is used as the name of the JSON file.  Using the previous example, your complete filename would be ```tornado.json```.

Also notice the /systems/ subFolder heirarchy.  Your custom particleSet JSON file needs to be located in a subFolder called /systems/.  So, ```yourDomain/systems/tornado.json``` is where your file should be located and how it should be named (for our example).

## Generate Custom ParticleSets

You can automatically generate a new JSON particleSet (into a variable) by creatively configuring your particles systems, and then using the ExportSet option.

https://doc.babylonjs.com/api/classes/babylon.particlehelper#exportset

Usage:  ```var mySet = BABYLON.ParticleHelper.ExportSet( [includedPS1, includedPS2, includedPS3...] ); ```


# Snippet server
Starting with Babylon.js v4.2, you can save, load and edit sprite managers using the Inspector. These code snippets are saved on the Babylon.js snippet server. Make a note of the snippet Id shown in when you save it.

![Snippet](/img/how_to/Particles/snippet_screen.png)

When you have a snippet Id, you can easily load the manager using the following code:

```javascript
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 0.2, segments: 32}, scene);
BABYLON.ParticleHelper.CreateFromSnippetAsync("T54JV7", scene, false).then(system => {
    system.emitter = sphere;
});
```

live example: <Playground id="#76U9TK" title="Particle Snippet Server Example" description="Simple example of loading a particle system from the snippet server" image=""/>

You can also specify "_BLANK" for the snippet Id, in this case the system will create an empty one for you to work on:

```
BABYLON.SpriteManager.CreateFromSnippetAsync("_BLANK", scene);
```


## An Introduction to the Particle System

The creation of a particle system requires a name and its capacity and the number of particles in the system (capacity). The system is designed to produce particles that emit at a given rate, move and last for a set lifetime before they are re-cycled and re-emitted.

```javascript
const myParticleSystem = new BABYLON.ParticleSystem("particles", capacity, scene); //scene is optional and defaults to the current scene
```

Before you can start the system running you need to provide a texture so that the particles can be seen. Also you need to set the point of origin for the particle emissions. You set this as an emitter, i.e. a mesh, whose position provides the emission origin or it can be just a vector3. Particles are emitted from random points inside a region of given size about the emission point of origin.

```javascript
myParticleSystem.particleTexture = new BABYLON.Texture("path to texture");

myParticleSystem.emitter = mesh;
myParticleSystem.emitter = point; //a Vector3

myParticleSystem.start(); //Starts the emission of particles
```

To stop the emission use
```javascript
myParticleSystem.stop();
```
While this stops the emission of new particles the ones already emitted will continue to exist up to their time limit.  To stop and clear particles at the same time use

```javascript
myParticleSystem.stop();
myParticleSystem.reset(); //Reset to empty system
```
Minimal particle system <Playground id="#0K3AQ2#3" title="Minimal Particle System" description="Simple example of creating a minimal particle system." image=""/>

You can do this all in one line using the *ParticleHelper* to create a default configured particle system.

Default particle system using the helper: <Playground id="#0K3AQ2#4" title="Default Particle System Using The Helper" description="Simple example of using the particle helper to create the default particle system." image=""/>

Emit particles from a box position: <Playground id="#0K3AQ2#5 " title="Emit Particles From a Box Position" description="Simple example showing how to set a particle emission point to a box's position." image=""/>

By fixing the size of the emission region you can constrain the emission region. The values used will depend on the size of the emitted particles and the size of the region. The center of an emitted particle could be inside a box, say close to the edge, yet the particle could be big enough for its perimeter to be outside the box.

Emit particles from wholly inside the box: <Playground id="#0K3AQ2#7 " title="Emit Particles From Completely Inside a Box" description="Simple example showing how to make particles emit from completely inside of a box." image=""/>
When you want the particle system to start after 3 seconds for example you use one of the following

```javascript
myParticleSystem.start(3000); //time in milliseconds

myParticleSystem.startDelay = 3000;
```

Delayed start particle system: <Playground id="#0K3AQ2#8" title="Particle System With a Delayed Start" description="Simple example showing how to create a particle system and delay its start." image=""/>

To run the particle system for a limited time you use 
```javascript
myParticleSystem.targetStopDuration = 5;
```
The target duration before the system stops is dependent of the how fast the particles system updates the particles frames. The faster the update speed the shorter time before the system stops. You set the update speed using
```javascript
myParticleSystem.updateSpeed = 0.01;
```

Once stopped you can dispose of the particle system. Very useful if you want to create a one shot particle system with a specific targetStopDuration.

```javascript
myParticleSystem.disposeOnStop = true;
```

## Pre-warming
Starting with Babylon.js v3.3, you can now specify a pre-warming period to make sure your system is in a correct state before rendering.

To do so, you need to setup two properties:
- `system.preWarmCycles`: Gets or sets a value indicating how many cycles (or frames) must be executed before first rendering (this value has to be set before starting the system). Default is 0 (ie. no pre-warming)
- `system.preWarmStepOffset`: Gets or sets a value indicating the time step multiplier to use in pre-warm mode (default is 1)

So if you set your system like this:

```
system.preWarmCycles = 100;
system.preWarmStepOffset = 5;
system.start();
```

It will execute the particle animation loop 100 times with a time step set to 5 times faster than real time. The more cycles you want, the slower the system will be to start. So it could be interesting to increase the time step to have less cycles to run. But keep in mind that a too big time step will introduce issues if the lifetime of a particle is smaller than the time step.

Here is an example of pre-warming: <Playground id="#MX2Z99#8" title="Particle Pre-Warming Example" description="Simple example of pre warming particles." image=""/>

## Particle Texture 
To apply a texture to the particles, such as  
![Flare](/img/how_to/Particles/Flare.png)

set the `particleTexture`

```javascript
myParticleSystem.particleTexture = new BABYLON.Texture("PATH TO IMAGE", scene);
```

You can also apply a mask to a texture to filter some colors, or filter a part of the alpha channel.

```javascript
myParticleSystem.textureMask = new BABYLON.Color4(0.1, 0.8, 0.8, 1.0);
```

This example produces the following  
![TextureMask](/img/how_to/Particles/12-1.png)

To use multiple textures in the scene use multiple particle systems all of which can use the same emitter object.

## Noise texture
Starting with Babylon.js v3.3, you can now use noise texture to "perturbate" the position of particles. The noise texture is technically used to apply change to the direction of the particles:

```
var noiseTexture = new BABYLON.NoiseProceduralTexture("perlin", 256, scene);
noiseTexture.animationSpeedFactor = 5;
noiseTexture.persistence = 2;
noiseTexture.brightness = 0.5;
noiseTexture.octaves = 2;

particleSystem.noiseTexture = noiseTexture;
particleSystem.noiseStrength = new BABYLON.Vector3(100, 100, 100);
```

Alongside setting the noiseTexture you can also control the strength applied on each axis with *particleSystem.noiseStrength*.

Adjustable noise: <Playground id="#R1JWLA#3" title="Changing Particle Direction With Noise" description="Simple example of changing particle direction based on a noise texture." image=""/>

## Local space

If the emitter is a mesh and you set `particleSystem.isLocal = true` then all particles will be generated into the mesh local space (so rotation or transforming the mesh will transform the entire particle system).

Demo: <Playground id="#LNRAI3" title="Particles In Local Space" description="Simple example showing how to make particles emit in local space." image=""/>

## World offset
Starting with Babylon.js v4.0, you can set up a world offset to your particles with:
```
particleSystem.worldOffset = new BABYLON.Vector3(100, 20, -453);
```

This command will shift the particles using the offset (Mostly used when you need to keep the camera at the center of the world to increase precision and then move the world instead).


So far we have barely touched the surface of the particle system. There is a wide range of properties to find out about to further tune the particle system.



# Basic Particle Properties
There are a wide range of properties to tune the behavior of the particles in the system including their lifetime, size, color, emission rates, speed, direction of travel, orientation and application of gravity.

On this page we will consider them and how to set a range of values for them. On the next we will show how these settings can be changed either over a particles lifetime or the duration of the system when it is set.


## Size
The size of the particles can be varied randomly within a given range,

```javascript
particleSystem.minSize = 0.1;
particleSystem.maxSize = 0.5;
```
Size range: <Playground id="#0K3AQ2#11" title="Particle Size Range Example" description="Simple example showing how to set a size range for a particle system." image=""/>

## Scale
When you want to change the particle base shape from square to rectangular scale x and y values using

```javascript
particleSystem.minScaleX = 0.1;
particleSystem.maxScaleX = 0.5;

particleSystem.minScaleY = 0.2;
particleSystem.maxScaleY = 0.4;
```

Scale range: <Playground id="#0K3AQ2#12" title="Particle Scale Range Example" description="Simple example showing how to set a scale range for a particle system." image=""/>

## Color
There are three colors that can be set for the particle system, two which are combined (or blended) during the lifetime of the particle and a third that it takes on just before the end of its lifetime. 

```javascript
particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);
particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);
```

Color: <Playground id="#0K3AQ2#21" title="Particle Color Example" description="Simple example showing how to set colors of particles." image=""/>

## Speed
The speed of a particle is governed by the amount of power applied to a particle when emitted. The more power the faster it goes. The emission power, and hence the speed, of the particles can be varied randomly within a given range,

```javascript
particleSystem.minEmitPower = 1;
particleSystem.maxEmitPower = 3;
```
 
Power range: <Playground id="#0K3AQ2#28" title="Particle Power Range Example" description="Simple example showing how to set a power range for a particle system." image=""/>

## Rotation
You can define a range of angular speeds in radians per second:

```javascript
particleSystem.minAngularSpeed = 0;
particleSystem.maxAngularSpeed = Math.PI;
```

You can also define a particle's initial rotation angle with

```
particleSystem.minInitialRotation = 0;
particleSystem.maxInitialRotation = Math.PI / 2;
```

Rotating: <Playground id="#0K3AQ2#23" title="Rotating Particles" description="Simple example showing how to rotate particles." image=""/>
Rotating with set initial angle: <Playground id="#0K3AQ2#25" title="Rotating Particles With Initial Angle" description="Simple example showing how to rotate particles with an initial angle." image=""/>

## Translation Pivot

By default the center of transformation for a particle is at the middle of its plane. You are able to set it to a different point relative to its middle. To change the pivot position use

```javascript
particleSystem.translationPivot = new BABYLON.Vector2(2, 2); // across and up the containing plane
```

Rotation with translation pivot: <Playground id="#0K3AQ2#49" title="Changing Particle Pivot Points" description="Simple example showing how to change the pivot point of a particle." image=""/>

## Direction
Two directions can be specified. If you specify just *direction1* the particles will travel randomly in the general direction given. When both directions are given the particles will travel in a direction between the two. In practice the vectors act as giving a velocity (direction and speed) to the particles; i.e. particles with direction (10, -10, 10) travel 10 times faster than those with direction (1, -1, 1).

```javascript
particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3);
particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3);
```

direction range: <Playground id="#0K3AQ2#31" title="Particle Direction Range Example" description="Simple example showing how to set a direction range for a particle system." image=""/>

## Gravity
A value for gravity can be applied as a vector3 in any direction. For example if negative in the Y direction the particles will slowly be pulled downwards.

```javascript
particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);
```
Direction and gravity: <Playground id="#0K3AQ2#32" title="Direction And Gravity" description="Simple example showing how to set direction and gravity in a particle system." image=""/>
 
##  Emit Rate
The emit rate determines the number of particles emitted per second. The larger the number the more dense appears the emitted cloud of particles. As particles die they are recycled to be emitted again. If their lifetime is long enough and their emission rate fast enough it is possible for there to be a gap in the emission of particles. 

![emitRate](/img/how_to/Particles/12-3.png)

```javascript
particleSystem.emitRate = 1000;
```

You can stop the continuous emission of particles by setting a manual emit count.

```javascript
particleSystem.manualEmitCount = 300;
```

In this case the number of particles given by the count are emitted and there is no further emissions of particles.

Slow emit rate: <Playground id="#0K3AQ2#34" title="Slow Emission Rate" description="Simple example showing how to set a slow emission rate of a particle system." image=""/>
Fast emit rate: <Playground id="#0K3AQ2#35" title="Fast Emission Rate" description="Simple example showing how to set a fast emission rate of a particle system." image=""/>
Emit just 10: <Playground id="#0K3AQ2#36" title="Emission Limits" description="Simple example showing how to limit particle emission to a certain number." image=""/>

## Lifetime
The time taken for particles to disappear (or die) after being emitted can be varied within a chosen range. A particle's lifetime is set as a random value between a minimum and maximum

```javascript
particleSystem.minLifeTime = 0.3;
particleSystem.maxLifeTime = 1.5;
```

Short lifetime: <Playground id="#0K3AQ2#37" title="Short Particle Lifetimes" description="Simple example showing how to create particles with a short lifetime." image=""/>
Long lifetime: <Playground id="#0K3AQ2#38" title="Long Particle Lifetimes" description="Simple example showing how to create particles with a long lifetime." image=""/>


## Adjustable Examples
Adjust Min & Max of EmitBox: <Playground id="#0K3AQ2#45" title="Adjust Min And Max of EmitBox" description="Simple example showing how to adjust the min and max of an emission box." image=""/>
Adjust Emit Life Time, Rate, Power and Update Speed: <Playground id="#0K3AQ2#46" title="Adjust Various Particle Properties" description="Simple example showing how to adjust various particle properties." image=""/>


# Color Ramps and Blends, and Billboard Mode

## Ramp Gradients
Ramp gradients produce a gradient color texture by assigning a color to an index between 0 and 1

![ramp gradient](/img/how_to/Particles/rampgrad.png)

To produce a gradient color texture, such as the color bar above, you need the *addRampGradient* method

```javascript
particleSystem.addRampGradient(fraction_of_bar, color3);
```
For this particular color bar you use
```
particleSystem.addRampGradient(0.0, new BABYLON.Color3(1, 1, 1));
particleSystem.addRampGradient(0.09, new BABYLON.Color3(209/255, 204/255, 15/255));
particleSystem.addRampGradient(0.18, new BABYLON.Color3(221/255, 120/255, 14/255));
particleSystem.addRampGradient(0.28, new BABYLON.Color3(200/255, 43/255, 18/255));
particleSystem.addRampGradient(0.47, new BABYLON.Color3(115/255, 22/255, 15/255));
particleSystem.addRampGradient(0.88, new BABYLON.Color3(14/255, 14/255, 14/255));
particleSystem.addRampGradient(1.0, new BABYLON.Color3(14/255, 14/255, 14/255));
```
To use them you need to turn them on.
```javascript
particleSystem.useRampGradients = true;
```

By default the alpha value of the particle (built from `textureAlpha * particleColorAlpha`) is used to as the index get the ramp color from the ramp gradient using this formula: `finalColor = textureColor * particleColor * rampColor`.

Ramp gradient: <Playground id="#0K3AQ2#42" title="Ramp Gradient Example" description="Simple example of using ramp gradients." image=""/>

To give you more control you can use a remap function to change the index over time with  
```javascript
particleSystem.addColorRemapGradient(fraction_of_lifetime_elapsed, minimum_index, maximum_index); //set a range of values for the index at the given time point
```

```javascript
particleSystem.addColorRemapGradient(0, 0, 0.1);
particleSystem.addColorRemapGradient(0.2, 0.1, 0.8);
particleSystem.addColorRemapGradient(0.3, 0.2, 0.85);
particleSystem.addColorRemapGradient(0.35, 0.4, 0.85);
particleSystem.addColorRemapGradient(0.4, 0.5, 0.9);
particleSystem.addColorRemapGradient(0.5, 0.95, 1.0);
particleSystem.addColorRemapGradient(1.0, 0.95, 1.0);
```

The color remap gradients define a min and max that will vary over the particle lifetime.  The index is then remapped from [min, max] to [0, 1] with this formula: `finalIndex = clamp((index - min) / (max - min), 0.0, 1.0)`.

With remap over lifetime of particle: <Playground id="#0K3AQ2#43" title="Ramp Gradient With Remap Over Liftetime" description="Simple example of using ramp gradients with a remap over the lifetime of the particle." image=""/>

Ultimately you can also remap the alpha value generated per pixel with:
```
particleSystem.addAlphaRemapGradient(0, 0, 0.1);
particleSystem.addAlphaRemapGradient(1.0, 0.1, 0.8);
```

The alpha remap will compute the final index value using this formula: `finalIndex = clamp((textureAlpha * particleColorAlpha * rampColor.a - min) / (max - min), 0.0, 1.0)`.


## Particle blending
There are different ways that particles are blended with the scene and these are set with `blendMode`.

```javascript
particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;
```

```javascript
particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_STANDARD;
```

* `BLENDMODE_ONEONE` - colors are added without alpha affecting the result, default;
* `BLENDMODE_STANDARD` - colors are added using particle’s alpha (ie. color * (1 - alpha) + particleColor * alpha).
* `BLENDMODE_ADD` - colors are added but only particle color uses particle’s alpha (ie. color + particleColor * alpha).
* `BLENDMODE_MULTIPLY` - colors are multiplied and added to (1 - alpha) (ie. color * particleColor +  1 - alpha). 
* `BLENDMODE_MULTIPLYADD` - two passes rendering with `BLENDMODE_MULTIPLY` and then `BLENDMODE_ADD`. 

## Billboard Modes
By default all particles are rendered as billboards, that is to face the camera. But you can decide to instead align them with particle direction with 
```javascript
particleSystem.isBillboardBased = false;
```

When billboard is enabled you can decide to either have a full billboard (on all axes) or only on Y axis with this code:

```javascript
particleSystem.billboardMode = BABYLON.ParticleSystem.BILLBOARDMODE_Y;
```

You can also use stretched billboard which will be like a full billboard mode but with an additional rotation to align particles with their direction.

```javascript
particleSystem.billboardMode = BABYLON.ParticleSystem.BILLBOARDMODE_STRETCHED;
```

## Examples
Billboard mode Y - steam: <Playground id="#B9HKG0#0" title="Billboard Mode Y" description="Simple example of using billboard mode in Y." image=""/>
Billboard false - spherical: <Playground id="#EV0SEQ" title="Billboard Mode False" description="Simple example of setting billboard mode to false." image=""/>
Multiply blend mode - smoke pillar: <Playground id="#KUDH9F#1" title="Multiply Blend Mode" description="Simple example of setting particle blend mode to multiply." image=""/>
Add blend mode and billboard mode stretched - sparks (select scene, press space): <Playground id="#5A4TP5" title="Add Blend Mode And Stretched Billboard Mode" description="Simple example of setting particle blend mode to add and billboard mode to stretched." image=""/>
Ramp and blend - explosion (select scene, press space): <Playground id="#VS5XS7#0" title="Ramp and Blend" description="Simple example of a ramp and blend." image=""/>


# 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:

```javascript
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.

```javascript
pointEmitter.direction1 = new BABYLON.Vector3(-5, 2, 1); 
pointEmitter.direction2 = new BABYLON.Vector3(5, 2, 1);  
```

<Playground id="#08YT34" title="Point Emitter" description="Simple example of a particle point emitter." image=""/>

## Box Emitter

To create a box emitter you use, for example

```javascript
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.

```javascript
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); 
```

<Playground id="#MRRGXL#1" title="Box Emitter" description="Simple example of a particle box emitter." image=""/>

## Sphere Emitter

You can create a sphere emitter with a given radius, 1.2 for example,  using

```javascript
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.

<Playground id="#MRRGXL#2" title="Sphere Emitter" description="Simple example of a particle sphere emitter." image=""/>

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

```javascript
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.

```javascript
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)

<Playground id="#MRRGXL#3" title="Sphere Emitter With Directions" description="Simple example of a particle sphere emitter with directions." image=""/>

## Hemispheric Emitter

You can create a hemispheric emitter with a given radius, 1.2 for example,  using

```javascript
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.

<Playground id="#FHIQYC" title="Hemispheric Emitter" description="Simple example of a particle hemispheric emitter." image=""/>

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:

```javascript
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

<Playground id="#UL4WC0" title="Cylinder Emitter" description="Simple example of a particle cylinder emitter." image=""/>

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.

```javascript
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)

<Playground id="#UL4WC0#5" title="Cylinder Emitter With Directions" description="Simple example of a particle cylinder emitter with directions." image=""/>

## Cone Emitter

To create a cone emitter you use, for example

```javascript
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: <Playground id="#B9HKG0#1" title="Emitter From Outside A Cone" description="Simple example of a particle system emitting from outside of a flat cone." image=""/>

The returned `coneEmitter` object can be used to change the values of these properties.

```javascript
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).

<Playground id="#MRRGXL#4" title="Cone Emitter" description="Simple example of a particle cone emitter." image=""/>
<Playground id="#MRRGXL#5" title="Cone Emitter Rotating" description="Simple example of a particle cone emitter rotating." image=""/>


# Mesh Emitter

You can use the MeshParticleEmitter to emit your particles from the surface of a mesh:

```javascript
 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: <Playground id="#N775HF" title="Mesh Emitter" description="Simple example of a particle mesh emitter." image=""/>

## Custom Emitter

To create a custom emitter you need to provide 2 functions:

```javascript
 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: <Playground id="#77BKY4" title="Custom Emitter" description="Simple example of a particle custom emitter." image=""/>


# Sub Emitters

Starting from Babylon.js v3.2, you can create sub emitters which let you spawn a new particle from an existing particle. Each one of these spawned sub particle systems is totally independent from the parent.

**Note:** Sub emitters are NOT supported in GPU particles.

## How To Use Sub Emitters

The list of sub particle systems to be used as sub emitters is kept in an array and assigned top the new property `subEmitters` of the appropriate system. 

```javascript
// Create sub emitter
var subEmitter = new BABYLON.SubEmitter(subParticleSystem);
// Have the sub emitter spawn the particle system when the particle dies
subEmitter.type = BABYLON.SubEmitterType.END;
// Set the +Y direction of the sub emitter equal to the direction the particle is/was heading
subEmitter.inheritDirection = true;
// How much of the existing particles speed should be added to the emitter particles
subEmitter.inheritedVelocityAmount = 1;

particleSystem.subEmitters = [subEmitter];
```

Specifying an array of arrays of sub emitters will choose a random array and all the sub emitters in the chose array will be attached to the spawned particle.
```javascript
particleSystem.subEmitters = [[subEmitter],[subEmitter, subEmitter2, subEmitter3], [subEmitter4]];
```

## END sub emitter type
When a particle dies one of the particle systems in the array is selected at random as the one to be spawned. It is then cloned and rendered. Any element of the array can itself have `subEmitters` and hence a chain of sub emitters can be formed. In this case the property `manualEmitCount` could be used to avoid an infinite loop of creating and spawning new systems.

## ATTACHED sub emitter type
When a particle is spawned this emitter will be cloned and attached to the new particle. This can be used to create a trailing particle effect on new particles.

To support attached sub emitter's to have their orientation accounted for when emitting particles, their emitter must be a mesh type:
```javascript
subEmitter.particleSystem.emitter = new BABYLON.Mesh("", scene);
```

## Active Sub Systems
Each particle system with that has sub emitters also has a property `activeSubSystems` which is an array containing all currently active sub particle systems.

You can stop the root `ParticleSystem` and all `activeSubSystems` by calling the stop function on the root system:

```javascript
particleSystem.stop(); 
```

When you want to stop the root system without affecting the `activeSubSystems`, you pass false to the Stop function:

```javascript
particleSystem.stop(false);
```

## Demos

<Playground id="#T0L01N#47" title="Sub Emitters" description="Simple example of sub emitters." image=""/>
<Playground id="#9NHBCC#1" title="Sub Emitters On Death Only" description="Simple example of sub emitters on death only" image=""/>
<Playground id="#7HH1UH" title="Complete example (hit Space to launch a barrel)" description="Complete Sub Emitter Example" image=""/>


# Change Particle Behaviors Over Time
Some properties of a particle, size or color for example, can be changed over their lifetime. Others, such as emit rate, start size or lifetime, can be changed over the duration of the particle system.

Changing relevant properties over the duration of the particle system is available from Babylon.js V3.3 onwards, provided, of course, you set the *targetStopDuration*, When the duration is set you can alter appropriate properties from the start, 0, to the end, 1, by adding a gradient method related to the property.

Whether it is over a particle lifetime or the system duration the general form to change a specific property value is  

```javascript
particleSystem.add<PROPERTY>Gradient(fraction_of_time_period_elapsed, property_value); //set a value at given time point
```
and for a range of property values

```javascript
particleSystem.add<PROPERTY>Gradient(fraction_of_time_period_elapsed, minimum_property_value, maximum_property_value); //set a range of values at given time point
```

In both cases we recommend that you add gradients for the start, 0, and end, 1, even when setting other time points between 0 and 1.

To remove a gradient you use 

```javascript
particleSystem.remove<PROPERTY>Gradient(fraction_of_time_period_elapsed);
```
There are two time periods used one for a particle lifetime and one for the system duration both running from 0, start to 1, stop.

## Change Size Over Lifetime
To change size over the lifetime of the particle use

```javascript
particleSystem.addSizeGradient(0, 0.5); //size at start of particle lifetime  
particleSystem.addSizeGradient(1, 3); //size at end of particle lifetime
```

For a range of values use
```javascript
particleSystem.addSizeGradient(0, 0.5, 0.8); //size range at start of particle lifetime  
particleSystem.addSizeGradient(0.4, 1, 2); //size range at 2/5 of duration of particle system  
particleSystem.addSizeGradient(1.0, 3, 4); //size range at end of particle lifetime
```

To remove a size gradient you use
```javascript
particleSystem.removeSizeGradient(0.4);
```
Size increases over lifetime: <Playground id="#0K3AQ2#18" title="Particle Size Increases Over Liftime" description="Simple example of particle size increasing over the lifteime of a particle." image=""/>
Size increases then decreases over lifetime: <Playground id="#0K3AQ2#19" title="Particle Size Increases Then Decreases Over Liftime" description="Simple example of particle size increasing then decreasing over the lifteime of a particle." image=""/>

## Change Color Over Lifetime

To change size over the lifetime of the particle use
```javascript
particleSystem.addColorGradient(0, new BABYLON.Color4(1, 1, 1, 0)); //color at start of particle lifetime
particleSystem.addColorGradient(1, new BABYLON.Color4(1, 1, 1, 1)); //color at end of particle lifetime
```

For a range of values use

```javascript
particleSystem.addColorGradient(0, new BABYLON.Color4(1, 1, 1, 0), new BABYLON.Color4(1, 0, 1, 0)); //color range at start of particle lifetime
particleSystem.addColorGradient(0.4, new BABYLON.Color4(1, 1, 1, 0.5), new BABYLON.Color4(1, 0, 1, 0.5)); //color range at 2/5 of particle lifetime
particleSystem.addColorGradient(1.0, new BABYLON.Color4(1, 1, 1, 1), new BABYLON.Color4(1, 0, 1, 1)); //color range at end of particle lifetime
```

To remove a color gradient you use
```javascript
 particleSystem.removeColorGradient(0.4);
 ```

color change over lifetime: <Playground id="#0K3AQ2#20" title="Particle Color Change Over Liftime" description="Simple example of particle color changing over the lifteime of a particle." image=""/>
color change with ranges over lifetime: <Playground id="#0K3AQ2#22" title="Particle Color Change With Ranges Over Liftime" description="Simple example of particle color changing with ranges over the lifteime of a particle." image=""/>

## Change Speed Over Lifetime
To change the speed (magnitude of velocity) over the lifetime of the particle use

```javascript
particleSystem.addVelocityGradient(0, 0.5); //applied power at start of particle lifetime
particleSystem.addVelocityGradient(1, 3); //applied power at end of particle lifetime
```

For a range of values use
```javascript
particleSystem.addVelocityGradient(0, 0.5, 0.8); //applied power range at start of particle lifetime
particleSystem.addVelocityGradient(0.4, 1, 2); //applied power range at 2/5 of duration of particle system
particleSystem.addVelocityGradient(1.0, 3, 4); //applied power range at end of particle lifetime
```

To remove a velocity gradient you use
```javascript
particleSystem.removeVelocityGradient(0.4);
```

Speed increases over lifetime: <Playground id="#0K3AQ2#29" title="Particle Speed Increases Over Liftime" description="Simple example of particle speed increasing over the lifteime of a particle." image=""/>
Speed increases then decreases over lifetime: <Playground id="#0K3AQ2#30" title="Particle Speed Increases Then Decreases Over Liftime" description="Simple example of particle speed increasing then decreasing over the lifteime of a particle." image=""/>

## Limit Speed Over Lifetime
You can define by how much to limit the speed of a particle with
```javascript
particleSystem.limitVelocityDamping = 0.1; //damping factor
```
A limit will be used to check the current speed of the particle over its lifetime and if the limit is reached then the damping factor is applied as speed * damping factor

To set the speed limit use
```javascript
particleSystem.addLimitVelocityGradient(0, 10); //speed limit at start of particle lifetime
particleSystem.addLimitVelocityGradient(1, 0.1); //speed limit at end of particle lifetime
```

For a range of values use
```javascript
particleSystem.addLimitVelocityGradient(0, 9, 10); //speed limit range at start of particle lifetime
particleSystem.addLimitVelocityGradient(0.4, 2, 3); //speed limit range at 2/5 of duration of particle system
particleSystem.addLimitVelocityGradient(1.0, 0.1, 0.2); //speed limit range at end of particle lifetime
```

To remove a speed limit gradient you use
```javascript
particleSystem.removeLimitVelocityGradient(0.4);
```

Speed limit increases over lifetime: <Playground id="#0K3AQ2#33" title="Particle Speed Limit Increases Over Liftime" description="Simple example of particle speed limit increasing over the lifteime of a particle." image=""/>

## Change Rotation Speed Over Lifetime
To change the rotation or angular speed over the lifetime of the particle use

```javascript
particleSystem.addAngularSpeedGradient(0, 0.5); //angular speed at start of particle lifetime
particleSystem.addAngularSpeedGradient(1, 3); //angular speed at end of particle lifetime
```

For a range of values use
```javascript
particleSystem.addAngularSpeedGradient(0, 0.5, 0.8); //angular speed range at start of particle lifetime
particleSystem.addAngularSpeedGradient(0.4, 1, 2); //angular speed range at 2/5 of duration of particle system
particleSystem.addAngularSpeedGradient(1.0, 3, 4); //angular speed range at end of particle lifetime
```

To remove a angular speed gradient you use
```javascript
particleSystem.removeAngularSpeedGradient(0.4);
```

AngularSpeed increases over lifetime: <Playground id="#0K3AQ2#26" title="Particle AngularSpeed Increases Over Liftime" description="Simple example of particle Angularspeed increasing over the lifteime of a particle." image=""/>
AngularSpeed increases then decreases over lifetime: <Playground id="#0K3AQ2#27" title="Particle AngularSpeed Increasing and Decreasing Over Liftime" description="Simple example of particle Angularspeed increasing and decreasing over the lifteime of a particle." image=""/>

## Change Drag Over Lifetime
You can simulate air friction by applying a drag to the particle and you can change the amount of drag a particle experiences over its lifetime. Drag is applied in the direction of the particles velocity. A drag of 0.8 will reduce the velocity to 20% of its value. When the drag is &gt; 1 the particles direction will reverse.

To change drag over the lifetime of the particle use

```javascript
particleSystem.addDragGradient(0, 0.1); //drag at start of particle lifetime  
particleSystem.addDragGradient(1, 0.8); //drag at end of particle lifetime
```

For a range of values use
```javascript
particleSystem.addDragGradient(0, 0.1, 0.2); //drag range at start of particle lifetime  
particleSystem.addDragGradient(0.4, 0.5, 0.6); //drag range at 2/5 of duration of particle system  
particleSystem.addDragGradient(1.0, 0.8, 0.9); //drag range at end of particle lifetime
```

To remove a drag gradient you use
```javascript
particleSystem.removeDragGradient(0.4);
```
Drag &le; 1: <Playground id="#0K3AQ2#39" title="Particle Drag Changing Over Liftime 1" description="Simple example of particle drag changing over the lifteime of a particle." image=""/>
Drag &gt; 1: <Playground id="#0K3AQ2#40" title="Particle Drag Changing Over Liftime 2" description="Simple example of particle drag changing over the lifteime of a particle." image=""/> 

## Change Emit Rate Over Duration
For example as energy builds over the duration of the particle system and increases the emit rate you might use,

```javascript
particleSystem.targetStopDuration = 8

particleSystem.addEmitRateGradient(0, 10); //emit rate at start of particle system
particleSystem.addEmitRateGradient(1.0, 500); //emit rate at end of particle system
```

Setting a range of lifetimes
```javascript
particleSystem.targetStopDuration = 8

particleSystem.addEmitRateGradient(0, 10, 20); //emit rate range at start of particle sysstem
particleSystem.addEmitRateGradient(0.4, 200, 250); //emit rate range at 2/5 of duration of particle sysstem
particleSystem.addEmitRateGradient(1, 500, 600); //emit rate range at end of particle sysstem
```

remove gradient at 0.4
```javascript
particleSystem.removeEmitRateGradient(0.4);
```

Faster emit rate over duration: <Playground id="#0K3AQ2#13" title="Particle Faster Emission Rate Over Duration" description="Simple example of faster particle emission rates over the duration." image=""/>

Increasing and then decreasing emit rates over duration: <Playground id="#0K3AQ2#14" title="Increasing Then Decreasing Emission Rates Over Duration" description="Simple example of increasing then decreasing the emission rate over the duration." image=""/>

## Change Lifetime Over Duration

For example to shorten lifetime as energy is used up over the duration of the particle system you might use,

```javascript
particleSystem.targetStopDuration = 8

particleSystem.addLifeTimeGradient(0, 0.5); //lifetime at start of particle sysstem
particleSystem.addLifeTimeGradient(1, 0); //lifetime at end of particle system
```

Setting a range of lifetimes
```javascript
particleSystem.targetStopDuration = 8

particleSystem.addLifeTimeGradient(0, 0.5, 0.75); //lifetime range at start of particle sysstem
particleSystem.addLifeTimeGradient(0.4, 0.25, 0.5); //lifetime range at 2/5 of duration of particle sysstem
particleSystem.addLifeTimeGradient(1, 0, 0.1); //lifetime range at end of particle sysstem
```

remove gradient at 0.4
```javascript
particleSystem.removeLifeTimeGradient(0.4);
```

Shorter lifetimes over duration: <Playground id="#0K3AQ2#9" title="Shorter Lifetimes Over Duration" description="Simple example of shortening lifetimes of particles over duration." image=""/> 
Increasing and then decreasing lifetimes over duration: <Playground id="#0K3AQ2#15" title="Increasing and Decreasing Lifetimes Over Duration" description="Simple example of increasing and then decreasing lifetimes over duration." image=""/>


## Change Start Size Over Duration
To change the size of a particle on emission over the duration of the particle system use

```javascript
particleSystem.targetStopDuration = 8

particleSystem.addStartSizeGradient(0, 0.25); //start size at start of particle sysstem
particleSystem.addStartSizeGradient(1, 1.5); //start size at end of particle system
```

Setting a range of start sizes
```javascript
particleSystem.targetStopDuration = 8

particleSystem.addStartSizeGradient(0, 0.5, 0.75); //start size range at start of particle sysstem
particleSystem.addStartSizeGradient(0.4, 0.25, 0.5); //start size range at 2/5 of duration of particle sysstem
particleSystem.addStartSizeGradient(1, 0, 0.1); //start size range at end of particle sysstem
```

remove gradient at 0.4
```javascript
particleSystem.removeStartSizeGradient(0.4);
```

Increasing start sizes over duration: <Playground id="#0K3AQ2#41 " title="Increasing Particle Start Sizes Over Duration" description="Simple example of increasing particle start sizes over duration." image=""/>


## Particles

Babylon.js supports three types of particles. These are based on sprites, meshes and points.

The particle system uses small 2D sprites which may be animated and always face the camera to simulate effects such as smoke. The clouds of particles produced can be controlled with a wide range of properties. This differs from the other two systems as it has parameters to control its behavior whilst the others have to have behavior coded. From Babylon.js V3.2, where the browser supports WebGL2, GPU particles are available. These make full use of the GPU though there are some restrictions in its use. When WebGL2 is not available the *GPUParticleSystem* will fall back to the *ParticleSystem* automatically.


The solid particle system (SPS) combines one or more base meshes into a single mesh requiring a single draw call per frame. There are many features available that allow you to control the behavior of the individual mesh particles.

A points cloud particle system (PCS) is a single updatable mesh and uses a material property to display its vertices as pixel squares of a size you set. The points cloud system provides some methods to manage the individual particles.

Particle System

Coming next

Particle System Intro

Scratch the surface of how particles and particle systems work in Babylon.js.

Basic Particle Properties

Learn all about tuning basic particle properties in Babylon.js.

Changing Particle Properties Over Time

Learn how to change particle properties over time in Babylon.js.

Shape Emitters

Learn about Particle System Shape Emitters in Babylon.js.

Animating Particles

Learn how to animate particles in Babylon.js.

Customizing Particles

Learn how to customize particles in Babylon.js.

The Particle Helper

Learn all about the fabulous particle helper in Babylon.js.

Color Ramps, Blends, and Billboard Mode

Learn about color ramps, blends, and particle billboard mode in Babylon.js.

Sub Emitters

Learn about color ramps, blends, and particle billboard mode in Babylon.js.

GPU Particles

Learn all about GPU particles in Babylon.js.

Particle Snippet Server

Learn how to save particle systems to the Babylon.js snippet server.