
## Creating Animated Particles

Here we are talking about the animation of the texture of a particle rather than any movement of the particle itself. This feature uses a similar system to that of sprite animation and was added to Babylon.js v3.1. As with sprite animation, it requires a uniform spritesheet.

You must set the property *isAnimationSheetEnabled* to 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 use the same spritesheet as in the sprite manager section of the documentation.

![sheet](/img/how_to/sprites/08-2.webp)

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 *noMipMaps* 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 the cell height and width for each sprite in the animation sheet.

![Cell Dimensions](/img/how_to/sprites/08-1.webp)

We are only going to use the first 10 cells of the spritesheet, and so *startSpriteCellID* is 0 and *endSpriteCellID* is 9. The top-left 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 particle between *startSpriteCellID* and *endSpriteCellID*.

To control the speed of animation, you can experiment with adjusting direction, emitPower, and updateSpeed, though doing so adjusts the 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 the 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#3939" title="Adjust Emit Power And Update Speed" description="Simple example of adjusting emit power and update speed."/>  
Cell Change Speed: <Playground id="#0K3AQ2#3941" title="Cell Change Speed" description="Simple example of adjusting the cell change speed."/>


# Attractors

Starting from Babylon.js v8.4, you can add gravity attractors to your particle system.

**Note:** Attractors are not supported with `GPUParticleSystem`.

Here is a complete example to try:

<Playground id="#DEZ79M#76" title="Attractors" description="Complete example of attractors."/>

## How To Use Attractors

An attractor is a simple class that contains a position (`Vector3`) and a strength.

Setting the strength to a negative value will create a repulsor.

```javascript
  // Attractor
  const attractor = new BABYLON.Attractor();
  attractor.strength = 2;
  attractor.position = new BABYLON.Vector3(0, 1, -1);        
  particleSystem.addAttractor(attractor);
```

You can change the position or the strength of an attractor at any time.

To remove an attractor, simply call `particleSystem.removeAttractor(attractor)`.

Finally, if you want to get a **read-only** list of attractors attached to a particle system, you can use the `particleSystem.attractors` property.



## How To Customize Particles

Beyond the many built-in properties for controlling particle behavior, Babylon.js allows further customization through **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 on each frame and can affect 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 `startDirectionFunction` and `startPositionFunction` when creating a new particle emitter type, as is done with the [box, sphere, and cone emitters](/features/featuresDeepDive/particles/particle_system/shape_emitters).

### Direct

The start direction function has the default form:

```javascript
particleSystem.startDirectionFunction = (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, randY, randZ, 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);
};
```

Assigning `updateFunction` replaces Babylon.js's built-in particle update, so your function is responsible for advancing particle age, recycling particles, and applying any movement or color changes you still want. Use public properties and methods in custom update functions; properties starting with `_` are internal and can change between releases.

A custom update function can take this form:

```javascript
var scaledColorStep = new BABYLON.Color4(0, 0, 0, 0);
var scaledDirection = BABYLON.Vector3.Zero();
var scaledGravity = BABYLON.Vector3.Zero();

particleSystem.updateFunction = function (particles) {
  var scene = this.getScene();
  var delta = this.updateSpeed * (scene ? scene.getAnimationRatio() : 1);

  for (let index = 0; index < particles.length; index++) {
    var particle = particles[index];
    particle.age += delta;

    if (particle.age >= particle.lifeTime) {
      this.recycleParticle(particle);
      index--;
      continue;
    }

    particle.colorStep.scaleToRef(delta, scaledColorStep);
    particle.color.addInPlace(scaledColorStep);

    if (particle.color.a < 0) {
      particle.color.a = 0;
    }

    particle.angle += particle.angularSpeed * delta;

    particle.direction.scaleToRef(delta, scaledDirection);
    particle.position.addInPlace(scaledDirection);

    this.gravity.scaleToRef(delta, scaledGravity);
    particle.direction.addInPlace(scaledGravity);
  }
};
```

Two simple examples of customizing the update function:

### Randomize the Particle's Color per Frame

Add the following line after the recycle check:

```javascript
particle.color = new BABYLON.Color4(Math.random(), Math.random(), Math.random(), 1);
```

<Playground id="#MRRGXL#956" image="/img/playgroundsAndNMEs/pg-MRRGXL-950.webp" title="Random Colored Particles" description="Simple example of creating random colored particles."/>

### Grow Particles from Size 0 to a Final Size

This is a little trickier, since the particles start from size 0 — both `minSize` and `maxSize` must be set to 0, and a new property is added to store the final size.

Add in the main body of code:

```javascript
particleSystem.minSize = 0;
particleSystem.maxSize = 0;

particleSystem.finalSize = 1;
```

After the recycle check, to grow the particle to its final size by 35% of its lifetime, add:

```javascript
if (particle.age < particle.lifeTime * 0.35) {
  particle.size = (particleSystem.finalSize * particle.age) / (particle.lifeTime * 0.35);
}
```

<Playground id="#WJBZQH#109" image="/img/playgroundsAndNMEs/pg-WJBZQH-104.webp" title="Growing Particles" description="Simple example of creating growing particles."/>

### Particle Emitter Type

Starting from Babylon.js v3.2, you can create a new object of type `IParticleEmitterType` for the particle system. [Examples](/features/featuresDeepDive/particles/particle_system/shape_emitters) of this type include `SphereParticleEmitter` and `ConeParticleEmitter`, which are produced by `createSphereEmitter` and `createConeEmitter`.

These objects are assigned to the `particleEmitterType` property of the particle system.

You use `startDirectionFunction` and `startPositionFunction` as methods on 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 particle emitter type by implementing `IParticleEmitterType` and assigning it to `particleEmitterType`, overriding the default `startDirectionFunction` and `startPositionFunction` methods.

Below is an example that creates a new spray emitter, which sends streams of particles out of the top, bottom, and sides of a cylindrical region.

#### Create Spray Emitter

To determine where a particle is emitted from, the cylinder is divided into two regions, as shown in the diagram below.

![cylinder emitter](/img/how_to/particles/cyl_particles.webp)

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 and creates a new `SprayParticleEmitter` object, which is assigned to the `particleEmitterType` property.

