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


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


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