change particle color gradient to add a second level

dist/preview release/babylon.max.js

@@ -7441,7 +7441,7 @@ var BABYLON;
         function Tmp() {
         }
         Tmp.Color3 = [Color3.Black(), Color3.Black(), Color3.Black()];
-        Tmp.Color4 = [new Color4(0, 0, 0, 0)];
+        Tmp.Color4 = [new Color4(0, 0, 0, 0), new Color4(0, 0, 0, 0)];
         Tmp.Vector2 = [Vector2.Zero(), Vector2.Zero(), Vector2.Zero()]; // 3 temp Vector2 at once should be enough
         Tmp.Vector3 = [Vector3.Zero(), Vector3.Zero(), Vector3.Zero(),
             Vector3.Zero(), Vector3.Zero(), Vector3.Zero(), Vector3.Zero(), Vector3.Zero(), Vector3.Zero()]; // 9 temp Vector3 at once should be enough
@@ -8540,6 +8540,18 @@ var BABYLON;
     var ColorGradient = /** @class */ (function () {
         function ColorGradient() {
         }
+        /**
+         * Will get a color picked randomly between color1 and color2.
+         * If color2 is undefined then color1 will be used
+         * @param result defines the target Color4 to store the result in
+         */
+        ColorGradient.prototype.getColorToRef = function (result) {
+            if (!this.color2) {
+                result.copyFrom(this.color1);
+                return;
+            }
+            BABYLON.Color4.LerpToRef(this.color1, this.color2, Math.random(), result);
+        };
         return ColorGradient;
     }());
     BABYLON.ColorGradient = ColorGradient;