```javascript no-code-variants
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 implements two methods — `startDirectionFunction` and `startPositionFunction` — and Babylon.js takes care of the rest.

```javascript no-code-variants
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."/>
<Playground id="#V07WF8#11" title="Custom Spray Emitter Without Container" description="Simple example of a custom spray emitter without container."/>

## 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);
```

`customEffect` is a `BABYLON.Effect` that targets a valid shader program and is created with the `createEffectForParticles` method on 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](/features/featuresDeepDive/materials/advanced/custom_procedural_textures#using-a-shaderstore-for-shader-storage) or the [id of a DOM element](/features/featuresDeepDive/materials/shaders/shaderCodeInBjs#shader-code-in-script-tags)
- uniforms: [strings] — array of additional 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 to it. For example, creating a custom effect with the fragment name `myParticle` requires a `myParticleFragmentShader` entry in the shader store:

```javascript
BABYLON.Effect.ShadersStore["myParticleFragmentShader"] = [...]
```

```javascript
var customEffect = engine.createEffectForParticles("myParticle", [...]);
```

### Uniforms Assignment

By default, Babylon.js provides `vUV` and `vColor` varying parameters and also passes the particle texture.

You can add further uniform variables. For example, to pass a uniform variable such as `time`, include it in the uniforms array:

```javascript
var customEffect = engine.createEffectForParticles("myParticle", [time]);
```

Then pass it using `setFloat` with an `onBind` callback 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 the shader store."/>  
You can see a similar example with node-based particles:
<Playground id="#0K3AQ2#3943" title="Custom Effect Using Shader Store With NPE" description="Simple example of a custom effect using the shader store with NPE."/>

### Particle Effect Object

The particle effect object is a slightly modified [Babylon Effect Object](/typedoc/classes/babylon.effect). Also note that the `ShadersStore` is a namespace on this special effect object.


# Flow Maps

Starting from Babylon.js v8.6, you can provide a flow map to control how your particles behave.
All particle systems support this feature.

Here is a complete example to try:

<Playground id="#DEZ79M#77" title="Flow Map" description="Complete example of a particle flow map."/>

## Definition

A flow map is a screen-aligned image that is used to control the direction and intensity of forces applied to particles based on their position on the screen, not in world space.

This means the flow behaves consistently relative to the viewport, regardless of camera movement or rotation. Because we are speaking of directions derived from a screen-aligned image, we will present directions in relation to the screen, such as screen-left or screen-up.

The flow map is a standard texture where each pixel encodes a 3D direction vector and strength using a `Color4` format (assuming the camera is pointing towards Z):

* Red (R): X-component of the flow direction (0 → screen-right, 1 → screen-left, 0.5 → no movement)
* Green (G): Y-component of the flow direction (0 → screen-down, 1 → screen-up, 0.5 → no movement)
* Blue (B): Z-component of the flow direction (0 → toward the screen, 1 → away from the screen, 0.5 → no movement)
* Alpha (A): Flow strength (0 → no effect)

## Example

When used with a regular particle system, the flow map will be stored as a `UInt8` array:

```javascript
    const flowMapUrl = "https://assets.babylonjs.com/textures/particleMotion_flowmap.png";
    particleSystem.flowMap = await BABYLON.FlowMap.FromUrlAsync(flowMapUrl);
