浏览代码

particle system color gradient

David Catuhe 7 年之前
父节点
当前提交
c99f4c510d

文件差异内容过多而无法显示
+ 1184 - 1172
dist/preview release/babylon.d.ts


文件差异内容过多而无法显示
+ 7 - 7
dist/preview release/babylon.js


+ 75 - 8
dist/preview release/babylon.max.js

@@ -55113,6 +55113,12 @@ var BABYLON;
 
 var BABYLON;
 (function (BABYLON) {
+    /** @hidden */
+    var ColorGradient = /** @class */ (function () {
+        function ColorGradient() {
+        }
+        return ColorGradient;
+    }());
     /**
      * This represents a particle system in Babylon.
      * Particles are often small sprites used to simulate hard-to-reproduce phenomena like fire, smoke, water, or abstract visual effects like magic glitter and faery dust.
@@ -55246,6 +55252,7 @@ var BABYLON;
              * You can use gravity if you want to give an orientation to your particles.
              */
             this.gravity = BABYLON.Vector3.Zero();
+            this._colorGradients = null;
             /**
              * Random color of each particle after it has been emitted, between color1 and color2 vectors
              */
@@ -55362,10 +55369,25 @@ var BABYLON;
                         continue;
                     }
                     else {
-                        particle.colorStep.scaleToRef(_this._scaledUpdateSpeed, _this._scaledColorStep);
-                        particle.color.addInPlace(_this._scaledColorStep);
-                        if (particle.color.a < 0)
-                            particle.color.a = 0;
+                        if (_this._colorGradients) {
+                            var ratio = particle.age / particle.lifeTime;
+                            for (var gradientIndex = 0; gradientIndex < _this._colorGradients.length - 1; gradientIndex++) {
+                                var currentGradient = _this._colorGradients[gradientIndex];
+                                var nextGradient = _this._colorGradients[gradientIndex + 1];
+                                if (ratio >= currentGradient.gradient && ratio <= nextGradient.gradient) {
+                                    var scale = (ratio - currentGradient.gradient) / (nextGradient.gradient - currentGradient.gradient);
+                                    BABYLON.Color4.LerpToRef(currentGradient.color, nextGradient.color, scale, particle.color);
+                                    break;
+                                }
+                            }
+                        }
+                        else {
+                            particle.colorStep.scaleToRef(_this._scaledUpdateSpeed, _this._scaledColorStep);
+                            particle.color.addInPlace(_this._scaledColorStep);
+                            if (particle.color.a < 0) {
+                                particle.color.a = 0;
+                            }
+                        }
                         particle.angle += particle.angularSpeed * _this._scaledUpdateSpeed;
                         particle.direction.scaleToRef(_this._scaledUpdateSpeed * particle.emitPower, _this._scaledDirection);
                         particle.position.addInPlace(_this._scaledDirection);
@@ -55512,6 +55534,49 @@ var BABYLON;
         ParticleSystem.prototype.getClassName = function () {
             return "ParticleSystem";
         };
+        /**
+         * 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
+         */
+        ParticleSystem.prototype.addColorGradient = function (gradient, color) {
+            if (!this._colorGradients) {
+                this._colorGradients = [];
+            }
+            var colorGradient = new ColorGradient();
+            colorGradient.gradient = gradient;
+            colorGradient.color = color;
+            this._colorGradients.push(colorGradient);
+            this._colorGradients.sort(function (a, b) {
+                if (a.gradient < b.gradient) {
+                    return -1;
+                }
+                else if (a.gradient > b.gradient) {
+                    return 1;
+                }
+                return 0;
+            });
+            return this;
+        };
+        /**
+         * Remove a specific color gradient
+         * @param gradient defines the gradient to remove
+         */
+        ParticleSystem.prototype.removeColorGradient = function (gradient) {
+            if (!this._colorGradients) {
+                return this;
+            }
+            var index = 0;
+            for (var _i = 0, _a = this._colorGradients; _i < _a.length; _i++) {
+                var colorGradient = _a[_i];
+                if (colorGradient.gradient === gradient) {
+                    this._colorGradients.splice(index, 1);
+                    break;
+                }
+                index++;
+            }
+            return this;
+        };
         ParticleSystem.prototype._resetEffect = function () {
             if (this._vertexBuffer) {
                 this._vertexBuffer.dispose();
@@ -55732,10 +55797,12 @@ var BABYLON;
                 particle.size = BABYLON.Scalar.RandomRange(this.minSize, this.maxSize);
                 particle.scale.copyFromFloats(BABYLON.Scalar.RandomRange(this.minScaleX, this.maxScaleX), BABYLON.Scalar.RandomRange(this.minScaleY, this.maxScaleY));
                 particle.angularSpeed = BABYLON.Scalar.RandomRange(this.minAngularSpeed, this.maxAngularSpeed);
-                var step = BABYLON.Scalar.RandomRange(0, 1.0);
-                BABYLON.Color4.LerpToRef(this.color1, this.color2, step, particle.color);
-                this.colorDead.subtractToRef(particle.color, this._colorDiff);
-                this._colorDiff.scaleToRef(1.0 / particle.lifeTime, particle.colorStep);
+                if (!this._colorGradients) {
+                    var step = BABYLON.Scalar.RandomRange(0, 1.0);
+                    BABYLON.Color4.LerpToRef(this.color1, this.color2, step, particle.color);
+                    this.colorDead.subtractToRef(particle.color, this._colorDiff);
+                    this._colorDiff.scaleToRef(1.0 / particle.lifeTime, particle.colorStep);
+                }
             }
         };
         ParticleSystem.prototype._getEffect = function () {

+ 75 - 8
dist/preview release/babylon.no-module.max.js

@@ -55080,6 +55080,12 @@ var BABYLON;
 
 var BABYLON;
 (function (BABYLON) {
+    /** @hidden */
+    var ColorGradient = /** @class */ (function () {
+        function ColorGradient() {
+        }
+        return ColorGradient;
+    }());
     /**
      * This represents a particle system in Babylon.
      * Particles are often small sprites used to simulate hard-to-reproduce phenomena like fire, smoke, water, or abstract visual effects like magic glitter and faery dust.
@@ -55213,6 +55219,7 @@ var BABYLON;
              * You can use gravity if you want to give an orientation to your particles.
              */
             this.gravity = BABYLON.Vector3.Zero();
+            this._colorGradients = null;
             /**
              * Random color of each particle after it has been emitted, between color1 and color2 vectors
              */
@@ -55329,10 +55336,25 @@ var BABYLON;
                         continue;
                     }
                     else {
-                        particle.colorStep.scaleToRef(_this._scaledUpdateSpeed, _this._scaledColorStep);
-                        particle.color.addInPlace(_this._scaledColorStep);
-                        if (particle.color.a < 0)
-                            particle.color.a = 0;
+                        if (_this._colorGradients) {
+                            var ratio = particle.age / particle.lifeTime;
+                            for (var gradientIndex = 0; gradientIndex < _this._colorGradients.length - 1; gradientIndex++) {
+                                var currentGradient = _this._colorGradients[gradientIndex];
+                                var nextGradient = _this._colorGradients[gradientIndex + 1];
+                                if (ratio >= currentGradient.gradient && ratio <= nextGradient.gradient) {
+                                    var scale = (ratio - currentGradient.gradient) / (nextGradient.gradient - currentGradient.gradient);
+                                    BABYLON.Color4.LerpToRef(currentGradient.color, nextGradient.color, scale, particle.color);
+                                    break;
+                                }
+                            }
+                        }
+                        else {
+                            particle.colorStep.scaleToRef(_this._scaledUpdateSpeed, _this._scaledColorStep);
+                            particle.color.addInPlace(_this._scaledColorStep);
+                            if (particle.color.a < 0) {
+                                particle.color.a = 0;
+                            }
+                        }
                         particle.angle += particle.angularSpeed * _this._scaledUpdateSpeed;
                         particle.direction.scaleToRef(_this._scaledUpdateSpeed * particle.emitPower, _this._scaledDirection);
                         particle.position.addInPlace(_this._scaledDirection);
@@ -55479,6 +55501,49 @@ var BABYLON;
         ParticleSystem.prototype.getClassName = function () {
             return "ParticleSystem";
         };
+        /**
+         * 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
+         */
+        ParticleSystem.prototype.addColorGradient = function (gradient, color) {
+            if (!this._colorGradients) {
+                this._colorGradients = [];
+            }
+            var colorGradient = new ColorGradient();
+            colorGradient.gradient = gradient;
+            colorGradient.color = color;
+            this._colorGradients.push(colorGradient);
+            this._colorGradients.sort(function (a, b) {
+                if (a.gradient < b.gradient) {
+                    return -1;
+                }
+                else if (a.gradient > b.gradient) {
+                    return 1;
+                }
+                return 0;
+            });
+            return this;
+        };
+        /**
+         * Remove a specific color gradient
+         * @param gradient defines the gradient to remove
+         */
+        ParticleSystem.prototype.removeColorGradient = function (gradient) {
+            if (!this._colorGradients) {
+                return this;
+            }
+            var index = 0;
+            for (var _i = 0, _a = this._colorGradients; _i < _a.length; _i++) {
+                var colorGradient = _a[_i];
+                if (colorGradient.gradient === gradient) {
+                    this._colorGradients.splice(index, 1);
+                    break;
+                }
+                index++;
+            }
+            return this;
+        };
         ParticleSystem.prototype._resetEffect = function () {
             if (this._vertexBuffer) {
                 this._vertexBuffer.dispose();
@@ -55699,10 +55764,12 @@ var BABYLON;
                 particle.size = BABYLON.Scalar.RandomRange(this.minSize, this.maxSize);
                 particle.scale.copyFromFloats(BABYLON.Scalar.RandomRange(this.minScaleX, this.maxScaleX), BABYLON.Scalar.RandomRange(this.minScaleY, this.maxScaleY));
                 particle.angularSpeed = BABYLON.Scalar.RandomRange(this.minAngularSpeed, this.maxAngularSpeed);
-                var step = BABYLON.Scalar.RandomRange(0, 1.0);
-                BABYLON.Color4.LerpToRef(this.color1, this.color2, step, particle.color);
-                this.colorDead.subtractToRef(particle.color, this._colorDiff);
-                this._colorDiff.scaleToRef(1.0 / particle.lifeTime, particle.colorStep);
+                if (!this._colorGradients) {
+                    var step = BABYLON.Scalar.RandomRange(0, 1.0);
+                    BABYLON.Color4.LerpToRef(this.color1, this.color2, step, particle.color);
+                    this.colorDead.subtractToRef(particle.color, this._colorDiff);
+                    this._colorDiff.scaleToRef(1.0 / particle.lifeTime, particle.colorStep);
+                }
             }
         };
         ParticleSystem.prototype._getEffect = function () {

文件差异内容过多而无法显示
+ 7 - 7
dist/preview release/babylon.worker.js


+ 75 - 8
dist/preview release/es6.js

@@ -55080,6 +55080,12 @@ var BABYLON;
 
 var BABYLON;
 (function (BABYLON) {
+    /** @hidden */
+    var ColorGradient = /** @class */ (function () {
+        function ColorGradient() {
+        }
+        return ColorGradient;
+    }());
     /**
      * This represents a particle system in Babylon.
      * Particles are often small sprites used to simulate hard-to-reproduce phenomena like fire, smoke, water, or abstract visual effects like magic glitter and faery dust.
@@ -55213,6 +55219,7 @@ var BABYLON;
              * You can use gravity if you want to give an orientation to your particles.
              */
             this.gravity = BABYLON.Vector3.Zero();
+            this._colorGradients = null;
             /**
              * Random color of each particle after it has been emitted, between color1 and color2 vectors
              */
@@ -55329,10 +55336,25 @@ var BABYLON;
                         continue;
                     }
                     else {
-                        particle.colorStep.scaleToRef(_this._scaledUpdateSpeed, _this._scaledColorStep);
-                        particle.color.addInPlace(_this._scaledColorStep);
-                        if (particle.color.a < 0)
-                            particle.color.a = 0;
+                        if (_this._colorGradients) {
+                            var ratio = particle.age / particle.lifeTime;
+                            for (var gradientIndex = 0; gradientIndex < _this._colorGradients.length - 1; gradientIndex++) {
+                                var currentGradient = _this._colorGradients[gradientIndex];
+                                var nextGradient = _this._colorGradients[gradientIndex + 1];
+                                if (ratio >= currentGradient.gradient && ratio <= nextGradient.gradient) {
+                                    var scale = (ratio - currentGradient.gradient) / (nextGradient.gradient - currentGradient.gradient);
+                                    BABYLON.Color4.LerpToRef(currentGradient.color, nextGradient.color, scale, particle.color);
+                                    break;
+                                }
+                            }
+                        }
+                        else {
+                            particle.colorStep.scaleToRef(_this._scaledUpdateSpeed, _this._scaledColorStep);
+                            particle.color.addInPlace(_this._scaledColorStep);
+                            if (particle.color.a < 0) {
+                                particle.color.a = 0;
+                            }
+                        }
                         particle.angle += particle.angularSpeed * _this._scaledUpdateSpeed;
                         particle.direction.scaleToRef(_this._scaledUpdateSpeed * particle.emitPower, _this._scaledDirection);
                         particle.position.addInPlace(_this._scaledDirection);
@@ -55479,6 +55501,49 @@ var BABYLON;
         ParticleSystem.prototype.getClassName = function () {
             return "ParticleSystem";
         };
+        /**
+         * 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
+         */
+        ParticleSystem.prototype.addColorGradient = function (gradient, color) {
+            if (!this._colorGradients) {
+                this._colorGradients = [];
+            }
+            var colorGradient = new ColorGradient();
+            colorGradient.gradient = gradient;
+            colorGradient.color = color;
+            this._colorGradients.push(colorGradient);
+            this._colorGradients.sort(function (a, b) {
+                if (a.gradient < b.gradient) {
+                    return -1;
+                }
+                else if (a.gradient > b.gradient) {
+                    return 1;
+                }
+                return 0;
+            });
+            return this;
+        };
+        /**
+         * Remove a specific color gradient
+         * @param gradient defines the gradient to remove
+         */
+        ParticleSystem.prototype.removeColorGradient = function (gradient) {
+            if (!this._colorGradients) {
+                return this;
+            }
+            var index = 0;
+            for (var _i = 0, _a = this._colorGradients; _i < _a.length; _i++) {
+                var colorGradient = _a[_i];
+                if (colorGradient.gradient === gradient) {
+                    this._colorGradients.splice(index, 1);
+                    break;
+                }
+                index++;
+            }
+            return this;
+        };
         ParticleSystem.prototype._resetEffect = function () {
             if (this._vertexBuffer) {
                 this._vertexBuffer.dispose();
@@ -55699,10 +55764,12 @@ var BABYLON;
                 particle.size = BABYLON.Scalar.RandomRange(this.minSize, this.maxSize);
                 particle.scale.copyFromFloats(BABYLON.Scalar.RandomRange(this.minScaleX, this.maxScaleX), BABYLON.Scalar.RandomRange(this.minScaleY, this.maxScaleY));
                 particle.angularSpeed = BABYLON.Scalar.RandomRange(this.minAngularSpeed, this.maxAngularSpeed);
-                var step = BABYLON.Scalar.RandomRange(0, 1.0);
-                BABYLON.Color4.LerpToRef(this.color1, this.color2, step, particle.color);
-                this.colorDead.subtractToRef(particle.color, this._colorDiff);
-                this._colorDiff.scaleToRef(1.0 / particle.lifeTime, particle.colorStep);
+                if (!this._colorGradients) {
+                    var step = BABYLON.Scalar.RandomRange(0, 1.0);
+                    BABYLON.Color4.LerpToRef(this.color1, this.color2, step, particle.color);
+                    this.colorDead.subtractToRef(particle.color, this._colorDiff);
+                    this._colorDiff.scaleToRef(1.0 / particle.lifeTime, particle.colorStep);
+                }
             }
         };
         ParticleSystem.prototype._getEffect = function () {

文件差异内容过多而无法显示
+ 7 - 7
dist/preview release/viewer/babylon.viewer.js


+ 75 - 8
dist/preview release/viewer/babylon.viewer.max.js

@@ -55201,6 +55201,12 @@ var BABYLON;
 
 var BABYLON;
 (function (BABYLON) {
+    /** @hidden */
+    var ColorGradient = /** @class */ (function () {
+        function ColorGradient() {
+        }
+        return ColorGradient;
+    }());
     /**
      * This represents a particle system in Babylon.
      * Particles are often small sprites used to simulate hard-to-reproduce phenomena like fire, smoke, water, or abstract visual effects like magic glitter and faery dust.
@@ -55334,6 +55340,7 @@ var BABYLON;
              * You can use gravity if you want to give an orientation to your particles.
              */
             this.gravity = BABYLON.Vector3.Zero();
+            this._colorGradients = null;
             /**
              * Random color of each particle after it has been emitted, between color1 and color2 vectors
              */
@@ -55450,10 +55457,25 @@ var BABYLON;
                         continue;
                     }
                     else {
-                        particle.colorStep.scaleToRef(_this._scaledUpdateSpeed, _this._scaledColorStep);
-                        particle.color.addInPlace(_this._scaledColorStep);
-                        if (particle.color.a < 0)
-                            particle.color.a = 0;
+                        if (_this._colorGradients) {
+                            var ratio = particle.age / particle.lifeTime;
+                            for (var gradientIndex = 0; gradientIndex < _this._colorGradients.length - 1; gradientIndex++) {
+                                var currentGradient = _this._colorGradients[gradientIndex];
+                                var nextGradient = _this._colorGradients[gradientIndex + 1];
+                                if (ratio >= currentGradient.gradient && ratio <= nextGradient.gradient) {
+                                    var scale = (ratio - currentGradient.gradient) / (nextGradient.gradient - currentGradient.gradient);
+                                    BABYLON.Color4.LerpToRef(currentGradient.color, nextGradient.color, scale, particle.color);
+                                    break;
+                                }
+                            }
+                        }
+                        else {
+                            particle.colorStep.scaleToRef(_this._scaledUpdateSpeed, _this._scaledColorStep);
+                            particle.color.addInPlace(_this._scaledColorStep);
+                            if (particle.color.a < 0) {
+                                particle.color.a = 0;
+                            }
+                        }
                         particle.angle += particle.angularSpeed * _this._scaledUpdateSpeed;
                         particle.direction.scaleToRef(_this._scaledUpdateSpeed * particle.emitPower, _this._scaledDirection);
                         particle.position.addInPlace(_this._scaledDirection);
@@ -55600,6 +55622,49 @@ var BABYLON;
         ParticleSystem.prototype.getClassName = function () {
             return "ParticleSystem";
         };
+        /**
+         * 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
+         */
+        ParticleSystem.prototype.addColorGradient = function (gradient, color) {
+            if (!this._colorGradients) {
+                this._colorGradients = [];
+            }
+            var colorGradient = new ColorGradient();
+            colorGradient.gradient = gradient;
+            colorGradient.color = color;
+            this._colorGradients.push(colorGradient);
+            this._colorGradients.sort(function (a, b) {
+                if (a.gradient < b.gradient) {
+                    return -1;
+                }
+                else if (a.gradient > b.gradient) {
+                    return 1;
+                }
+                return 0;
+            });
+            return this;
+        };
+        /**
+         * Remove a specific color gradient
+         * @param gradient defines the gradient to remove
+         */
+        ParticleSystem.prototype.removeColorGradient = function (gradient) {
+            if (!this._colorGradients) {
+                return this;
+            }
+            var index = 0;
+            for (var _i = 0, _a = this._colorGradients; _i < _a.length; _i++) {
+                var colorGradient = _a[_i];
+                if (colorGradient.gradient === gradient) {
+                    this._colorGradients.splice(index, 1);
+                    break;
+                }
+                index++;
+            }
+            return this;
+        };
         ParticleSystem.prototype._resetEffect = function () {
             if (this._vertexBuffer) {
                 this._vertexBuffer.dispose();
@@ -55820,10 +55885,12 @@ var BABYLON;
                 particle.size = BABYLON.Scalar.RandomRange(this.minSize, this.maxSize);
                 particle.scale.copyFromFloats(BABYLON.Scalar.RandomRange(this.minScaleX, this.maxScaleX), BABYLON.Scalar.RandomRange(this.minScaleY, this.maxScaleY));
                 particle.angularSpeed = BABYLON.Scalar.RandomRange(this.minAngularSpeed, this.maxAngularSpeed);
-                var step = BABYLON.Scalar.RandomRange(0, 1.0);
-                BABYLON.Color4.LerpToRef(this.color1, this.color2, step, particle.color);
-                this.colorDead.subtractToRef(particle.color, this._colorDiff);
-                this._colorDiff.scaleToRef(1.0 / particle.lifeTime, particle.colorStep);
+                if (!this._colorGradients) {
+                    var step = BABYLON.Scalar.RandomRange(0, 1.0);
+                    BABYLON.Color4.LerpToRef(this.color1, this.color2, step, particle.color);
+                    this.colorDead.subtractToRef(particle.color, this._colorDiff);
+                    this._colorDiff.scaleToRef(1.0 / particle.lifeTime, particle.colorStep);
+                }
             }
         };
         ParticleSystem.prototype._getEffect = function () {

+ 85 - 9
src/Particles/babylon.particleSystem.ts

@@ -1,4 +1,11 @@
 module BABYLON {
+
+    /** @hidden */
+    class ColorGradient {
+        public gradient: number;
+        public color: Color4;
+    }
+
     /**
      * This represents a particle system in Babylon.
      * Particles are often small sprites used to simulate hard-to-reproduce phenomena like fire, smoke, water, or abstract visual effects like magic glitter and faery dust.
@@ -169,6 +176,8 @@
          */
         public gravity = Vector3.Zero();
 
+        private _colorGradients: Nullable<Array<ColorGradient>> = null;
+
        /**
          * Random direction of each particle after it has been emitted, between direction1 and direction2 vectors.
          * This only works when particleEmitterTyps is a BoxParticleEmitter
@@ -445,12 +454,28 @@
                         continue;
                     }
                     else {
-                        particle.colorStep.scaleToRef(this._scaledUpdateSpeed, this._scaledColorStep);
-                        particle.color.addInPlace(this._scaledColorStep);
-
-                        if (particle.color.a < 0)
-                            particle.color.a = 0;
+                        if (this._colorGradients) {
+                            let ratio = particle.age / particle.lifeTime;
+
+                            for (var gradientIndex = 0; gradientIndex < this._colorGradients.length - 1; gradientIndex++) {
+                                let currentGradient = this._colorGradients[gradientIndex];
+                                let nextGradient = this._colorGradients[gradientIndex + 1];
+
+                                if (ratio >= currentGradient.gradient && ratio <= nextGradient.gradient) {
+                                    let scale = (ratio - currentGradient.gradient) / (nextGradient.gradient - currentGradient.gradient);
+                                    Color4.LerpToRef(currentGradient.color, nextGradient.color, scale, particle.color);
+                                    break;
+                                }
+                            }
+                        }
+                        else {
+                            particle.colorStep.scaleToRef(this._scaledUpdateSpeed, this._scaledColorStep);
+                            particle.color.addInPlace(this._scaledColorStep);
 
+                            if (particle.color.a < 0) {
+                                particle.color.a = 0;
+                            }
+                        }
                         particle.angle += particle.angularSpeed * this._scaledUpdateSpeed;
 
                         particle.direction.scaleToRef(this._scaledUpdateSpeed * particle.emitPower, this._scaledDirection);
@@ -467,6 +492,55 @@
             }
         }
 
+        /**
+         * 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
+         */
+        public addColorGradient(gradient: number, color: Color4): ParticleSystem {
+            if (!this._colorGradients) {
+                this._colorGradients = [];
+            }
+
+            let colorGradient = new ColorGradient();
+            colorGradient.gradient = gradient;
+            colorGradient.color = color;
+            this._colorGradients.push(colorGradient);
+
+            this._colorGradients.sort((a, b) => {
+                if (a.gradient < b.gradient) {
+                    return -1;
+                } else if (a.gradient > b.gradient) {
+                    return 1;
+                }
+
+                return 0;
+            })
+
+            return this;
+        }
+
+        /**
+         * Remove a specific color gradient
+         * @param gradient defines the gradient to remove
+         */
+        public removeColorGradient(gradient: number): ParticleSystem {
+            if (!this._colorGradients) {
+                return this;
+            }
+
+            let index = 0;
+            for (var colorGradient of this._colorGradients) {
+                if (colorGradient.gradient === gradient) {
+                    this._colorGradients.splice(index, 1);
+                    break;
+                }
+                index++;
+            }
+
+            return this;
+        }
+
         private _resetEffect() {
             if (this._vertexBuffer) {
                 this._vertexBuffer.dispose();
@@ -771,12 +845,14 @@
                 particle.scale.copyFromFloats(Scalar.RandomRange(this.minScaleX, this.maxScaleX), Scalar.RandomRange(this.minScaleY, this.maxScaleY));
                 particle.angularSpeed = Scalar.RandomRange(this.minAngularSpeed, this.maxAngularSpeed);
 
-                var step = Scalar.RandomRange(0, 1.0);
+                if (!this._colorGradients) {
+                    var step = Scalar.RandomRange(0, 1.0);
 
-                Color4.LerpToRef(this.color1, this.color2, step, particle.color);
+                    Color4.LerpToRef(this.color1, this.color2, step, particle.color);
 
-                this.colorDead.subtractToRef(particle.color, this._colorDiff);
-                this._colorDiff.scaleToRef(1.0 / particle.lifeTime, particle.colorStep);
+                    this.colorDead.subtractToRef(particle.color, this._colorDiff);
+                    this._colorDiff.scaleToRef(1.0 / particle.lifeTime, particle.colorStep);
+                }
             }
         }