
# 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."/>



# 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."/>


# 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."/>


Sub Emitters

How To Use Sub Emitters

END Sub Emitter Type

ATTACHED Sub Emitter Type

Active Sub Systems

Demos

Further reading

Particle System

Learn all about the particle system in Babylon.js.

Particles

Dive into the rich and exciting world of particles in Babylon.js.

Animating Particles

Learn how to animate particles in Babylon.js.

Solid Particle System

Learn all about the solid particle system in Babylon.js.

Customizing Particles

Learn how to customize particles in Babylon.js.