```

You can control the overall impact of the flow map with `particleSystem.flowMapStrength`.

When used with a GPU particle system, the flow map is a regular texture:

```javascript
const flowMapUrl = "https://assets.babylonjs.com/textures/particleMotion_flowmap.png";
particleSystem.flowMap = new BABYLON.Texture(flowMapUrl);
```

Examples using various flow maps for both CPU and GPU particle systems:

* <Playground id = "#2TXXS1" title="Sample CPU Flow Maps" description="Varied examples of flow maps demonstrating particle influences" image="/img/playgroundsAndNMEs/flowMapExamples.webp"/>
* <Playground id = "#PPC2EI#7" title="Sample CPU Flow Map with NPE" description="Examples of flow map demonstrating particle influences and NPE" image="/img/playgroundsAndNMEs/flowMapExamples.webp"/>
* <Playground id="#5DM02T#12" title="GPU Flow map" description="Complete example of a GPU particle flow map."/>
* <Playground id="#DEZ79M#77" title="Another Flow Map with NPE" description="Another Flow Map example that also showcases NPE."/>



# 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 be used almost like regular particles:

```javascript
var particleSystem = new BABYLON.GPUParticleSystem("particles", { capacity:1000000 }, scene);
```

As the CPU is no longer involved, you can go crazy with active particles (1,000,000 in this example). Also, you can use `particleSystem.activeParticleCount` to define the number of active particles if you want to limit 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 largest 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 of their API, it is easy to switch from one to the other 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

Calling `system.stop()` on a `GPUParticleSystem` object forces the system to stop generating new particles. However, particles will still be rendered even when they are not visible.

To completely stop a `GPUParticleSystem`, you have to call `dispose()` on it.

## Using custom effects to render the particle system

New since 5.0, you can now use custom effects with GPU particles!

GPU Particles with custom effect: <Playground id="#1ASENS#68" title="GPU Particles With Custom Effect" description="Simple example of a GPU particle system using a custom effect for display."/>

## Unsupported Features

The following features are not supported by GPU particles due to their nature:

- ManualEmitCount
- 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 system."/>


# Node Particle Editor

Starting from Babylon.js v8.14, you can design complex and intricate particle systems using the Node Particle Editor (NPE).

![NPE screenshot](/img/tools/npe/01.webp)

[Introducing NPE - YouTube](https://www.youtube.com/watch?v=oATijHvVfek&ab_channel=SLCCUniversalAccess)

## NPE

NPE lets you define one or more particle systems. It creates a [ParticleSystemSet](/features/featuresDeepDive/particles/particle_system/particleHelper#ParticleSystemSet) that can be used directly.

```javascript
const npe = await BABYLON.NodeParticleSystemSet.ParseFromSnippetAsync("#8O4BJ2");
const particleSystemSet = await npe.buildAsync(scene);
particleSystemSet.start();
```

Here’s a complete example you can try out:

<Playground id="#P96UPW" title="NPE" description="Complete example of using a system set from NPE."/>

## How To Use NPE

To use NPE, head to [npe.babylonjs.com](https://npe.babylonjs.com).

The default graph for a node particle system contains the minimum required components for the graph to function. These are the core components that every graph has, with varying levels of complexity depending on the needs of the particle system.

![NPE screenshot](/img/tools/npe/02.webp)

To set up a particle system, you’ll need three core components:

- The creation logic, using at least a Create Particle block and an Emitter Shape block
- The update logic
- The particle system itself, defined by a System block

**Note: For now, NPE only generates CPU-based particle systems.**

## Creation Phase

When a particle is created, its parameters are taken from this section of the graph. Depending on how the graph is wired, each particle can draw from the same parameters, or you can use a combination of nodes to evaluate parameters per particle or per system.

![NPE screenshot](/img/tools/npe/03.webp)

In this example, each new particle is given a randomly chosen lifetime between 1 and 2.

The shape blocks are how you define [shape emitters](/features/featuresDeepDive/particles/particle_system/shape_emitters), which describe the volume used to determine the emission position and direction of each particle.

## Update Phase

The update logic is executed every frame for each particle. In this example, we update the position by adding the velocity (also known as the scaled direction, i.e., the direction adjusted for frame rate).

![NPE screenshot](/img/tools/npe/04.webp)

To control particle properties such as color, scale, or position, choose the appropriate update block to add to your graph. The manipulation of the values passed to these blocks and even the order in which the update blocks are wired can have a big impact on the look of your particle system.

![NPE screenshot](/img/tools/npe/05.webp)

There are several inputs known as contextual values, such as Position or Scaled Direction. These represent values for each particle at a specific point in its lifetime. For example, on each frame, the Position contextual value changes based on a combination of emission power, gravity, drag, attractors, flow maps, and more. On any given rendered frame of the scene, you may need the particle's position to change its color or its life to change its alpha value. That is when you would use contextual value input blocks.

For basic behaviors, we offer direct function blocks so you don't need to manually wire everything. For example, the earlier logic can be replaced with BasicPositionUpdate:

![NPE screenshot](/img/tools/npe/06.webp)

## The System Block

This block defines the core properties of the system (like `capacity`) and accepts inputs such as `emitRate` and `texture`. You must provide, at a minimum, a particle input and a texture input.

## Managing Random Values

A core feature of any particle system is randomness. To support this, we provide three types of randomization blocks:

### Random

The basic block for generating random values. It can generate values per particle, per system, or on every call.
![NPE screenshot](/img/tools/npe/07.webp)

### Gradient

Use this to create value ramps. Based on an input from 0 to 1, the output is determined by the reference values of all attached gradient blocks. The gradient block with the largest reference value that is still less than the input value supplies the output.

![NPE screenshot](/img/tools/npe/08.webp)

In this case, we use the AgeGradient contextual value (representing particle life from 0 to 1) to determine color. The particle is born white and fades to red, reaching full red at 75% of its lifetime.

## Triggers

To add more complex behaviors, you can use triggers to link multiple particle systems — for example, to start a new one when a specific condition is met.

Here is a [pretty complex example](https://npe.babylonjs.com#K6F1ZB#1). More precisely, in the top-right corner:

![NPE screenshot](/img/tools/npe/09.webp)

Here, we've introduced a Trigger block. This block must be connected to another particle system — it's designed to start a clone of that system when a specific condition is met.
You can also limit the maximum number of simultaneous systems to avoid overloading the CPU.

In our example, if a particle from the source system has a `position.y` greater than a random value between 0.5 and 1.5, it triggers a clone of the target system. However, this trigger will only fire once every 250 ms, and no more than 5 instances can be active at the same time.

Another option is to use the `onStart` and `onEnd` events on each particle system:
![NPE screenshot](/img/tools/npe/10.webp)

In this example, the "Wave2" particle system will start when the "Wave" system ends. For this to work, "Wave" must have a target duration — otherwise, it would loop endlessly and never emit an `onEnd` event.

Also note: "Wave2" is set to not start automatically.

## Learn More

For a complete reference of all available blocks and their inputs, outputs, and properties, see the [Node Particle Editor Blocks](/toolsAndResources/npe/npeBlocks) page. For details on the editor interface, shortcuts, and organization features, see the [Node Particle Editor](/toolsAndResources/npe) tool page.



## 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:

```javascript
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:

```javascript
BABYLON.ParticleHelper.CreateAsync("sun", scene, true).then((set) => {
    set.start();
});
```

You can find a demo here: <Playground id="#MX2Z99#172" title="Particle Helper Example" description="Simple example of creating a particle system with the particle helper." isMain={true} category="Particles"/>

## ParticleSystemSet

When calling `BABYLON.ParticleHelper.CreateAsync()`, you will get a Promise that resolves with a `ParticleSystemSet`.
This class provides the following properties and functions:

- `emitterNode`: Use this property to get the transform node used as the 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.webp)             | <Playground id="#MX2Z99#172" title="Particle Sun Demo" description="Particle Sun Demo."/>             |
| **smoke**     | ![smoke](/img/how_to/Particles/smoke.webp)         | <Playground id="#MX2Z99#173" title="Particle Smoke Demo" description="Particle Smoke Demo."/>         |
| **rain**      | ![rain](/img/how_to/Particles/rain.webp)           | <Playground id="#MX2Z99#175" title="Particle Rain Demo" description="Particle Rain Demo."/>           |
| **fire**      | ![fire](/img/how_to/Particles/fire.webp)           | <Playground id="#I2D9MM#18" title="Particle Fire Demo" description="Particle Fire Demo."/>           |
| **explosion** | ![explosion](/img/how_to/Particles/explosion.webp) | <Playground id="#MX2Z99#177" title="Particle Explosion Demo" description="Particle Explosion Demo."/> |

## Custom ParticleSets

