Fixed stop/pause and dispose (particle inspector)

.vscode/launch.json

@@ -143,6 +143,20 @@
             "runtimeArgs": [
                 "--enable-unsafe-es3-apis"
             ]
+        },        
+        {
+            "name": "Launch Local Dev (Edge)",
+            "type": "edge",
+            "version": "dev",
+            "request": "launch",
+            "url": "http://localhost:1338/localDev/index.html",
+            "webRoot": "${workspaceRoot}/",
+            "sourceMaps": true,
+            "preLaunchTask": "run",
+            "userDataDir": "${workspaceRoot}/.tempChromeProfileForDebug",
+            "runtimeArgs": [
+                "--enable-unsafe-es3-apis"
+            ]
         },
         {
             "name": "Launch Local Dev - Worker mode (Chrome)",
@@ -171,20 +185,6 @@
             ]
         },        
         {
-            "name": "Launch Local Dev (Experimental Firefox)",
-            "type": "firefox",
-            "request": "launch",
-            "reAttach": true,
-            "url": "http://localhost:1338/localDev/index.html",
-            "pathMappings": [
-                {
-                    "url": "http://localhost:1338",
-                    "path": "${workspaceFolder}"
-                }
-            ],
-            "preLaunchTask": "run"
-        },
-        {
             "name": "Launch Build Validation (Chrome)",
             "type": "chrome",
             "request": "launch",
@@ -198,14 +198,6 @@
             ]
         },
         {
-            "name": "Launch Build Validation (Firefox)",
-            "type": "firefox",
-            "request": "launch",
-            "reAttach": true,
-            "webRoot": "${workspaceRoot}/",
-            "url": "http://localhost:1338/tests/validation/index.html"
-        },
-        {
             "name": "Launch memory checks (Chrome)",
             "type": "chrome",
             "request": "launch",

.vscode/tasks.json

@@ -41,7 +41,7 @@
                 "background": {
                     "activeOnStart": true,
                     "beginsPattern": "Starting \\'watchCore\\'",
-                    "endsPattern": "Watching for file changes"
+                    "endsPattern": "changes"
                 }
             }
         },

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

@@ -36,6 +36,7 @@ import { MeshParticleEmitter } from 'babylonjs/Particles/EmitterTypes/meshPartic
 import { MeshEmitterGridComponent } from './meshEmitterGridComponent';
 import { ValueGradientGridComponent, GradientGridMode } from './valueGradientGridComponent';
 import { Color3, Color4 } from 'babylonjs/Maths/math.color';
+import { GPUParticleSystem } from 'babylonjs/Particles/gpuParticleSystem';
 
 interface IParticleSystemPropertyGridComponentProps {
     globalState: GlobalState;
@@ -108,6 +109,45 @@ export class ParticleSystemPropertyGridComponent extends React.Component<IPartic
         });
     }
 
+    renderControls() {
+        const system = this.props.system;
+
+        if (system instanceof GPUParticleSystem) {
+            let isStarted = system.isStarted() && !system.isStopped();
+            return (
+                <ButtonLineComponent label={isStarted ? "Pause" : "Start"} onClick={() => {
+                    if (isStarted) {
+                        system.stop();
+                    } else {
+                        system.start();
+                    }
+                    this.forceUpdate();
+                }} />
+            );
+        }
+
+        let isStarted = system.isStarted();
+        return (
+            <>
+                {
+                    !system.isStopping() && 
+                    <ButtonLineComponent label={isStarted ? "Stop" : "Start"} onClick={() => {
+                        if (isStarted) {
+                            system.stop();
+                        } else {
+                            system.start();
+                        }
+                        this.forceUpdate();
+                    }} />
+                }
+                {
+                    system.isStopping() && 
+                    <TextLineComponent label="System is stoppping..." ignoreValue={true}/>
+                }
+            </>
+        )
+    }
+
     render() {
         const system = this.props.system;
 
@@ -143,6 +183,11 @@ export class ParticleSystemPropertyGridComponent extends React.Component<IPartic
             return {label: v.name, value: i + 1}
         }));
 
