Fix ramp gradient

inspector/src/components/actionTabs/tabs/propertyGrids/particleSystems/particleSystemPropertyGridComponent.tsx

@@ -605,55 +605,60 @@ export class ParticleSystemPropertyGridComponent extends React.Component<IPartic
                     {
                         system instanceof ParticleSystem && 
                         <>
-                            <CheckBoxLineComponent label="Use ramp grandients" target={system} propertyName="useRampGradients"/>
-                            <ValueGradientGridComponent globalState={this.props.globalState} gradients={system.getRampGradients()!} 
-                                label="Ramp gradients"
-                                docLink="https://doc.babylonjs.com/babylon101/particles#ramp-gradients"
-                                onCreateRequired={() => {
-                                    system.addRampGradient(0, Color3.White());
-                                    system.addRampGradient(1, Color3.Black());
-                                    this.props.globalState.onCodeChangedObservable.notifyObservers({
-                                        object: system,
-                                        code: `TARGET.addRampGradient(0, BABYLON.Color3.White());`
-                                    });          
-                                    this.props.globalState.onCodeChangedObservable.notifyObservers({
-                                        object: system,
-                                        code: `TARGET.addRampGradient(1, BABYLON.Color3.Black());`
-                                    });                          
-                                }}
-                                mode={GradientGridMode.Color3}      
-                                host={system}    
-                                codeRecorderPropertyName="getRampGradients()"                                                   
-                                lockObject={this.props.lockObject}/>                    
-                                                                    
-                            <ValueGradientGridComponent globalState={this.props.globalState} gradients={system.getColorRemapGradients()!} 
-                                label="Color remap gradients"
-                                docLink="https://doc.babylonjs.com/babylon101/particles#ramp-gradients"
-                                onCreateRequired={() => {
-                                    system.addColorRemapGradient(0, 1, 1);
-                                    this.props.globalState.onCodeChangedObservable.notifyObservers({
-                                        object: system,
-                                        code: `TARGET.addColorRemapGradient(0, 1, 1);`
-                                    });
-                                }}
-                                host={system}    
-                                codeRecorderPropertyName="getColorRemapGradients()"      
-                                mode={GradientGridMode.Factor}                        
-                                lockObject={this.props.lockObject}/>                    
-                            <ValueGradientGridComponent globalState={this.props.globalState} gradients={system.getAlphaRemapGradients()!} 
-                                label="Alpha remap gradients"
-                                docLink="https://doc.babylonjs.com/babylon101/particles#ramp-gradients"
-                                onCreateRequired={() => {
-                                    system.addAlphaRemapGradient(0, 1, 1);
-                                    this.props.globalState.onCodeChangedObservable.notifyObservers({
-                                        object: system,
-                                        code: `TARGET.addAlphaRemapGradient(0, 1, 1);`
-                                    });                            
-                                }}
-                                host={system}    
-                                codeRecorderPropertyName="getAlphaRemapGradients()"                             
-                                mode={GradientGridMode.Factor}                        
-                                lockObject={this.props.lockObject}/>
+                            <CheckBoxLineComponent label="Enable ramp grandients" target={system} propertyName="useRampGradients"/>
+                            {
+                                system.useRampGradients &&
+                                <>
+                                    <ValueGradientGridComponent globalState={this.props.globalState} gradients={system.getRampGradients()!} 
+                                    label="Ramp gradients"
+                                    docLink="https://doc.babylonjs.com/babylon101/particles#ramp-gradients"
+                                    onCreateRequired={() => {
+                                        system.addRampGradient(0, Color3.White());
+                                        system.addRampGradient(1, Color3.Black());
+                                        this.props.globalState.onCodeChangedObservable.notifyObservers({
+                                            object: system,
+                                            code: `TARGET.addRampGradient(0, BABYLON.Color3.White());`
+                                        });          
+                                        this.props.globalState.onCodeChangedObservable.notifyObservers({
+                                            object: system,
+                                            code: `TARGET.addRampGradient(1, BABYLON.Color3.Black());`
+                                        });                          
+                                    }}
+                                    mode={GradientGridMode.Color3}      
+                                    host={system}    
+                                    codeRecorderPropertyName="getRampGradients()"                                                   
+                                    lockObject={this.props.lockObject}/>                    
+                                                                        
+                                <ValueGradientGridComponent globalState={this.props.globalState} gradients={system.getColorRemapGradients()!} 
+                                    label="Color remap gradients"
+                                    docLink="https://doc.babylonjs.com/babylon101/particles#ramp-gradients"
+                                    onCreateRequired={() => {
+                                        system.addColorRemapGradient(0, 1, 1);
+                                        this.props.globalState.onCodeChangedObservable.notifyObservers({
+                                            object: system,
+                                            code: `TARGET.addColorRemapGradient(0, 1, 1);`
+                                        });
+                                    }}
+                                    host={system}    
+                                    codeRecorderPropertyName="getColorRemapGradients()"      
+                                    mode={GradientGridMode.Factor}                        
+                                    lockObject={this.props.lockObject}/>                    
+                                <ValueGradientGridComponent globalState={this.props.globalState} gradients={system.getAlphaRemapGradients()!} 
+                                    label="Alpha remap gradients"
+                                    docLink="https://doc.babylonjs.com/babylon101/particles#ramp-gradients"
+                                    onCreateRequired={() => {
+                                        system.addAlphaRemapGradient(0, 1, 1);
+                                        this.props.globalState.onCodeChangedObservable.notifyObservers({
+                                            object: system,
+                                            code: `TARGET.addAlphaRemapGradient(0, 1, 1);`
+                                        });                            
+                                    }}
+                                    host={system}    
+                                    codeRecorderPropertyName="getAlphaRemapGradients()"                             
+                                    mode={GradientGridMode.Factor}                        
+                                    lockObject={this.props.lockObject}/>
+                                </>
+                            }                           
                         </>
                     }                                   
                 </LineContainerComponent>                     