It is reasonably simple to create your own custom particleSet. Each particleSet listed above is stored in a Babylon.js folder currently located [**at this URL**](https://github.com/BabylonJS/Assets/tree/master/particles/systems). For instance, when you use "sun" as the particleSet _type_, `ParticleHelper` will load [**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:

```javascript
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 line of code that loads JSON particleSets into the particleHelper:

`` Tools.LoadFile(`${ParticleHelper.BaseAssetsUrl}/systems/${type}.json`, (data) => { ``

Notice that _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 hierarchy. 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 configuring your particle 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 particle systems using the Inspector. These code snippets are saved on the Babylon.js snippet server. Make a note of the snippet ID shown when you save it.

![Snippet](/img/how_to/Particles/snippet_screen.webp)

When you have a snippet ID, you can easily load the particle system using the following code:

```javascript
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 0.2, segments: 32}, scene);
BABYLON.ParticleHelper.ParseFromSnippetAsync("T54JV7", scene, false).then(system => {
    system.emitter = sphere;
});
```

Live example: <Playground id="#XGX927" title="Particle Snippet Server Example" description="Simple example of loading a particle system from the snippet server." isMain={true} category="Particles"/>

You can also specify `"_BLANK"` for the snippet ID. In this case, the system will create an empty one for you to work on:

```javascript
BABYLON.SpriteManager.ParseFromSnippetAsync("_BLANK", scene);
```



## An Introduction to the Particle System

The creation of a particle system requires a name and a capacity, which is the maximum number of particles alive at the same time in the system. The system is designed to produce particles that emit at a given rate, move, and last for a set lifetime before they are recycled and re-emitted.

```javascript
const myParticleSystem = new BABYLON.ParticleSystem("particles", capacity, scene); //scene is optional and defaults to the current scene
```

### Texture

Before the particles in the system can be seen, they need to be assigned a texture. This same texture will be used for every particle in the system. By default, the entire texture will be mapped to each particle, though there are some advanced techniques that allow us to use only a portion of the texture for the particle. These techniques can be found in the [Animating Particles](/features/featuresDeepDive/particles/particle_system/animation) section, which details how your texture can be used as a sprite sheet.

### Emitter

We also need to tell the particle system a location from which the particles will emit. This is called the emitter, and it can be represented by a mesh, an abstract mesh, or even a simple Vector3 position in your scene. The emitter itself is just the base position for emission, and in the case of a mesh or an abstract mesh, we use the mesh position to determine where particles will emit. Coupled with the emitter is the [Emitter Shape](/features/featuresDeepDive/particles/particle_system/shape_emitters) that determines the region from which particles can emit. We could use a [Box Emitter Shape](/features/featuresDeepDive/particles/particle_system/shape_emitters#box-emitter) with an abstract mesh assigned as the particle system emitter to give us particles that emit from a random point within a box located at the position of the abstract mesh. This is a good way to animate an emitter, as the abstract mesh could be the target of a Babylon animation. On each animation frame, the emitter location will be updated and new particles will emit within the emitter shape located at the new position of the abstract mesh.

### Example

The following code samples show the bare minimum needed to create a particle system.

```javascript
myParticleSystem.particleTexture = new BABYLON.Texture("path to texture");

myParticleSystem.emitter = mesh; // a mesh or abstract mesh in the scene
// or
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#3954" title="Minimal Particle System" description="Simple example of creating a minimal particle system." isMain={true} category="Particles"/>

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#3955" title="Default Particle System Using The Helper" description="Simple example of using the particle helper to create the default particle system."/>

Emit particles from a box position: <Playground id="#0K3AQ2#3956" title="Emit Particles From a Box Position" description="Simple example showing how to set a particle emission point to a box's position." isMain={true} category="Particles"/>

By fixing the size of the emission region, you can constrain where particles emit. 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#3957" title="Emit Particles From Completely Inside a Box" description="Simple example showing how to make particles emit from completely inside of a box."/>

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#3958" title="Particle System With a Delayed Start" description="Simple example showing how to create a particle system and delay its start."/>

To run the particle system for a limited time, you use:

```javascript
myParticleSystem.targetStopDuration = 5;
```

The time before the system stops depends on how fast the particle system updates particle frames. The faster the update speed, the shorter the 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 the correct state before rendering.

