
# Sub Emitters

Starting from Babylon.js v3.2, you can create sub emitters which let you spawn a new particle from an existing particle. Each one of these spawned sub particle systems is totally independent from the parent.

**Note:** Sub emitters are NOT supported in GPU particles.

## How To Use Sub Emitters

The list of sub particle systems to be used as sub emitters is kept in an array and assigned top the new property `subEmitters` of the appropriate system. 

```javascript
// Create sub emitter
var subEmitter = new BABYLON.SubEmitter(subParticleSystem);
// Have the sub emitter spawn the particle system when the particle dies
subEmitter.type = BABYLON.SubEmitterType.END;
// Set the +Y direction of the sub emitter equal to the direction the particle is/was heading
subEmitter.inheritDirection = true;
// How much of the existing particles speed should be added to the emitter particles
subEmitter.inheritedVelocityAmount = 1;

particleSystem.subEmitters = [subEmitter];
```

Specifying an array of arrays of sub emitters will choose a random array and all the sub emitters in the chose array will be attached to the spawned particle.
```javascript
particleSystem.subEmitters = [[subEmitter],[subEmitter, subEmitter2, subEmitter3], [subEmitter4]];
```

## END sub emitter type
When a particle dies one of the particle systems in the array is selected at random as the one to be spawned. It is then cloned and rendered. Any element of the array can itself have `subEmitters` and hence a chain of sub emitters can be formed. In this case the property `manualEmitCount` could be used to avoid an infinite loop of creating and spawning new systems.

## ATTACHED sub emitter type
When a particle is spawned this emitter will be cloned and attached to the new particle. This can be used to create a trailing particle effect on new particles.

To support attached sub emitter's to have their orientation accounted for when emitting particles, their emitter must be a mesh type:
```javascript
subEmitter.particleSystem.emitter = new BABYLON.Mesh("", scene);
```

## Active Sub Systems
Each particle system with that has sub emitters also has a property `activeSubSystems` which is an array containing all currently active sub particle systems.

You can stop the root `ParticleSystem` and all `activeSubSystems` by calling the stop function on the root system:

```javascript
particleSystem.stop(); 
```

When you want to stop the root system without affecting the `activeSubSystems`, you pass false to the Stop function:

```javascript
particleSystem.stop(false);
```

## Demos

<Playground id="#T0L01N#47" title="Sub Emitters" description="Simple example of sub emitters."/>
<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 almost be used like regular particles:

```javascript
var particleSystem = new BABYLON.GPUParticleSystem("particles", { capacity:1000000 }, scene);
```

As CPU is no longer involved, you can go crazy with active particles (1000000 in this example). Also, you can use `particleSystem.activeParticleCount` to define the number of active particle count if you want to limit the GPU usage.

**Note:** Sub emitters are not supported in GPU particles.

## Random Texture
It is a shame but there is no good way to get random numbers when running on the GPU. To fill this gap, Babylon.js will create a texture filled with thousands of random values. These values will be read by the particle update shader to animate the particles.
By default the biggest supported texture size is used (16K). You may want to reduce the size of this texture by initializing the system like this:

```javascript
var particleSystem = new BABYLON.GPUParticleSystem("particles", { capacity:1000000, randomTextureSize: 4096 }, scene);
```

## Fallback
As the GPUParticleSystem and the ParticleSystem share almost all their API, it is easy to switch from one to another when WebGL2 is not supported. Keep in mind that the CPU cannot animate as many particles as the GPU can. So you will probably have to reduce the capacity of your system when not using the GPUParticleSystem.

## Stopping a GPU Particle System
When calling `system.stop()` on a `GPUParticleSystem` object, you will force the system to stop generating new particles. But particles will still be rendered even if not visible.

To completely stop a `GPUParticleSystem`, you have to call `dispose()` on it.

## Using custom effects to render the particle system

New since 5.0, you can now use a 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 inner 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 systems."/>


# Flow maps

Starting from Babylon.js v8.6, you can provide a flow map to control how your particles behave.
All particle systems support that feature.

Here is a complete example to try:

<Playground id="#5DM02T#7" 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 direction in 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:
```
    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 GPU particle system, the flow map is a regular texture:
```
const flowMapUrl = "https://assets.babylonjs.com/textures/particleMotion_flowmap.png";
particleSystem.flowMap = new BABYLON.Texture(flowMapUrl);
```

Example using a GPU particle system:

<Playground id="#5DM02T#12" title="Flow map" description="Complete example of a GPU particle flow map."/>