inspector/src/components/actionTabs/tabs/propertyGrids/particleSystems/valueGradientGridComponent.tsx

@@ -9,7 +9,6 @@ import { ColorGradientStepGridComponent } from './colorGradientStepGridComponent
 import { Color4, Color3 } from 'babylonjs/Maths/math.color';
 import { LinkButtonComponent } from '../../../lines/linkButtonComponent';
 import { IParticleSystem } from 'babylonjs/Particles/IParticleSystem';
-import { GPUParticleSystem } from 'babylonjs/Particles/gpuParticleSystem';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
 
 export enum GradientGridMode {
@@ -43,11 +42,7 @@ export class ValueGradientGridComponent extends React.Component<IValueGradientGr
 
         if (index > -1) {
             gradients.splice(index, 1);
-            this.forceUpdate();
-
-            if (this.props.host instanceof GPUParticleSystem) {
-                this.props.host.forceRefreshGradients();
-            }
+            this.updateAndSync();
 
             this.props.globalState.onCodeChangedObservable.notifyObservers({
                 object: this.props.host,
@@ -86,9 +81,7 @@ export class ValueGradientGridComponent extends React.Component<IValueGradientGr
                 break;              
         }
 
-        if (this.props.host instanceof GPUParticleSystem) {
-            this.props.host.forceRefreshGradients();
-        }
+        this.props.host.forceRefreshGradients();
 
         this.forceUpdate();
     }
@@ -126,9 +119,7 @@ export class ValueGradientGridComponent extends React.Component<IValueGradientGr
     }
 
     updateAndSync() {
-        if (this.props.host instanceof GPUParticleSystem) {
-            this.props.host.forceRefreshGradients();
-        }
+        this.props.host.forceRefreshGradients();
         
         this.forceUpdate();         
     }
@@ -145,11 +136,7 @@ export class ValueGradientGridComponent extends React.Component<IValueGradientGr
                             icon={faTrash}
                             onIconClick={() => {
                                 gradients!.length = 0;
-                                this.forceUpdate();
-
-                                if (this.props.host instanceof GPUParticleSystem) {
-                                    this.props.host.forceRefreshGradients();
-                                }
+                                this.updateAndSync();
                     
                                 this.props.globalState.onCodeChangedObservable.notifyObservers({
                                     object: this.props.host,

src/Particles/IParticleSystem.ts

@@ -300,6 +300,9 @@ export interface IParticleSystem {
      */
     rebuild(): void;
 
+    /** Force the system to rebuild all gradients that need to be resync */
+    forceRefreshGradients(): void;
+
     /**
      * Starts the particle system and begins to emit
      * @param delay defines the delay in milliseconds before starting the system (0 by default)

src/Particles/gpuParticleSystem.ts

@@ -280,7 +280,7 @@ export class GPUParticleSystem extends BaseParticleSystem implements IDisposable
         }
     }
 
-    /** Force the system to rebuild all gradients */
+    /** Force the system to rebuild all gradients that need to be resync */
     public forceRefreshGradients() {
         this._refreshColorGradient();
         this._refreshFactorGradient(this._sizeGradients, "_sizeGradientsTexture");

src/Particles/particleSystem.ts

@@ -789,20 +789,16 @@ export class ParticleSystem extends BaseParticleSystem implements IDisposable, I
         return this._rampGradients;
     }
 
-    /**
-     * Adds a new ramp gradient used to remap particle colors
-     * @param gradient defines the gradient to use (between 0 and 1)
-     * @param color defines the color to affect to the specified gradient
-     * @returns the current particle system
-     */
-    public addRampGradient(gradient: number, color: Color3): ParticleSystem {
+    /** Force the system to rebuild all gradients that need to be resync */
+    public forceRefreshGradients() {
+        this._syncRampGradientTexture();
+    }
+
+    private _syncRampGradientTexture() {
         if (!this._rampGradients) {
-            this._rampGradients = [];
+            return;
         }
 
-        let rampGradient = new Color3Gradient(gradient, color);
-        this._rampGradients.push(rampGradient);
-
         this._rampGradients.sort((a, b) => {
             if (a.gradient < b.gradient) {
                 return -1;
@@ -815,10 +811,27 @@ export class ParticleSystem extends BaseParticleSystem implements IDisposable, I
 
         if (this._rampGradientsTexture) {
             this._rampGradientsTexture.dispose();
-            (<any>this._rampGradientsTexture) = null;
+            this._rampGradientsTexture = null;
         }
 
         this._createRampGradientTexture();
+    }
+
+    /**
+     * Adds a new ramp gradient used to remap particle colors
+     * @param gradient defines the gradient to use (between 0 and 1)
+     * @param color defines the color to affect to the specified gradient
+     * @returns the current particle system
+     */
+    public addRampGradient(gradient: number, color: Color3): ParticleSystem {
+        if (!this._rampGradients) {
+            this._rampGradients = [];
+        }
+
+        let rampGradient = new Color3Gradient(gradient, color);
+        this._rampGradients.push(rampGradient);
+
+        this._syncRampGradientTexture();
 
         return this;
     }
@@ -830,7 +843,7 @@ export class ParticleSystem extends BaseParticleSystem implements IDisposable, I
      */
     public removeRampGradient(gradient: number): ParticleSystem {
         this._removeGradientAndTexture(gradient, this._rampGradients, this._rampGradientsTexture);
-        (<any>this._rampGradientsTexture) = null;
+        this._rampGradientsTexture = null;
 
         if (this._rampGradients && this._rampGradients.length > 0) {
             this._createRampGradientTexture();
@@ -1817,6 +1830,10 @@ export class ParticleSystem extends BaseParticleSystem implements IDisposable, I
         }
 
         if (this._rampGradientsTexture) {
+            if (!this._rampGradients || !this._rampGradients.length) {
+                this._rampGradientsTexture.dispose();
+                this._rampGradientsTexture = null;
+            }
             effect.setTexture("rampSampler", this._rampGradientsTexture);
         }