To do so, you need to set up 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 (i.e., 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:

```javascript
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 real time. The more cycles you want, the slower the system will be to start. It can therefore be useful to increase the time step so fewer cycles need to run. But keep in mind that too large a 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#171" title="Particle Pre-Warming Example" description="Simple example of pre-warming particles."/>

## Particle Texture

To apply a texture to the particles, such as  
![Flare](/img/how_to/Particles/Flare.webp)

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 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.webp)

Texture mask example: <Playground id="#0K3AQ2#3959" title="Texture Mask Example" description="Particle system using a texture mask." isMain={true} category="Particles"/>

To use multiple textures in the scene, use multiple particle systems, all of which can use the same emitter object.

Multiple systems example: <Playground id="#H19RFM#1" title="Multiple Systems With Mesh Emitter" description="A more complex example with several systems emitting from the same mesh." isMain={true} category="Particles"/>

## Noise Texture

Starting with Babylon.js v3.3, you can now use a noise texture to perturb particle positions. Technically, the noise texture applies changes to particle direction:

```javascript
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="#0K3AQ2#3960" title="Changing Particle Direction With Noise" description="Simple example of changing particle direction based on a noise texture."/>

## Local Space

If the emitter is a mesh and you set `particleSystem.isLocal = true`, then all particles will be generated in the mesh local space (so rotating or transforming the mesh will transform the entire particle system).

Demo: <Playground id="#LNRAI3#147" title="Particles In Local Space" description="Simple example showing how to make particles emit in local space."/>

## World Offset

Starting with Babylon.js v4.0, you can set up a world offset to your particles with:

```javascript
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).

## Node-Based Particle Systems

Starting from Babylon.js v8.14, you can also design particle systems visually using the [Node Particle Editor (NPE)](/features/featuresDeepDive/particles/particle_system/node_particle_editor). NPE lets you wire together blocks in a graph to define creation, update, and rendering logic — no code required for the particle behavior itself. It produces a _NodeParticleSystemSet_ that can be loaded and started in just a few lines:

```javascript
const npe = await BABYLON.NodeParticleSystemSet.ParseFromSnippetAsync("#8O4BJ2");
const particleSystemSet = await npe.buildAsync(scene);
particleSystemSet.start();
```

Many of the properties covered in this section — such as size, color, emitter shape, and gradients — have equivalent blocks in NPE. Each page in this section includes node-based examples alongside the code-based ones.

So far we have barely touched the surface of the particle system. There is a wide range of additional properties you can use to further tune the particle system.



## Particle System JSON Files

When you use the [particle system editor](/legacy/inspector/particleEditor), you can save the particle system as a local JSON file that can be loaded and used in any Babylon.js scene. This is useful for sharing particle systems between different scenes and for updating a particle system quickly. Changing the parameters in a locally stored JSON file lets any scene that uses that particle system pick up the update immediately, without needing to manage a referenced snippet ID.

## Loading the JSON file

The [Asset Manager](/features/featuresDeepDive/importers/assetManager) offers flexibility and power in loading the multiple files needed for particle systems — such as particle textures and particle system JSON files — at once. Simply add a new [TextFileAssetTask](/features/featuresDeepDive/importers/assetManager#textfileassettask) for each particle system file that needs to be loaded.

```javascript
const assetsManager = new BABYLON.AssetsManager(scene);
const particleFile = assetsManager.addTextFileTask("my particle system", "particleSystem.json");

// load all tasks
assetsManager.load();
```

Create a new `TextFileTask` for each particle system that needs to be loaded. The Asset Manager loads each file in sequence and then invokes a callback once all loading is complete. Since most effects are made up of several particle systems, the Asset Manager helps load each file quickly and efficiently before parsing.

```javascript
assetsManager.onFinish = function (task) {
    console.log("task successful", task);

    // prepare to parse particle system files
}
```

## Parsing the Text File as JSON

Once the files are loaded as text, they need to be parsed as JSON objects before they can be used. Simply add a `JSON.parse` for each loaded text file.

```javascript
assetsManager.onFinish = function (task) {
    console.log("task successful", task);

    // prepare to parse particle system files
    const particleJSON = JSON.parse(particleFile.text);
}
```

## Using the JSON with BABYLON.ParticleSystem

The final step is to convert the JSON into a `BABYLON.ParticleSystem` using another parse operation. However, this parse operation has several components worth exploring.

```javascript
const myParticleSystem = BABYLON.ParticleSystem.Parse(json, scene, rootURL, doNotStart, capacity);
```

- **json**: The JSON file to parse.
- **scene**: The scene or engine within which to create the particle system.
- **rootURL**: The root URL to load dependencies like the particle texture.
- **doNotStart**: Boolean that determines whether the particle system should automatically start. This overrides the autostart parameter contained in the particle system JSON.
- **capacity**: The capacity limit of particles for this system. This is the only way to change the capacity of a particle system created from JSON. If this parameter is undefined or null, the capacity parameter in the JSON will be used.

Adding this last step to our Asset Manager completes the loading and creation of our particle system.

```javascript
assetsManager.onFinish = function (task) {
    console.log("task successful", task);

    // prepare to parse particle system files
    const particleJSON = JSON.parse(particleFile.text);
    const myParticleSystem = BABYLON.ParticleSystem.Parse(particleJSON, scene, "", false, 1000);
}
```

Live example: <Playground id="#9Y10LR" title="Loading Particle System From File" description="Simple example using the Asset Manager to load a particle system and texture before parsing it." isMain={true} category="Particles"/>



# Basic Particle Properties

There is a wide range of properties to tune the behavior of particles, including their lifetime, size, color, emission rate, speed, direction of travel, orientation, and gravity.

This page covers setting initial property values when creating a particle system. The next page shows how to animate these properties over time.

## 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#3797" title="Particle Size Range Example" description="Simple example showing how to set a size range for a particle system."/>

## Scale

When you want to change the particle base shape from square to rectangular, scale the x and y values:

```javascript
particleSystem.minScaleX = 0.1;
particleSystem.maxScaleX = 0.5;

particleSystem.minScaleY = 0.2;
particleSystem.maxScaleY = 0.4;
```

Scale range: <Playground id="#0K3AQ2#3798" title="Particle Scale Range Example" description="Simple example showing how to set a scale range for a particle system."/>

## Color

There are three colors that can be set for a particle system. Two of them (`color1` and `color2`) are blended during the particle's lifetime, and a third (`colorDead`) is applied just before the particle expires.

```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#3799" title="Particle Color Example" description="Simple example showing how to set colors of particles."/>

## Speed

The speed of a particle is determined by the amount of power applied when it is emitted. Higher power means faster movement. The emission power can be varied randomly within a given range:

```javascript
particleSystem.minEmitPower = 1;
particleSystem.maxEmitPower = 3;
```

Power range: <Playground id="#0K3AQ2#3802" title="Particle Power Range Example" description="Simple example showing how to set a power range for a particle system."/>

## 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:

```javascript
particleSystem.minInitialRotation = 0;
particleSystem.maxInitialRotation = Math.PI / 2;
```

Rotating: <Playground id="#0K3AQ2#3805" title="Rotating Particles" description="Simple example showing how to rotate particles."/>  
Rotating with set initial angle: <Playground id="#0K3AQ2#3807" title="Rotating Particles With Initial Angle" description="Simple example showing how to rotate particles with an initial angle."/>

## Translation Pivot

By default, a particle's transformation center is at the middle of its plane. You can move it to a different point relative to the center:

```javascript
particleSystem.translationPivot = new BABYLON.Vector2(2, 2); // across and up the containing plane
```

Rotation with translation pivot: <Playground id="#0K3AQ2#3811" title="Changing Particle Pivot Points" description="Simple example showing how to change the pivot point of a particle."/>

## 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 random direction between the two.

Note that these vectors also affect speed — their magnitude acts as a multiplier. For example, particles with direction `(10, -10, 10)` will 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#3815" title="Particle Direction Range Example" description="Simple example showing how to set a direction range for a particle system."/>

## Gravity

Gravity can be applied as a Vector3 in any direction. For example, a negative Y value pulls particles downward.

```javascript
particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);
```

Direction and gravity: <Playground id="#0K3AQ2#3820" title="Direction And Gravity" description="Simple example showing how to set direction and gravity in a particle system."/>

## Emit Rate

The emit rate determines the number of particles emitted per second. The larger the number, the denser the particle cloud. As particles die, they are recycled to be emitted again. If their lifetime is long enough and the emission rate is fast enough, there may be a visible gap in the emission of particles.

![emitRate](/img/how_to/Particles/12-3.webp)

```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 specified number of particles are emitted once, and there are no further emissions.

Slow emit rate: <Playground id="#0K3AQ2#3822" title="Slow Emission Rate" description="Simple example showing how to set a slow emission rate of a particle system."/>  
Fast emit rate: <Playground id="#0K3AQ2#3824" title="Fast Emission Rate" description="Simple example showing how to set a fast emission rate of a particle system."/>  
Emit just 10: <Playground id="#0K3AQ2#3828" title="Emission Limits" description="Simple example showing how to limit particle emission to a certain number."/>

## Lifetime

The time it takes for a particle to die after being emitted can be varied within a chosen range. Each 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#3830" title="Short Particle Lifetimes" description="Simple example showing how to create particles with a short lifetime."/>  
Long lifetime: <Playground id="#0K3AQ2#3840" title="Long Particle Lifetimes" description="Simple example showing how to create particles with a long lifetime."/>

## Adjustable Examples

The following examples allow you to modify the properties of the particle system in real time and see the effects they produce.

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."/>  
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."/>



# Color Ramps, Blends, and Billboard Mode

## Ramp Gradients

> **Note:** Ramp gradients and color/alpha remaps are not supported for node particle systems.

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.webp)

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:

```javascript
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 as the index to get the ramp color from the ramp gradient using this formula: `finalColor = textureColor * particleColor * rampColor`.

Ramp gradient: <Playground id="#I2D9MM#17" title="Ramp Gradient Example" description="Simple example of using ramp gradients."/>

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 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="#E3VU3R#1" title="Ramp Gradient With Remap Over Lifetime" description="Simple example of using ramp gradients with a remap over the lifetime of the particle."/>

Ultimately, you can also remap the alpha value generated per pixel with:

```javascript
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 the particle's alpha (i.e., color * (1 - alpha) + particleColor * alpha).
* `BLENDMODE_ADD` - colors are added, but only the particle color uses the particle's alpha (i.e., color + particleColor * alpha).
* `BLENDMODE_MULTIPLY` - colors are multiplied and added to (1 - alpha) (i.e., color * particleColor + 1 - alpha).
* `BLENDMODE_MULTIPLYADD` - two-pass rendering with `BLENDMODE_MULTIPLY` and then `BLENDMODE_ADD`.

## Billboard Modes

By default, all particles are rendered as billboards — that is, they face the camera. However, you can instead align them with the particle direction with:

```javascript
particleSystem.isBillboardBased = false;
```

When billboard mode is enabled, you can decide to either have a full billboard (on all axes) or only on the Y axis with this code:

```javascript
particleSystem.billboardMode = BABYLON.ParticleSystem.BILLBOARDMODE_Y;
```

You can also use stretched billboard, which works like 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#28" title="Billboard Mode Y" description="Simple example of using billboard mode in Y."/>  
Billboard false - spherical: <Playground id="#EV0SEQ#39" title="Billboard Mode False" description="Simple example of setting billboard mode to false."/>  
Multiply blend mode - smoke pillar: <Playground id="#KUDH9F#46" title="Multiply Blend Mode" description="Simple example of setting particle blend mode to multiply."/>  
Add blend mode and billboard mode stretched - sparks (select scene, press space): <Playground id="#M1HYFH#10" title="Add Blend Mode And Stretched Billboard Mode" description="Simple example of setting particle blend mode to add and billboard mode to stretched."/>  
Ramp and blend - explosion (select scene, press space): <Playground id="#XPVJMM#5" title="Ramp and Blend" description="Simple example of a ramp and blend."/>



# Shape Emitters

Starting from Babylon.js 3.2, you can shape the region particles are emitted from by using a specific emitter type:

* Point
* Box
* Sphere
* Hemisphere
* Cylinder
* Cone
* Mesh
* Custom

## 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 two 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="#0K3AQ2#3933" title="Point Emitter" description="Simple example of a particle point emitter."/>

## 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="#0K3AQ2#3912" title="Box Emitter" description="Simple example of a particle box emitter."/>

## Sphere Emitter

You can create a sphere emitter with a given radius (e.g. 1.2):

```javascript
var sphereEmitter = particleSystem.createSphereEmitter(1.2);
```

The returned `sphereEmitter` object can be used to change the radius.

The particles are emitted in the direction of the surface normals, i.e. the lines from the center of the sphere through a surface point.

<Playground id="#0K3AQ2#3916" title="Sphere Emitter" description="Simple example of a particle sphere emitter."/>

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 choose 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 particle direction will be generated randomly between `direction1` and `direction2`.

<Playground id="#0K3AQ2#3917" title="Sphere Emitter With Directions" description="Simple example of a particle sphere emitter with directions."/>

## Hemispheric Emitter

You can create a hemispheric emitter with a given radius (e.g. 1.2):

```javascript
var hemisphericEmitter = particleSystem.createHemisphericEmitter(1.2);
```

The returned `hemisphericEmitter` object can be used to change the radius.

The particles are emitted in the direction of the surface normals, i.e. the lines from the center of the hemisphere through a surface point.

<Playground id="#0K3AQ2#3915" title="Hemispheric Emitter" description="Simple example of a particle hemispheric emitter."/>

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`, and `directionRandomizer`:

```javascript
var cylinderEmitter = particleSystem.createCylinderEmitter(1, 1, 0, 0);
```

The returned `cylinderEmitter` object can be used to change these property values.

The particles are emitted in the direction of the surface normals, i.e. outward from the cylinder.

<Playground id="#0K3AQ2#3921" title="Cylinder Emitter" description="Simple example of a particle cylinder emitter."/>

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`, you can change how much to randomize the particle's direction.

If you prefer to choose the emission direction, you can create a directed cylinder emitter. The `createDirectedCylinderEmitter` method takes five 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 particle direction will be generated randomly between `direction1` and `direction2`.

<Playground id="#0K3AQ2#3922" title="Cylinder Emitter With Directions" description="Simple example of a particle cylinder emitter with directions."/>

## Cone Emitter

To create a cone emitter:

```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.

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="#0K3AQ2#3925" title="Cone Emitter" description="Simple example of a particle cone emitter."/>
<Playground id="#0K3AQ2#3935" title="Cone Emitter From Spawn Point" description="Simple example of a particle cone emitter from the spawn point."/>

## Mesh Emitter

You can use `MeshParticleEmitter` to emit particles from the surface of a mesh:

```javascript
var meshEmitter = new BABYLON.MeshParticleEmitter(sphere);
```

By default, the direction of the particles follows the surface normal of the mesh. You can disable this and use a custom direction instead:

```javascript
meshEmitter.useMeshNormalsForDirection = false;
meshEmitter.direction1 = new BABYLON.Vector3(0, 1, 0);
meshEmitter.direction2 = new BABYLON.Vector3(0, -1, 0);
```

**Please note that `MeshParticleEmitter` is not supported by GPU particle systems.**

Here is an example of a mesh particle emitter: <Playground id="#0K3AQ2#3929" title="Mesh Emitter" description="Simple example of a particle mesh emitter."/>

## Custom Emitter

A custom emitter lets you define the position and destination of each particle by providing two generator 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;
}
```

When used with a GPU particle system, the generators (`particlePositionGenerator` and `particleDestinationGenerator`) receive a particle index. When used with a CPU particle system, they receive the actual particle object to update.

Here is an example of a custom particle emitter: <Playground id="#0K3AQ2#3932" title="Custom Emitter" description="Simple example of a particle custom emitter."/>



# 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 spawned sub-particle system is totally independent of the parent.

**Note:** Sub emitters are not supported in GPU particles.

## How To Use Sub Emitters

The list of sub-particle systems used as sub emitters is kept in an array and assigned to the `subEmitters` property 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];
```