@@ -55496,8 +55508,12 @@ var BABYLON;
                         var ratio = particle.age / particle.lifeTime;
                         // Color
                         if (_this._colorGradients && _this._colorGradients.length > 0) {
+                            var color1 = BABYLON.Tmp.Color4[0];
+                            var color2 = BABYLON.Tmp.Color4[1];
                             BABYLON.Tools.GetCurrentGradient(ratio, _this._colorGradients, function (currentGradient, nextGradient, scale) {
-                                BABYLON.Color4.LerpToRef(currentGradient.color, nextGradient.color, scale, particle.color);
+                                currentGradient.getColorToRef(color1);
+                                nextGradient.getColorToRef(color2);
+                                BABYLON.Color4.LerpToRef(color1, color2, scale, particle.color);
                             });
                         }
                         else {
@@ -55722,14 +55738,16 @@ var BABYLON;
          * Adds a new color gradient
          * @param gradient defines the gradient to use (between 0 and 1)
          * @param color defines the color to affect to the specified gradient
+         * @param color2 defines an additional color used to define a range ([color, color2]) with main color to pick the final color from
          */
-        ParticleSystem.prototype.addColorGradient = function (gradient, color) {
+        ParticleSystem.prototype.addColorGradient = function (gradient, color, color2) {
             if (!this._colorGradients) {
                 this._colorGradients = [];
             }
             var colorGradient = new BABYLON.ColorGradient();
             colorGradient.gradient = gradient;
-            colorGradient.color = color;
+            colorGradient.color1 = color;
+            colorGradient.color2 = color;
             this._colorGradients.push(colorGradient);
             this._colorGradients.sort(function (a, b) {
                 if (a.gradient < b.gradient) {
@@ -56014,7 +56032,7 @@ var BABYLON;
                     this._colorDiff.scaleToRef(1.0 / particle.lifeTime, particle.colorStep);
                 }
                 else {
-                    particle.color.copyFrom(this._colorGradients[0].color);
+                    this._colorGradients[0].getColorToRef(particle.color);
                 }
             }
         };
@@ -56411,10 +56429,14 @@ var BABYLON;
                 serializationObject.colorGradients = [];
                 for (var _i = 0, colorGradients_1 = colorGradients; _i < colorGradients_1.length; _i++) {
                     var colorGradient = colorGradients_1[_i];
-                    serializationObject.colorGradients.push({
+                    var serializedGradient = {
                         gradient: colorGradient.gradient,
-                        color: colorGradient.color.asArray()
-                    });
+                        color1: colorGradient.color1.asArray()
+                    };
+                    if (colorGradient.color2) {
+                        serializedGradient.color2 = colorGradient.color2.asArray();
+                    }
+                    serializationObject.colorGradients.push(serializedGradient);
                 }
             }
             var sizeGradients = particleSystem.getSizeGradients();
@@ -56487,7 +56509,7 @@ var BABYLON;
             if (parsedParticleSystem.colorGradients) {
                 for (var _i = 0, _a = parsedParticleSystem.colorGradients; _i < _a.length; _i++) {
                     var colorGradient = _a[_i];
-                    particleSystem.addColorGradient(colorGradient.gradient, BABYLON.Color4.FromArray(colorGradient.color));
+                    particleSystem.addColorGradient(colorGradient.gradient, BABYLON.Color4.FromArray(colorGradient.color1), colorGradient.color2 ? BABYLON.Color4.FromArray(colorGradient.color2) : undefined);
                 }
             }
             if (parsedParticleSystem.sizeGradients) {
@@ -57482,14 +57504,15 @@ var BABYLON;
          * Adds a new color gradient
          * @param gradient defines the gradient to use (between 0 and 1)
          * @param color defines the color to affect to the specified gradient
+         * @param color2 defines an additional color used to define a range ([color, color2]) with main color to pick the final color from
          */
-        GPUParticleSystem.prototype.addColorGradient = function (gradient, color) {
+        GPUParticleSystem.prototype.addColorGradient = function (gradient, color1, color2) {
             if (!this._colorGradients) {
                 this._colorGradients = [];
             }
             var colorGradient = new BABYLON.ColorGradient();
             colorGradient.gradient = gradient;
-            colorGradient.color = color;
+            colorGradient.color1 = color1;
             this._colorGradients.push(colorGradient);
             this._colorGradients.sort(function (a, b) {
                 if (a.gradient < b.gradient) {
@@ -57802,7 +57825,7 @@ var BABYLON;
             for (var x = 0; x < textureWidth; x++) {
                 var ratio = x / textureWidth;
                 BABYLON.Tools.GetCurrentGradient(ratio, this._colorGradients, function (currentGradient, nextGradient, scale) {
-                    BABYLON.Color4.LerpToRef(currentGradient.color, nextGradient.color, scale, tmpColor);
+                    BABYLON.Color4.LerpToRef(currentGradient.color1, nextGradient.color1, scale, tmpColor);
                     data[x * 4] = tmpColor.r * 255;
                     data[x * 4 + 1] = tmpColor.g * 255;
                     data[x * 4 + 2] = tmpColor.b * 255;

dist/preview release/babylon.no-module.max.js

@@ -7408,7 +7408,7 @@ var BABYLON;
         function Tmp() {
         }
         Tmp.Color3 = [Color3.Black(), Color3.Black(), Color3.Black()];
-        Tmp.Color4 = [new Color4(0, 0, 0, 0)];
+        Tmp.Color4 = [new Color4(0, 0, 0, 0), new Color4(0, 0, 0, 0)];
         Tmp.Vector2 = [Vector2.Zero(), Vector2.Zero(), Vector2.Zero()]; // 3 temp Vector2 at once should be enough
         Tmp.Vector3 = [Vector3.Zero(), Vector3.Zero(), Vector3.Zero(),
             Vector3.Zero(), Vector3.Zero(), Vector3.Zero(), Vector3.Zero(), Vector3.Zero(), Vector3.Zero()]; // 9 temp Vector3 at once should be enough
@@ -8507,6 +8507,18 @@ var BABYLON;
     var ColorGradient = /** @class */ (function () {
         function ColorGradient() {
         }
+        /**
+         * Will get a color picked randomly between color1 and color2.
+         * If color2 is undefined then color1 will be used
+         * @param result defines the target Color4 to store the result in
+         */
+        ColorGradient.prototype.getColorToRef = function (result) {
+            if (!this.color2) {
+                result.copyFrom(this.color1);
+                return;
+            }
+            BABYLON.Color4.LerpToRef(this.color1, this.color2, Math.random(), result);
+        };
         return ColorGradient;
     }());
     BABYLON.ColorGradient = ColorGradient;
@@ -55463,8 +55475,12 @@ var BABYLON;
                         var ratio = particle.age / particle.lifeTime;
                         // Color
                         if (_this._colorGradients && _this._colorGradients.length > 0) {
+                            var color1 = BABYLON.Tmp.Color4[0];
+                            var color2 = BABYLON.Tmp.Color4[1];
                             BABYLON.Tools.GetCurrentGradient(ratio, _this._colorGradients, function (currentGradient, nextGradient, scale) {
-                                BABYLON.Color4.LerpToRef(currentGradient.color, nextGradient.color, scale, particle.color);
+                                currentGradient.getColorToRef(color1);
+                                nextGradient.getColorToRef(color2);
+                                BABYLON.Color4.LerpToRef(color1, color2, scale, particle.color);
                             });
                         }
                         else {
@@ -55689,14 +55705,16 @@ var BABYLON;
          * Adds a new color gradient
          * @param gradient defines the gradient to use (between 0 and 1)
          * @param color defines the color to affect to the specified gradient
+         * @param color2 defines an additional color used to define a range ([color, color2]) with main color to pick the final color from
          */
-        ParticleSystem.prototype.addColorGradient = function (gradient, color) {
+        ParticleSystem.prototype.addColorGradient = function (gradient, color, color2) {
             if (!this._colorGradients) {
                 this._colorGradients = [];
             }
             var colorGradient = new BABYLON.ColorGradient();
             colorGradient.gradient = gradient;
-            colorGradient.color = color;
+            colorGradient.color1 = color;
+            colorGradient.color2 = color;
             this._colorGradients.push(colorGradient);
             this._colorGradients.sort(function (a, b) {
                 if (a.gradient < b.gradient) {
@@ -55981,7 +55999,7 @@ var BABYLON;
                     this._colorDiff.scaleToRef(1.0 / particle.lifeTime, particle.colorStep);
                 }
                 else {
-                    particle.color.copyFrom(this._colorGradients[0].color);
+                    this._colorGradients[0].getColorToRef(particle.color);
                 }
             }
         };
@@ -56378,10 +56396,14 @@ var BABYLON;
                 serializationObject.colorGradients = [];
                 for (var _i = 0, colorGradients_1 = colorGradients; _i < colorGradients_1.length; _i++) {
                     var colorGradient = colorGradients_1[_i];
-                    serializationObject.colorGradients.push({
+                    var serializedGradient = {
                         gradient: colorGradient.gradient,
-                        color: colorGradient.color.asArray()
-                    });
+                        color1: colorGradient.color1.asArray()
+                    };
+                    if (colorGradient.color2) {
+                        serializedGradient.color2 = colorGradient.color2.asArray();
+                    }
+                    serializationObject.colorGradients.push(serializedGradient);
                 }
             }
             var sizeGradients = particleSystem.getSizeGradients();
@@ -56454,7 +56476,7 @@ var BABYLON;
             if (parsedParticleSystem.colorGradients) {
                 for (var _i = 0, _a = parsedParticleSystem.colorGradients; _i < _a.length; _i++) {
                     var colorGradient = _a[_i];
-                    particleSystem.addColorGradient(colorGradient.gradient, BABYLON.Color4.FromArray(colorGradient.color));
+                    particleSystem.addColorGradient(colorGradient.gradient, BABYLON.Color4.FromArray(colorGradient.color1), colorGradient.color2 ? BABYLON.Color4.FromArray(colorGradient.color2) : undefined);
                 }
             }
             if (parsedParticleSystem.sizeGradients) {
@@ -57449,14 +57471,15 @@ var BABYLON;
          * Adds a new color gradient
          * @param gradient defines the gradient to use (between 0 and 1)
          * @param color defines the color to affect to the specified gradient
+         * @param color2 defines an additional color used to define a range ([color, color2]) with main color to pick the final color from
          */
-        GPUParticleSystem.prototype.addColorGradient = function (gradient, color) {
+        GPUParticleSystem.prototype.addColorGradient = function (gradient, color1, color2) {
             if (!this._colorGradients) {
                 this._colorGradients = [];
             }
             var colorGradient = new BABYLON.ColorGradient();
             colorGradient.gradient = gradient;
-            colorGradient.color = color;
+            colorGradient.color1 = color1;
             this._colorGradients.push(colorGradient);
             this._colorGradients.sort(function (a, b) {
                 if (a.gradient < b.gradient) {
@@ -57769,7 +57792,7 @@ var BABYLON;
             for (var x = 0; x < textureWidth; x++) {
                 var ratio = x / textureWidth;
                 BABYLON.Tools.GetCurrentGradient(ratio, this._colorGradients, function (currentGradient, nextGradient, scale) {
-                    BABYLON.Color4.LerpToRef(currentGradient.color, nextGradient.color, scale, tmpColor);
+                    BABYLON.Color4.LerpToRef(currentGradient.color1, nextGradient.color1, scale, tmpColor);
                     data[x * 4] = tmpColor.r * 255;
                     data[x * 4 + 1] = tmpColor.g * 255;
                     data[x * 4 + 2] = tmpColor.b * 255;

dist/preview release/es6.js

@@ -7408,7 +7408,7 @@ var BABYLON;
         function Tmp() {
         }
         Tmp.Color3 = [Color3.Black(), Color3.Black(), Color3.Black()];
-        Tmp.Color4 = [new Color4(0, 0, 0, 0)];
+        Tmp.Color4 = [new Color4(0, 0, 0, 0), new Color4(0, 0, 0, 0)];
         Tmp.Vector2 = [Vector2.Zero(), Vector2.Zero(), Vector2.Zero()]; // 3 temp Vector2 at once should be enough
         Tmp.Vector3 = [Vector3.Zero(), Vector3.Zero(), Vector3.Zero(),
             Vector3.Zero(), Vector3.Zero(), Vector3.Zero(), Vector3.Zero(), Vector3.Zero(), Vector3.Zero()]; // 9 temp Vector3 at once should be enough
@@ -8507,6 +8507,18 @@ var BABYLON;
     var ColorGradient = /** @class */ (function () {
         function ColorGradient() {
         }
+        /**
+         * Will get a color picked randomly between color1 and color2.
+         * If color2 is undefined then color1 will be used
+         * @param result defines the target Color4 to store the result in
+         */
+        ColorGradient.prototype.getColorToRef = function (result) {
+            if (!this.color2) {
+                result.copyFrom(this.color1);
+                return;
+            }
+            BABYLON.Color4.LerpToRef(this.color1, this.color2, Math.random(), result);
+        };
         return ColorGradient;
     }());
     BABYLON.ColorGradient = ColorGradient;
@@ -55463,8 +55475,12 @@ var BABYLON;
                         var ratio = particle.age / particle.lifeTime;
                         // Color
                         if (_this._colorGradients && _this._colorGradients.length > 0) {
+                            var color1 = BABYLON.Tmp.Color4[0];
+                            var color2 = BABYLON.Tmp.Color4[1];
                             BABYLON.Tools.GetCurrentGradient(ratio, _this._colorGradients, function (currentGradient, nextGradient, scale) {
-                                BABYLON.Color4.LerpToRef(currentGradient.color, nextGradient.color, scale, particle.color);
+                                currentGradient.getColorToRef(color1);
+                                nextGradient.getColorToRef(color2);
+                                BABYLON.Color4.LerpToRef(color1, color2, scale, particle.color);
                             });
                         }
                         else {
@@ -55689,14 +55705,16 @@ var BABYLON;
          * Adds a new color gradient
          * @param gradient defines the gradient to use (between 0 and 1)
          * @param color defines the color to affect to the specified gradient
+         * @param color2 defines an additional color used to define a range ([color, color2]) with main color to pick the final color from
          */
-        ParticleSystem.prototype.addColorGradient = function (gradient, color) {
+        ParticleSystem.prototype.addColorGradient = function (gradient, color, color2) {
             if (!this._colorGradients) {
                 this._colorGradients = [];
             }
             var colorGradient = new BABYLON.ColorGradient();
             colorGradient.gradient = gradient;
-            colorGradient.color = color;
+            colorGradient.color1 = color;
+            colorGradient.color2 = color;
             this._colorGradients.push(colorGradient);
             this._colorGradients.sort(function (a, b) {
                 if (a.gradient < b.gradient) {
@@ -55981,7 +55999,7 @@ var BABYLON;
                     this._colorDiff.scaleToRef(1.0 / particle.lifeTime, particle.colorStep);
                 }
                 else {
-                    particle.color.copyFrom(this._colorGradients[0].color);
+                    this._colorGradients[0].getColorToRef(particle.color);
                 }
             }
         };
@@ -56378,10 +56396,14 @@ var BABYLON;
                 serializationObject.colorGradients = [];
                 for (var _i = 0, colorGradients_1 = colorGradients; _i < colorGradients_1.length; _i++) {
                     var colorGradient = colorGradients_1[_i];
-                    serializationObject.colorGradients.push({
+                    var serializedGradient = {
                         gradient: colorGradient.gradient,
-                        color: colorGradient.color.asArray()
-                    });
+                        color1: colorGradient.color1.asArray()
+                    };
+                    if (colorGradient.color2) {
+                        serializedGradient.color2 = colorGradient.color2.asArray();
+                    }
+                    serializationObject.colorGradients.push(serializedGradient);
                 }
             }
             var sizeGradients = particleSystem.getSizeGradients();
@@ -56454,7 +56476,7 @@ var BABYLON;
             if (parsedParticleSystem.colorGradients) {
                 for (var _i = 0, _a = parsedParticleSystem.colorGradients; _i < _a.length; _i++) {
                     var colorGradient = _a[_i];
-                    particleSystem.addColorGradient(colorGradient.gradient, BABYLON.Color4.FromArray(colorGradient.color));
+                    particleSystem.addColorGradient(colorGradient.gradient, BABYLON.Color4.FromArray(colorGradient.color1), colorGradient.color2 ? BABYLON.Color4.FromArray(colorGradient.color2) : undefined);
                 }
             }
             if (parsedParticleSystem.sizeGradients) {
@@ -57449,14 +57471,15 @@ var BABYLON;
          * Adds a new color gradient
          * @param gradient defines the gradient to use (between 0 and 1)
          * @param color defines the color to affect to the specified gradient
+         * @param color2 defines an additional color used to define a range ([color, color2]) with main color to pick the final color from
          */
-        GPUParticleSystem.prototype.addColorGradient = function (gradient, color) {
+        GPUParticleSystem.prototype.addColorGradient = function (gradient, color1, color2) {
             if (!this._colorGradients) {
                 this._colorGradients = [];
             }
             var colorGradient = new BABYLON.ColorGradient();
             colorGradient.gradient = gradient;
-            colorGradient.color = color;
+            colorGradient.color1 = color1;
             this._colorGradients.push(colorGradient);
             this._colorGradients.sort(function (a, b) {
                 if (a.gradient < b.gradient) {
@@ -57769,7 +57792,7 @@ var BABYLON;
             for (var x = 0; x < textureWidth; x++) {
                 var ratio = x / textureWidth;
                 BABYLON.Tools.GetCurrentGradient(ratio, this._colorGradients, function (currentGradient, nextGradient, scale) {
-                    BABYLON.Color4.LerpToRef(currentGradient.color, nextGradient.color, scale, tmpColor);
+                    BABYLON.Color4.LerpToRef(currentGradient.color1, nextGradient.color1, scale, tmpColor);
                     data[x * 4] = tmpColor.r * 255;
                     data[x * 4 + 1] = tmpColor.g * 255;
                     data[x * 4 + 2] = tmpColor.b * 255;

dist/preview release/viewer/babylon.viewer.max.js

@@ -7529,7 +7529,7 @@ var BABYLON;
         function Tmp() {
         }
         Tmp.Color3 = [Color3.Black(), Color3.Black(), Color3.Black()];
-        Tmp.Color4 = [new Color4(0, 0, 0, 0)];
+        Tmp.Color4 = [new Color4(0, 0, 0, 0), new Color4(0, 0, 0, 0)];
         Tmp.Vector2 = [Vector2.Zero(), Vector2.Zero(), Vector2.Zero()]; // 3 temp Vector2 at once should be enough
         Tmp.Vector3 = [Vector3.Zero(), Vector3.Zero(), Vector3.Zero(),
             Vector3.Zero(), Vector3.Zero(), Vector3.Zero(), Vector3.Zero(), Vector3.Zero(), Vector3.Zero()]; // 9 temp Vector3 at once should be enough
@@ -8628,6 +8628,18 @@ var BABYLON;
     var ColorGradient = /** @class */ (function () {
         function ColorGradient() {
         }
+        /**
+         * Will get a color picked randomly between color1 and color2.
+         * If color2 is undefined then color1 will be used
+         * @param result defines the target Color4 to store the result in
+         */
+        ColorGradient.prototype.getColorToRef = function (result) {
+            if (!this.color2) {
+                result.copyFrom(this.color1);
+                return;
+            }
+            BABYLON.Color4.LerpToRef(this.color1, this.color2, Math.random(), result);
+        };
         return ColorGradient;
     }());
     BABYLON.ColorGradient = ColorGradient;
@@ -55584,8 +55596,12 @@ var BABYLON;
                         var ratio = particle.age / particle.lifeTime;
                         // Color
                         if (_this._colorGradients && _this._colorGradients.length > 0) {
+                            var color1 = BABYLON.Tmp.Color4[0];
+                            var color2 = BABYLON.Tmp.Color4[1];
                             BABYLON.Tools.GetCurrentGradient(ratio, _this._colorGradients, function (currentGradient, nextGradient, scale) {
-                                BABYLON.Color4.LerpToRef(currentGradient.color, nextGradient.color, scale, particle.color);
+                                currentGradient.getColorToRef(color1);
+                                nextGradient.getColorToRef(color2);
+                                BABYLON.Color4.LerpToRef(color1, color2, scale, particle.color);
                             });
                         }
                         else {
@@ -55810,14 +55826,16 @@ var BABYLON;
          * Adds a new color gradient
          * @param gradient defines the gradient to use (between 0 and 1)
          * @param color defines the color to affect to the specified gradient
+         * @param color2 defines an additional color used to define a range ([color, color2]) with main color to pick the final color from
          */
-        ParticleSystem.prototype.addColorGradient = function (gradient, color) {
+        ParticleSystem.prototype.addColorGradient = function (gradient, color, color2) {
             if (!this._colorGradients) {
                 this._colorGradients = [];
             }
             var colorGradient = new BABYLON.ColorGradient();
             colorGradient.gradient = gradient;
-            colorGradient.color = color;
+            colorGradient.color1 = color;
+            colorGradient.color2 = color;
             this._colorGradients.push(colorGradient);
             this._colorGradients.sort(function (a, b) {
                 if (a.gradient < b.gradient) {
@@ -56102,7 +56120,7 @@ var BABYLON;
                     this._colorDiff.scaleToRef(1.0 / particle.lifeTime, particle.colorStep);
                 }
                 else {
-                    particle.color.copyFrom(this._colorGradients[0].color);
+                    this._colorGradients[0].getColorToRef(particle.color);
                 }
             }
         };
@@ -56499,10 +56517,14 @@ var BABYLON;
                 serializationObject.colorGradients = [];
                 for (var _i = 0, colorGradients_1 = colorGradients; _i < colorGradients_1.length; _i++) {
                     var colorGradient = colorGradients_1[_i];
-                    serializationObject.colorGradients.push({
+                    var serializedGradient = {
                         gradient: colorGradient.gradient,
-                        color: colorGradient.color.asArray()
-                    });
+                        color1: colorGradient.color1.asArray()
+                    };
+                    if (colorGradient.color2) {
+                        serializedGradient.color2 = colorGradient.color2.asArray();
+                    }
+                    serializationObject.colorGradients.push(serializedGradient);
                 }
             }
             var sizeGradients = particleSystem.getSizeGradients();
@@ -56575,7 +56597,7 @@ var BABYLON;
             if (parsedParticleSystem.colorGradients) {
                 for (var _i = 0, _a = parsedParticleSystem.colorGradients; _i < _a.length; _i++) {
                     var colorGradient = _a[_i];
-                    particleSystem.addColorGradient(colorGradient.gradient, BABYLON.Color4.FromArray(colorGradient.color));
+                    particleSystem.addColorGradient(colorGradient.gradient, BABYLON.Color4.FromArray(colorGradient.color1), colorGradient.color2 ? BABYLON.Color4.FromArray(colorGradient.color2) : undefined);
                 }
             }
             if (parsedParticleSystem.sizeGradients) {
@@ -57570,14 +57592,15 @@ var BABYLON;
          * Adds a new color gradient
          * @param gradient defines the gradient to use (between 0 and 1)
          * @param color defines the color to affect to the specified gradient
+         * @param color2 defines an additional color used to define a range ([color, color2]) with main color to pick the final color from
          */
-        GPUParticleSystem.prototype.addColorGradient = function (gradient, color) {
+        GPUParticleSystem.prototype.addColorGradient = function (gradient, color1, color2) {
             if (!this._colorGradients) {
                 this._colorGradients = [];
             }
             var colorGradient = new BABYLON.ColorGradient();
             colorGradient.gradient = gradient;
-            colorGradient.color = color;
+            colorGradient.color1 = color1;
             this._colorGradients.push(colorGradient);
             this._colorGradients.sort(function (a, b) {
                 if (a.gradient < b.gradient) {
@@ -57890,7 +57913,7 @@ var BABYLON;
             for (var x = 0; x < textureWidth; x++) {
                 var ratio = x / textureWidth;
                 BABYLON.Tools.GetCurrentGradient(ratio, this._colorGradients, function (currentGradient, nextGradient, scale) {
-                    BABYLON.Color4.LerpToRef(currentGradient.color, nextGradient.color, scale, tmpColor);
+                    BABYLON.Color4.LerpToRef(currentGradient.color1, nextGradient.color1, scale, tmpColor);
                     data[x * 4] = tmpColor.r * 255;
                     data[x * 4 + 1] = tmpColor.g * 255;
                     data[x * 4 + 2] = tmpColor.b * 255;

src/Math/babylon.math.ts

@@ -6663,7 +6663,7 @@
     // There's a Tmp array per object type : int, float, Vector2, Vector3, Vector4, Quaternion, Matrix
     export class Tmp {
         public static Color3: Color3[] = [Color3.Black(), Color3.Black(), Color3.Black()];
-        public static Color4: Color4[] = [new Color4(0, 0, 0, 0)];
+        public static Color4: Color4[] = [new Color4(0, 0, 0, 0), new Color4(0, 0, 0, 0)];
         public static Vector2: Vector2[] = [Vector2.Zero(), Vector2.Zero(), Vector2.Zero()];  // 3 temp Vector2 at once should be enough
         public static Vector3: Vector3[] = [Vector3.Zero(), Vector3.Zero(), Vector3.Zero(),
         Vector3.Zero(), Vector3.Zero(), Vector3.Zero(), Vector3.Zero(), Vector3.Zero(), Vector3.Zero()];    // 9 temp Vector3 at once should be enough

src/Particles/babylon.IParticleSystem.ts

@@ -220,8 +220,9 @@ module BABYLON {
          * Adds a new color gradient
          * @param gradient defines the gradient to use (between 0 and 1)
          * @param color defines the color to affect to the specified gradient
+         * @param color2 defines an additional color used to define a range ([color, color2]) with main color to pick the final color from
          */
-        addColorGradient(gradient: number, color: Color4): IParticleSystem;   
+        addColorGradient(gradient: number, color1: Color4, color2?: Color4): IParticleSystem;   
         /**
          * Remove a specific color gradient
          * @param gradient defines the gradient to remove

src/Particles/babylon.gpuParticleSystem.ts

@@ -408,15 +408,16 @@
          * Adds a new color gradient
          * @param gradient defines the gradient to use (between 0 and 1)
          * @param color defines the color to affect to the specified gradient
+         * @param color2 defines an additional color used to define a range ([color, color2]) with main color to pick the final color from
          */
-        public addColorGradient(gradient: number, color: Color4): GPUParticleSystem {
+        public addColorGradient(gradient: number, color1: Color4, color2?: Color4): GPUParticleSystem {
             if (!this._colorGradients) {
                 this._colorGradients = [];
             }
 
             let colorGradient = new ColorGradient();
             colorGradient.gradient = gradient;
-            colorGradient.color = color;
+            colorGradient.color1 = color1;
             this._colorGradients.push(colorGradient);
 
             this._colorGradients.sort((a, b) => {
@@ -893,7 +894,7 @@
 
                 Tools.GetCurrentGradient(ratio, this._colorGradients, (currentGradient, nextGradient, scale) => {
 
-                    Color4.LerpToRef((<ColorGradient>currentGradient).color, (<ColorGradient>nextGradient).color, scale, tmpColor);
+                    Color4.LerpToRef((<ColorGradient>currentGradient).color1, (<ColorGradient>nextGradient).color1, scale, tmpColor);
                     data[x * 4] = tmpColor.r * 255;
                     data[x * 4 + 1] = tmpColor.g * 255;
                     data[x * 4 + 2] = tmpColor.b * 255;

src/Particles/babylon.particleSystem.ts

@@ -491,8 +491,13 @@
 
                         // Color
                         if (this._colorGradients && this._colorGradients.length > 0) {
+                            var color1 = Tmp.Color4[0];
+                            var color2 = Tmp.Color4[1];
+
                             Tools.GetCurrentGradient(ratio, this._colorGradients, (currentGradient, nextGradient, scale) => {
-                                Color4.LerpToRef((<ColorGradient>currentGradient).color, (<ColorGradient>nextGradient).color, scale, particle.color);
+                                (<ColorGradient>currentGradient).getColorToRef(color1);
+                                (<ColorGradient>nextGradient).getColorToRef(color2);
+                                Color4.LerpToRef(color1, color2, scale, particle.color);
                             });
                         }
                         else {
@@ -579,15 +584,17 @@
          * Adds a new color gradient
          * @param gradient defines the gradient to use (between 0 and 1)
          * @param color defines the color to affect to the specified gradient
+         * @param color2 defines an additional color used to define a range ([color, color2]) with main color to pick the final color from
          */
-        public addColorGradient(gradient: number, color: Color4): ParticleSystem {
+        public addColorGradient(gradient: number, color: Color4, color2?: Color4): ParticleSystem {
             if (!this._colorGradients) {
                 this._colorGradients = [];
             }
 
             let colorGradient = new ColorGradient();
             colorGradient.gradient = gradient;
-            colorGradient.color = color;
+            colorGradient.color1 = color;
+            colorGradient.color2 = color;
             this._colorGradients.push(colorGradient);
 
             this._colorGradients.sort((a, b) => {
@@ -962,7 +969,7 @@
                     this.colorDead.subtractToRef(particle.color, this._colorDiff);
                     this._colorDiff.scaleToRef(1.0 / particle.lifeTime, particle.colorStep);
                 } else {
-                    particle.color.copyFrom(this._colorGradients[0].color);
+                    this._colorGradients[0].getColorToRef(particle.color);
                 }
             }
         }
@@ -1427,10 +1434,16 @@
             if (colorGradients) {
                 serializationObject.colorGradients = [];
                 for (var colorGradient of colorGradients) {
-                    serializationObject.colorGradients.push({
+                    var serializedGradient: any = {
                         gradient: colorGradient.gradient,
-                        color: colorGradient.color.asArray()
-                    })
+                        color1: colorGradient.color1.asArray()
+                    };
+
+                    if (colorGradient.color2) {
+                        serializedGradient.color2 = colorGradient.color2.asArray();
+                    }
+
+                    serializationObject.colorGradients.push(serializedGradient);
                 }
             }
 
@@ -1513,7 +1526,7 @@
 
             if (parsedParticleSystem.colorGradients) {
                 for (var colorGradient of parsedParticleSystem.colorGradients) {
-                    particleSystem.addColorGradient(colorGradient.gradient, Color4.FromArray(colorGradient.color));
+                    particleSystem.addColorGradient(colorGradient.gradient, Color4.FromArray(colorGradient.color1), colorGradient.color2 ? Color4.FromArray(colorGradient.color2) : undefined);
                 }
             }
 

src/Tools/babylon.tools.ts

@@ -19,9 +19,27 @@
          */
         public gradient: number;
         /**
-         * Gets or sets associated color
+         * Gets or sets first associated color
          */
-        public color: Color4;
+        public color1: Color4;
+        /**
+         * Gets or sets second associated color
+         */
+        public color2?: Color4;
+
+        /** 
+         * Will get a color picked randomly between color1 and color2.
+         * If color2 is undefined then color1 will be used
+         * @param result defines the target Color4 to store the result in
+         */
+        public getColorToRef(result: Color4) {
+            if (!this.color2) {
+                result.copyFrom(this.color1);
+                return;
+            }
+
+            Color4.LerpToRef(this.color1, this.color2, Math.random(), result);
+        }
     }
 
     /** Class used to store factor gradient */