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.

Expand

To produce a gradient color texture, such as the color bar above, you need the addRampGradient method:

particleSystem.addRampGradient(fraction_of_bar, color3);

For this particular color bar, you use:

import { Color3 } from "@babylonjs/core/Maths/math.color";
particleSystem.addRampGradient(0.0, new Color3(1, 1, 1));
particleSystem.addRampGradient(0.09, new Color3(209 / 255, 204 / 255, 15 / 255));
particleSystem.addRampGradient(0.18, new Color3(221 / 255, 120 / 255, 14 / 255));
particleSystem.addRampGradient(0.28, new Color3(200 / 255, 43 / 255, 18 / 255));
particleSystem.addRampGradient(0.47, new Color3(115 / 255, 22 / 255, 15 / 255));
particleSystem.addRampGradient(0.88, new Color3(14 / 255, 14 / 255, 14 / 255));
particleSystem.addRampGradient(1.0, new Color3(14 / 255, 14 / 255, 14 / 255));

To use them, you need to turn them on:

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: Ramp Gradient Example

To give you more control, you can use a remap function to change the index over time with:

particleSystem.addColorRemapGradient(fraction_of_lifetime_elapsed, minimum_index, maximum_index); //set a range of values for the index at the given time point

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: Ramp Gradient With Remap Over Lifetime

Ultimately, you can also remap the alpha value generated per pixel with:

particleSystem.addAlphaRemapGradient(0, 0, 0.1);
particleSystem.addAlphaRemapGradient(1.0, 0.1, 0.8);

The alpha remap will compute the final index value using this formula: finalIndex = clamp((textureAlpha * particleColorAlpha * rampColor.a - min) / (max - min), 0.0, 1.0).

Particle Blending

There are different ways that particles are blended with the scene, and these are set with blendMode.

import { ParticleSystem } from "@babylonjs/core/Particles/particleSystem";
particleSystem.blendMode = ParticleSystem.BLENDMODE_ONEONE;

import { ParticleSystem } from "@babylonjs/core/Particles/particleSystem";
particleSystem.blendMode = 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:

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:

import { ParticleSystem } from "@babylonjs/core/Particles/particleSystem";
particleSystem.billboardMode = 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.

import { ParticleSystem } from "@babylonjs/core/Particles/particleSystem";
particleSystem.billboardMode = ParticleSystem.BILLBOARDMODE_STRETCHED;

Examples

Billboard mode Y - steam: Billboard Mode Y
Billboard false - spherical: Billboard Mode False
Multiply blend mode - smoke pillar: Multiply Blend Mode
Add blend mode and billboard mode stretched - sparks (select scene, press space): Add Blend Mode And Stretched Billboard Mode
Ramp and blend - explosion (select scene, press space): Ramp and Blend