If you specify an array of arrays of sub emitters, a random array will be chosen, and all the sub emitters in that 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 make attached sub emitters respect orientation when emitting particles, their emitter must be a mesh type:

```javascript
subEmitter.particleSystem.emitter = new BABYLON.Mesh("", scene);
```

## Active Sub Systems

Each particle system 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."/>
<Playground id="#9NHBCC#1" title="Sub Emitters On Death Only" description="Simple example of sub emitters on death only."/>
<Playground id="#7HH1UH#6" title="Complete Example (Hit Space To Launch a Barrel)" description="Complete sub emitter example."/>



# Change Particle Behaviors Over Time

Particle properties can be changed over time using **gradients**. There are two distinct time periods you can target:

- **Particle lifetime** — the lifespan of an individual particle, from when it is emitted to when it dies. Properties like size, color, speed, angular speed, and drag can be changed over a particle's lifetime.
- **System duration** — the total running time of the particle system, controlled by _targetStopDuration_. Properties like emit rate, start size, and particle lifetime can be changed over the system's duration.

Both time periods are normalized from 0 (start) to 1 (end).

The general form to change a specific property value is:

```javascript
particleSystem.addPropertyGradient(fraction, value);
```

For a range of property values:

```javascript
particleSystem.addPropertyGradient(fraction, minValue, maxValue);
```

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:

```javascript
particleSystem.removePropertyGradient(fraction);
```

Replace `Property` with the actual property name (e.g., `addSizeGradient`, `removeColorGradient`). See the sections below for each supported property.

## Change Size Over Lifetime

To change size over the lifetime of the particle:

```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:

```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 particle lifetime
particleSystem.addSizeGradient(1.0, 3, 4); //size range at end of particle lifetime
```

To remove a size gradient:

```javascript
particleSystem.removeSizeGradient(0.4);
```

Size increases over lifetime: <Playground id="#0K3AQ2#3843" title="Particle Size Increases Over Lifetime" description="Simple example of particle size increasing over the lifetime of a particle."/>  
Size increases then decreases over lifetime: <Playground id="#0K3AQ2#3846" title="Particle Size Increases Then Decreases Over Lifetime" description="Simple example of particle size increasing then decreasing over the lifetime of a particle."/>

## Change Start Size Over Duration

To change the size of a particle on emission over the duration of the particle system:

```javascript
particleSystem.targetStopDuration = 8;

particleSystem.addStartSizeGradient(0, 0.25); //start size at start of particle system
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 system
particleSystem.addStartSizeGradient(0.4, 0.25, 0.5); //start size range at 2/5 of duration of particle system
particleSystem.addStartSizeGradient(1, 0, 0.1); //start size range at end of particle system
```

Remove gradient at 0.4:

```javascript
particleSystem.removeStartSizeGradient(0.4);
```

Increasing start sizes over duration: <Playground id="#0K3AQ2#3899" title="Increasing Particle Start Sizes Over Duration" description="Simple example of increasing particle start sizes over duration."/>

## Change Color Over Lifetime

To change color over the lifetime of the particle:

```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:

```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:

```javascript
particleSystem.removeColorGradient(0.4);
```

Color change over lifetime: <Playground id="#0K3AQ2#3850" title="Particle Color Change Over Lifetime" description="Simple example of particle color changing over the lifetime of a particle."/>  
Color change with ranges over lifetime: <Playground id="#0K3AQ2#3852" title="Particle Color Change With Ranges Over Lifetime" description="Simple example of particle color changing with ranges over the lifetime of a particle."/>

## Change Speed Over Lifetime

The velocity gradient acts as a multiplier on the particle's speed. To change it over the lifetime of the particle:

```javascript
particleSystem.addVelocityGradient(0, 0.5); //speed multiplier at start of particle lifetime
particleSystem.addVelocityGradient(1, 3); //speed multiplier at end of particle lifetime
```

For a range of values:

```javascript
particleSystem.addVelocityGradient(0, 0.5, 0.8); //speed multiplier range at start of particle lifetime
particleSystem.addVelocityGradient(0.4, 1, 2); //speed multiplier range at 2/5 of particle lifetime
particleSystem.addVelocityGradient(1.0, 3, 4); //speed multiplier range at end of particle lifetime
```

To remove a velocity gradient:

```javascript
particleSystem.removeVelocityGradient(0.4);
```

Speed increases over lifetime: <Playground id="#0K3AQ2#3854" title="Particle Speed Increases Over Lifetime" description="Simple example of particle speed increasing over the lifetime of a particle."/>  
Speed increases then decreases over lifetime: <Playground id="#0K3AQ2#3858" title="Particle Speed Increases Then Decreases Over Lifetime" description="Simple example of particle speed increasing then decreasing over the lifetime of a particle."/>

## Limit Speed Over Lifetime

You can cap a particle's speed at a maximum value and apply damping when that limit is exceeded. First, set the damping factor:

```javascript
particleSystem.limitVelocityDamping = 0.1; //damping factor
```

At each frame, if the particle's current speed exceeds the limit, the speed is reduced by multiplying it by the damping factor. For example, a damping factor of 0.1 would reduce the speed to 10% of its current value.

To set the speed limit over the particle's lifetime:

```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:

```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 particle lifetime
particleSystem.addLimitVelocityGradient(1.0, 0.1, 0.2); //speed limit range at end of particle lifetime
```

To remove a speed limit gradient:

```javascript
particleSystem.removeLimitVelocityGradient(0.4);
```

Speed limit increases over lifetime: <Playground id="#0K3AQ2#3861" title="Particle Speed Limit Increases Over Lifetime" description="Simple example of particle speed limit increasing over the lifetime of a particle."/>

## Change Rotation Speed Over Lifetime

To change the angular speed over the lifetime of the particle:

```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:

```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 particle lifetime
particleSystem.addAngularSpeedGradient(1.0, 3, 4); //angular speed range at end of particle lifetime
```

To remove an angular speed gradient:

```javascript
particleSystem.removeAngularSpeedGradient(0.4);
```

Angular speed increases over lifetime: <Playground id="#0K3AQ2#3864" title="Particle Angular Speed Increases Over Lifetime" description="Simple example of particle angular speed increasing over the lifetime of a particle."/>  
Angular speed increases then decreases over lifetime: <Playground id="#0K3AQ2#3867" title="Particle Angular Speed Increasing and Decreasing Over Lifetime" description="Simple example of particle angular speed increasing and decreasing over the lifetime of a particle."/>

## Change Drag Over Lifetime

You can simulate air friction by applying drag to a particle over its lifetime. Drag reduces the particle's velocity: a drag value of 0.8 reduces the velocity to 20% of its current value. When drag is &gt; 1, the particle's direction will reverse.

To change drag over the lifetime of the particle:

```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:

```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 particle lifetime
particleSystem.addDragGradient(1.0, 0.8, 0.9); //drag range at end of particle lifetime
```

To remove a drag gradient:

```javascript
particleSystem.removeDragGradient(0.4);
```

Drag &le; 1: <Playground id="#0K3AQ2#3870" title="Particle Drag Changing Over Lifetime 1" description="Simple example of particle drag changing over the lifetime of a particle."/>  
Drag &gt; 1: <Playground id="#0K3AQ2#3874" title="Particle Drag Changing Over Lifetime 2" description="Simple example of particle drag changing over the lifetime of a particle."/>

## Change Emit Rate Over Duration

To change the emit rate over the duration of the particle system:

```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 emit rates:

```javascript
particleSystem.targetStopDuration = 8;

particleSystem.addEmitRateGradient(0, 10, 20); //emit rate range at start of particle system
particleSystem.addEmitRateGradient(0.4, 200, 250); //emit rate range at 2/5 of duration of particle system
particleSystem.addEmitRateGradient(1, 500, 600); //emit rate range at end of particle system
```

Remove gradient at 0.4:

```javascript
particleSystem.removeEmitRateGradient(0.4);
```

Faster emit rate over duration: <Playground id="#0K3AQ2#3882" title="Particle Faster Emission Rate Over Duration" description="Simple example of faster particle emission rates over the duration."/>  
Increasing and then decreasing emit rates over duration: <Playground id="#0K3AQ2#3881" title="Increasing Then Decreasing Emission Rates Over Duration" description="Simple example of increasing then decreasing the emission rate over the duration."/>

## Change Lifetime Over Duration

To change how long each particle lives over the duration of the particle system:

```javascript
particleSystem.targetStopDuration = 8;

particleSystem.addLifeTimeGradient(0, 0.5); //lifetime at start of particle system
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 system
particleSystem.addLifeTimeGradient(0.4, 0.25, 0.5); //lifetime range at 2/5 of duration of particle system
particleSystem.addLifeTimeGradient(1, 0, 0.1); //lifetime range at end of particle system
```

Remove gradient at 0.4:

```javascript
particleSystem.removeLifeTimeGradient(0.4);
```

Shorter lifetimes over duration: <Playground id="#0K3AQ2#3887" title="Shorter Lifetimes Over Duration" description="Simple example of shortening lifetimes of particles over duration."/>  
Increasing and then decreasing lifetimes over duration: <Playground id="#0K3AQ2#3894" title="Increasing and Decreasing Lifetimes Over Duration" description="Simple example of increasing and then decreasing lifetimes over duration."/>



The particle system uses small 2D sprites that may be animated and always face the camera to simulate effects such as smoke or abstract visual forms such as glitter and fairy dust. The clouds of particles produced can be controlled with a wide range of properties including size, lifetime, emission rates, region, and power. Gravity can also be added to the particles.

![Particles](/img/features/particle0.webp)  

From Babylon.js v3.2, when the browser supports WebGL2, GPU particles are available. These make full use of the GPU, though there are some restrictions on their use. When WebGL2 is not available, the *GPUParticleSystem* will fall back to the *ParticleSystem* automatically.



## 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 while the others require their behavior to be 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 on their use. When WebGL2 is not available, the *GPUParticleSystem* will fall back to the *ParticleSystem* automatically.

Starting from Babylon.js v8.14, the [Node Particle Editor (NPE)](/features/featuresDeepDive/particles/particle_system/node_particle_editor) provides a visual, graph-based way to design particle systems. Rather than setting properties in code, you wire together blocks that define creation, update, and rendering logic. NPE produces a *NodeParticleSystemSet* that can be loaded and started with just a few lines of code.

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.

Also, as of version 5.X.Y, a new fluid rendering component has been added to the `Scene` class that allows you to render a particle system (`ParticleSystem`, `GPUParticleSystem`, or some custom vertex buffers) as a fluid.


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.

Attractors

Documentation page for Attractors

Flow Maps

Documentation page for Flow Maps

Sub Emitters

Learn about sub emitters 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.

Loading Particle Systems from a JSON File

Learn how to load and parse particle systems from a local JSON file.

Node Particle Editor

Documentation page for Node Particle Editor