+        let isStarted = system.isStarted();
+        if (system instanceof GPUParticleSystem) {
+            isStarted = !system.isStopped();
+        }
+
         return (
             <div className="pane">
                 <CustomPropertyGridComponent globalState={this.props.globalState} target={system}
@@ -152,6 +197,7 @@ export class ParticleSystemPropertyGridComponent extends React.Component<IPartic
                     <TextLineComponent label="ID" value={system.id} />
                     <TextLineComponent label="Class" value={system.getClassName()} />  
                     <TextLineComponent label="Capacity" value={system.getCapacity().toString()} />  
+                    <TextLineComponent label="Capacity" value={system.getActiveCount().toString()} />  
                     <TextureLinkLineComponent label="Texture" texture={system.particleTexture} onSelectionChangedObservable={this.props.onSelectionChangedObservable}/>
                     <OptionsLineComponent label="Blend mode" options={blendModeOptions} target={system} propertyName="blendMode" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <Vector3LineComponent label="Gravity" target={system} propertyName="gravity"
@@ -161,12 +207,10 @@ export class ParticleSystemPropertyGridComponent extends React.Component<IPartic
                     <SliderLineComponent label="Update speed" target={system} propertyName="updateSpeed" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 </LineContainerComponent>                      
                 <LineContainerComponent globalState={this.props.globalState} title="OPTIONS">
-                    <ButtonLineComponent label={system.isStarted() ? "Stop" : "Start"} onClick={() => {
-                        if (system.isStarted()) {
-                            system.stop();
-                        } else {
-                            system.start();
-                        }
+                    {this.renderControls()}
+                    <ButtonLineComponent label={"Dispose"} onClick={() => {
+                        this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
+                        system.dispose();
                     }} />
                 </LineContainerComponent>
                 <LineContainerComponent globalState={this.props.globalState} title="EMITTER">

inspector/src/components/sceneExplorer/sceneExplorerComponent.tsx

@@ -322,9 +322,10 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
         // Particle systems
         let particleSystemsContextMenus: { label: string, action: () => void }[] = [];
         particleSystemsContextMenus.push({
-            label: "Add new particle system",
+            label: "Add new CPU particle system",
             action: () => {
-                let newSystem = ParticleHelper.CreateDefault(Vector3.Zero(), 1000, scene);
+                let newSystem = ParticleHelper.CreateDefault(Vector3.Zero(), 10000, scene);
+                newSystem.name = "CPU particle system";
                 newSystem.start();
                 this.props.globalState.onSelectionChangedObservable.notifyObservers(newSystem);
             }
@@ -334,7 +335,8 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
             particleSystemsContextMenus.push({
                 label: "Add new GPU particle system",
                 action: () => {
-                    let newSystem = ParticleHelper.CreateDefault(Vector3.Zero(), 1000, scene, true);
+                    let newSystem = ParticleHelper.CreateDefault(Vector3.Zero(), 10000, scene, true);
+                    newSystem.name = "GPU particle system";
                     newSystem.start();
                     this.props.globalState.onSelectionChangedObservable.notifyObservers(newSystem);
                 }

src/Particles/IParticleSystem.ts

@@ -254,6 +254,12 @@ export interface IParticleSystem {
     getCapacity(): number;
 
     /**
+     * Gets the number of particles active at the same time.
+     * @returns The number of active particles.
+     */
+    getActiveCount(): number;
+
+    /**
      * Gets if the system has been started. (Note: this will still be true after stop is called)
      * @returns True if it has been started, otherwise false.
      */
@@ -307,6 +313,12 @@ export interface IParticleSystem {
     reset(): void;
 
     /**
+     * Gets a boolean indicating that the system is stopping
+     * @returns true if the system is currently stopping
+     */
+    isStopping(): boolean;
+
+    /**
      * Is this system ready to be used/rendered
      * @return true if the system is ready
      */

src/Particles/baseParticleSystem.ts

@@ -48,6 +48,11 @@ export class BaseParticleSystem {
     public animations: Animation[] = [];
 
     /**
+     * Gets or sets the unique id of the particle system
+     */
+    public uniqueId: number;
+
+    /**
      * The id of the Particle system.
      */
     public id: string;

src/Particles/gpuParticleSystem.ts

@@ -158,6 +158,30 @@ export class GPUParticleSystem extends BaseParticleSystem implements IDisposable
     }
 
     /**
+     * Gets if the system has been stopped. (Note: rendering is still happening but the system is frozen)
+     * @returns True if it has been stopped, otherwise false.
+     */
+    public isStopped(): boolean {
+        return this._stopped;
+    }
+
+    /**
+     * Gets a boolean indicating that the system is stopping
+     * @returns true if the system is currently stopping
+     */
+    public isStopping() {
+        return false; // Stop is immediate on GPU
+    }
+
+    /**
+     * Gets the number of particles active at the same time.
+     * @returns The number of active particles.
+     */
+    public getActiveCount() {
+        return this._currentActiveCount;
+    }
+
+    /**
      * Starts the particle system and begins to emit
      * @param delay defines the delay in milliseconds before starting the system (this.startDelay by default)
      */
@@ -635,6 +659,9 @@ export class GPUParticleSystem extends BaseParticleSystem implements IDisposable
     }>, scene: Scene, isAnimationSheetEnabled: boolean = false) {
         super(name);
         this._scene = scene || EngineStore.LastCreatedScene;
+
+        this.uniqueId = this._scene.getUniqueId();
+
         // Setup the default processing configuration to the scene.
         this._attachImageProcessingConfiguration(null);
 

src/Particles/particleSystem.ts

@@ -190,6 +190,14 @@ export class ParticleSystem extends BaseParticleSystem implements IDisposable, I
     }
 
     /**
+     * Gets the number of particles active at the same time.
+     * @returns The number of active particles.
+     */
+    public getActiveCount() {
+        return this._particles.length;
+    }
+
+    /**
      * Returns the string "ParticleSystem"
      * @returns a string containing the class name
      */
@@ -198,6 +206,14 @@ export class ParticleSystem extends BaseParticleSystem implements IDisposable, I
     }
 
     /**
+     * Gets a boolean indicating that the system is stopping
+     * @returns true if the system is currently stopping
+     */
+    public isStopping() {
+        return this._stopped && this.isAlive();
+    }
+
+    /**
      * Instantiates a particle system.
      * 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.
      * @param name The name of the particle system
@@ -217,6 +233,8 @@ export class ParticleSystem extends BaseParticleSystem implements IDisposable, I
 
         this._scene = scene || EngineStore.LastCreatedScene;
 
+        this.uniqueId = this._scene.getUniqueId();
+
         // Setup the default processing configuration to the scene.
         this._attachImageProcessingConfiguration(null);