Merge pull request #7880 from BabylonJS/master

Nightly

Playground/css/index.css

@@ -221,32 +221,6 @@ body {
     background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==");
 }
 
-.pbt-fade {
-    opacity: 0.5
-}
-
-.pbt-darken {
-    opacity: 1
-}
-
-.pbt-back-highlight {
-    background-color: #CDC8F9;
-}
-
-.pbt-margin-decor-on {
-    background-color: #364249;
-    width: 5px;
-}
-
-.pbt-back-highlight-dark {
-    background-color: #364249;
-}
-
-.pbt-margin-decor-on-dark {
-    background-color: #CDC8F9;
-    width: 5px;
-}
-
 #exampleList {
     z-index: 10;
     display: none;

Playground/debug.html

@@ -488,7 +488,6 @@
 
         <!-- Main scripts -->
         <script src="/js/config_versions.js"></script>
-        <script src="/js/pbt.js"></script>
         <script src="/js/examples.js"></script>
         <script src="/js/main.js"></script>
         <script src="/js/menuPG.js"></script>

Playground/index-local.html

@@ -415,7 +415,6 @@
 
         <!-- Main scripts -->
         <script src="js/config_versions.js"></script>
-        <script src="js/pbt.js"></script>
         <script src="js/examples.js"></script>
         <script src="js/main.js"></script>
         <script src="js/menuPG.js"></script>

Playground/index.html

@@ -441,7 +441,6 @@
 
         <!-- Main scripts -->
         <script src="/js/config_versions.js"></script>
-        <script src="/js/pbt.js"></script>
         <script src="/js/examples.js"></script>
         <script src="/js/main.js"></script>
         <script src="/js/menuPG.js"></script>

Playground/indexStable.html

@@ -416,7 +416,6 @@
 
         <!-- Main scripts -->
         <script src="/js/config_versions.js"></script>
-        <script src="/js/pbt.js"></script>
         <script src="/js/examples.js"></script>
         <script src="/js/main.js"></script>
         <script src="/js/menuPG.js"></script>

Playground/indexWebGPU.html

@@ -409,7 +409,6 @@
 
         <!-- Main scripts -->
         <script src="/js/config_versions.js"></script>
-        <script src="/js/pbt.js"></script>
         <script src="/js/libs/typescript.js"></script>
         <script src="/js/examples.js"></script>
         <!-- <script src="/js/main.js"></script> -->

Playground/js/pbt.js

@@ -1,524 +0,0 @@
-// jsEditor Manipulation
-var PBT = function() {    
-    this.decorationStyles = new Array();
-    this.decorations = new Array();
-    this.lineRanges = new Array();
-    var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
-    var background = "pbt-back-highlight";
-    var margin = "pbt-margin-decor-on";
-    if(localStorage.getItem("bjs-playground-theme") =="dark") {
-        background += "-dark";
-        margin +="-dark";
-    }
-    this.clearDecorLines = function() {
-        this.decorations = jsEditor.deltaDecorations(this.decorations, []);
-    }
-
-    this.setDecorLines = function (lineRanges) {    
-        this.decorationStyles = [];
-
-    var endLineNm = jsEditor.getModel()._lines.length;
-        this.decorationStyles.push({ range: new monaco.Range(1,1,endLineNm,1), options: { isWholeLine: true, inlineClassName: 'pbt-fade' }});
-        
-        for(var i = 0; i < lineRanges.length; i +=2) {          
-            this.decorationStyles.push({ range: new monaco.Range(lineRanges[i],1,lineRanges[i + 1],1), options: { isWholeLine: true, linesDecorationsClassName: margin }});
-            this.decorationStyles.push({ range: new monaco.Range(lineRanges[i],1,lineRanges[i + 1],1), options: { isWholeLine: true, className: background }});
-            this.decorationStyles.push({ range: new monaco.Range(lineRanges[i],1,lineRanges[i + 1],1), options: { isWholeLine: true, inlineClassName: 'pbt-darken' }});
-        }
-
-    this.decorations = jsEditor.deltaDecorations([this.decorations], this.decorationStyles);  
-    }
-
-    this.replaceLines = function(lineRange, text) {   
-        jsEditor.executeEdits("", [
-            { range: new monaco.Range(lineRange[0], 1, lineRange[1], 100000), text: text}
-       ]);
-    }
-
-    this.replaceText = function(line, start, end, text) {   
-        jsEditor.executeEdits("", [
-            { range: new monaco.Range(line, start, line, end), text: text}
-       ]);
-    }
-
-    this.getLineText = function(lineNm) {
-        return jsEditor.getModel().getLineContent(lineNm);
-    }
-
-    this.hideLines = function(lineRanges) {
-        var ranges = [];
-        this.lineRanges = lineRanges;
-        for(var i = 0; i < lineRanges.length; i +=2) {
-            ranges.push(new monaco.Range(lineRanges[i], 1, lineRanges[i + 1], 100000));                
-        }
-        jsEditor.setHiddenAreas(ranges);
-    }
-
-    this.hideRange = function(lineRanges) {       
-        var ranges = [];
-        lineRanges = this.lineRanges.concat(lineRanges);
-        this.lineRanges = lineRanges;
-        for(var i = 0; i < lineRanges.length; i +=2) {
-            ranges.push(new monaco.Range(lineRanges[i], 1, lineRanges[i + 1], 100000));                
-        }
-        jsEditor.setHiddenAreas(ranges);
-    }
-
-    this.showRange = function(lineRanges) {
-        var rangePairs = [];
-        var linePairs = [];       
-        for(var i = 0; i < this.lineRanges.length; i +=2) {
-            rangePairs.push(this.lineRanges[i] + "=" + this.lineRanges[i + 1]);                
-        }        
-        for(var i = 0; i < lineRanges.length; i +=2) {
-            linePairs.push(lineRanges[i] + "=" + lineRanges[i + 1]);                
-        }       
-        var rangeString = rangePairs.join("-");         
-        for(var i = 0; i < linePairs.length; i++) {           
-            rangeString = rangeString.replace(linePairs[i]+"-", "");
-            rangeString = rangeString.replace("-" + linePairs[i], ""); //when last element
-        }        
-        rangeString = rangeString.replace(/-/g, ",");       
-        rangeString = rangeString.replace(/=/g, ",");       
-        lineRanges = rangeString.split(",");      
-        lineRanges = lineRanges.map(function(n){
-            return parseInt(n);
-        });       
-        var ranges = [];
-        for(var i = 0; i < lineRanges.length; i +=2) {
-            ranges.push(new monaco.Range(lineRanges[i], 1, lineRanges[i + 1], 100000));                
-        }
-        this.lineRanges = lineRanges;        
-        jsEditor.setHiddenAreas(ranges);
-    }
-
-    this.editOn = function() {
-        jsEditor.updateOptions({readOnly: false});
-    }
-
-    this.editOff = function() {
-        jsEditor.updateOptions({readOnly: true});
-    }
-
-    //hide menu items
-    this.hideMenu = function() {
-        var headings = document.getElementsByClassName('category');
-        
-        for (var i = 0; i < headings.length; i ++) {
-            headings[i].style.visibility = 'hidden';
-        }
-    
-        headings = document.getElementsByClassName('category right');
-        
-        for (var i = 0; i < headings.length; i ++) {
-            headings[i].style.visibility = 'visible';
-        }
-    }
-
-    //Standard GUI Dialogues
-    this.StandardDialog = function(options) {   
-        options = options||{};
-        var width = options.width||0.5;
-        var height = options.height||0.25;
-        var top = options.top||0;
-        var left = options.left||0;
-        var verticalAlignment = options.verticalAlignment||BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
-        var horizontalAlignment = options.horizontalAlignment||BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
-        var text = options.text||"Playground Based Tutorial";   
-        if(options.useImage === undefined) {
-            var useImage = true;
-        }
-        else {
-            var useImage = false;
-        }
-        var imageURL = options.imageURL||"LogoPBT.png";
-        var textBlockWidth = 0.95;
-        var textBlockLeft = "2%";
-        this.container = new BABYLON.GUI.Rectangle();
-        this.container.verticalAlignment = verticalAlignment;
-        this.container.horizontalAlignment = horizontalAlignment;
-        this.container.width = width;
-        this.container.height = height;
-        this.container.cornerRadius = 10;
-        this.container.color = "#364249";
-        this.container.thickness = 4;
-        this.container.background = "#CDC8F9";
-        this.container.top = top;
-        this.container.left = left;   
-        advancedTexture.addControl(this.container); 
-        if(useImage) {
-            this.logoPBT = BABYLON.GUI.Button.CreateImageOnlyButton("but", imageURL);
-            this.logoPBT.width = "100px";
-            this.logoPBT.height = "100px";
-            this.logoPBT.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
-            this.logoPBT.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
-            this.logoPBT.top = 2;
-            this.logoPBT.left=2;
-            this.logoPBT.color = "#CDC8F9";
-            this.container.addControl(this.logoPBT);
-            textBlockWidth = 0.6;
-            textBlockLeft = "35%";
-        }
-        this.textBlock = new BABYLON.GUI.TextBlock("text", text);
-        this.textBlock.width = textBlockWidth;
-        this.textBlock.height = 0.7
-        this.textBlock.textWrapping = true;
-        this.textBlock.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
-        this.textBlock.color = "#364249";
-        this.textBlock.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
-        this.textBlock.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
-        this.textBlock.left = textBlockLeft;
-        this.textBlock.top = 2;
-        this.container.addControl(this.textBlock);
-
-        this.nextButton = BABYLON.GUI.Button.CreateSimpleButton("nextbut", "Next >");
-        this.nextButton.width = 0.2
-        this.nextButton.height = 0.15;
-        this.nextButton.color = "white";
-        this.nextButton.cornerRadius = 5;
-        this.nextButton.background = "#364249";
-        this.nextButton.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
-        this.nextButton.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
-        this.nextButton.left = "78%";
-        this.nextButton.top = "80%";
-        this.container.addControl(this.nextButton);
-
-        this.prevButton = BABYLON.GUI.Button.CreateSimpleButton("prevbut", "< Prev");
-        this.prevButton.width = 0.2
-        this.prevButton.height = 0.15;
-        this.prevButton.color = "white";
-        this.prevButton.cornerRadius = 5;
-        this.prevButton.background = "#364249";
-        this.prevButton.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
-        this.prevButton.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
-        this.prevButton.left = "2%";
-        this.prevButton.top = "80%";
-        this.container.addControl(this.prevButton); 
-
-        this.showNext = function() {
-            this.nextButton.isVisible = true;
-        }
-
-        this.hideNext = function() {
-            this.nextButton.isVisible = false;
-        }
-
-        this.getNextButton = function() {
-            return this.nextButton;
-        }
-
-        this.getPrevButton = function() {
-            return this.prevButton;
-        }
-
-        this.showPrev = function() {
-            this.prevButton.isVisible = true;
-        }
-
-        this.hidePrev = function() {
-            this.prevButton.isVisible = false;
-        }
-
-        this.setWidth = function(width) {
-            this.container.width = width;
-        }
-
-        this.setHeight = function(height) {
-            this.container.height = height;
-        }
-
-        this.setTop = function(top) {
-            this.container.top = top;
-        }
-
-        this.setLeft = function(left) {
-            this.container.left = left;
-        }
-
-        this.getWidth = function() {
-            return this.container.width;
-        }
-
-        this.getHeight = function() {
-            return this.container.height;
-        }
-
-        this.getTop = function() {
-            return this.container.top;
-        }
-
-        this.getLeft = function() {
-            return this.container.left;
-        }
-
-        this.setHorizontalAlignment = function(hrzAlgn) {
-            this.container.horizontalAlignment = hrzAlgn;
-        }
-
-        this.setVerticalAlignment = function(vrtAlign) {
-            this.container.VerticalAlignmenv = vrtAlign;
-        }
-
-        this.setText = function(text) {
-            this.textBlock.text = text;
-        }
-
-        this.show = function() {
-            this.container.isVisible = true;
-        }
-
-        this.hide = function() {
-            this.container.isVisible = false;
-        }
-
-        return this;
-    }
-
-//Radio and Checkbox Button GUI
-    this.ButtonGroup = function(name, type) {
-        this.name = name;
-        var type = type||"C"; 
-        type = type.substr(0,1).toUpperCase();
-        if(type !="R") {
-            if(type != "S") {
-                if(type != "C") {
-                    type = "C";
-                }
-            }
-        }
-        this.type = type;   
-        this.buttons = new Array();
-        
-        this.addButton = function(text, func, checked) {
-            this.buttons.push({
-                text: text||"", 
-                func: func||function(){}, 
-                checked: checked||false
-            });
-        }
-
-        this.addSlider = function(text, func, unit, onVal, min, max, value) {        
-            this.buttons.push({
-                text: text||"",                
-                func: func||function(){},
-                unit: unit||"", 
-                onVal: onVal||function(){},
-                min: min||0,
-                max: max||10,
-                value: value||0
-            });
-        }
-        return this;
-    }
-
-    this.SelectionDialog = function(options) {
-        options = options||{};
-        var justStarted = true;
-        var width = options.width||0.3;
-        var top = options.top||0;
-        var left = options.left||0;  
-        var verticalAlignment = options.verticalAlignment||BABYLON.GUI.Control.VERTICAL_ALIGNMENT_BOTTOM;
-        var horizontalAlignment = options.horizontalAlignment||BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;    
-        var groups = options.groups; 
-        this.container = new BABYLON.GUI.Rectangle();
-        this.container.verticalAlignment = verticalAlignment;
-        this.container.horizontalAlignment = horizontalAlignment;   
-        var height = 36 * groups.length;
-        for(var i = 0; i < groups.length; i++) {
-            height += 32 * groups[i].buttons.length;
-            if(groups[i].type == "S") {
-                height += 31 * groups[i].buttons.length;
-            }
-        }
-        this.container.height = height + "px";
-        this.container.cornerRadius = 10;
-        this.container.color = "#364249";
-        this.container.thickness = 4;
-        this.container.background = "#CDC8F9";
-        this.container.top = top;
-        this.container.left = left;
-        this.container.width = width;
-        advancedTexture.addControl(this.container);
-        
-        var panel = new BABYLON.GUI.StackPanel(); 
-        panel.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
-        panel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
-        panel.top = 5;
-        panel.left = 5;
-        this.container.addControl(panel);
-
-        var addRadio = function(text, parent, group, func, checked) {
-            checked = checked || false;
-            var button = new BABYLON.GUI.RadioButton();
-            button.width = "20px";
-            button.height = "20px";
-            button.color = "#364249";
-            button.background = "white"; 
-            button.group = group;
-            button.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
-            button.justStarted = true;
-            button.func = func;
-
-            button.onIsCheckedChangedObservable.add(function(state) {                       		
-                if (state && !justStarted) {                  
-                    func();
-                }
-            }); 
-
-            var header = BABYLON.GUI.Control.AddHeader(button, text, "200px", { isHorizontal: true, controlFirst: true });
-            header.height = "30px";
-            header.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
-            header.left = "4px";
-
-            parent.addControl(header);    
-            button.isChecked = checked; 
-        }
-
-        var addCheckbox = function(text, parent, func, checked) {
-            checked = checked || false;
-            var button = new BABYLON.GUI.Checkbox();
-            button.width = "20px";
-            button.height = "20px";
-            button.color = "#364249";
-            button.background = "white"; 
-            button.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
-            
-            button.onIsCheckedChangedObservable.add(function(state) {	
-                func();	
-            }); 
-            
-            var header = BABYLON.GUI.Control.AddHeader(button, text, "200px", { isHorizontal: true, controlFirst: true });
-            header.height = "30px";
-            header.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
-            header.left = "4px";
-            
-            parent.addControl(header);    
-            button.isChecked = checked;
-        }
-
-        var addSldr = function(text, parent, func, unit, onValueChange, min, max, value) {         
-            var button = new BABYLON.GUI.Slider();  
-            button.value = value;
-            button.minimum = min;
-            button.maximum = max;
-            button.width = "200px";
-            button.height = "20px";
-            button.color = "#364249";
-            button.background = "white"; 
-            button.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
-            button.left = "4px";
-
-            var header = new BABYLON.GUI.TextBlock();
-            header.text = text+": " + value + " " + unit;
-            header.height = "30px";
-            header.color = "#364249";
-            header.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
-            header.left = "4px";
-            parent.addControl(header);  
-
-            button.onValueChangedObservable.add(function(value) {
-                header.text = text + onValueChange(value) + " " + unit;
-                func(value);
-            });
-            parent.addControl(button);
-        }
-
-        var groupHeader = function(name) {
-            var groupHeading = new BABYLON.GUI.TextBlock("groupHead", name);
-            groupHeading.width = 0.9;
-            groupHeading.height = "30px";
-            groupHeading.textWrapping = true;
-            groupHeading.color = "black";
-            groupHeading.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
-            groupHeading.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
-            groupHeading.left = "2px";
-            panel.addControl(groupHeading);
-        }
-
-        var addSpacer = function(name) {
-            var separator = new BABYLON.GUI.Rectangle();
-            separator.width = 1;
-            separator.height = "2px";
-            separator.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
-            separator.background = "#364249";
-            separator.color = "#364249";
-            panel.addControl(separator);
-            
-            groupHeader(name);
-        }
-
-        this.addGroup = function(group) {
-            if(group.type == "R") {
-                for(var i = 0; i < group.buttons.length; i++) {
-                    addRadio(group.buttons[i].text, panel, group.name, group.buttons[i].func, group.buttons[i].checked);
-                }
-            }
-            else if(group.type == "S") {
-                for(var i = 0; i < group.buttons.length; i++) {
-                    addSldr(group.buttons[i].text, panel, group.buttons[i].func, group.buttons[i].unit, group.buttons[i].onVal, group.buttons[i].min, group.buttons[i].max, group.buttons[i].value);
-                }
-            }
-            else {
-                for(var i = 0; i < group.buttons.length; i++) {
-                    addCheckbox(group.buttons[i].text, panel, group.buttons[i].func, group.buttons[i].checked);
-                }
-            }
-            
-            
-        }
-        
-        groupHeader(groups[0].name);
-        this.addGroup(groups[0]);
-        for(var i = 1; i < groups.length; i++) {
-            addSpacer(groups[i].name);
-            this.addGroup(groups[i]);
-        }
-
-        justStarted = false;
-
-        this.setWidth = function(width) {
-            this.container.width = width;
-        }
-
-        this.setTop = function(top) {
-            this.container.top = top;
-        }
-
-        this.setLeft = function(left) {
-            this.container.left = left;
-        }
-
-        this.getWidth = function() {
-            return this.container.width;
-        }
-
-        this.getTop = function() {
-            return this.container.top;
-        }
-
-        this.getLeft = function() {
-            return this.container.left;
-        }
-
-        this.setHorizontalAlignment = function(hrzAlgn) {
-            this.container.horizontalAlignment = hrzAlgn;
-        }
-
-        this.setVerticalAlignment = function(vrtAlign) {
-            this.container.VerticalAlignmenv = vrtAlign;
-        }
-
-        this.show = function() {
-            this.container.isVisible = true;
-        }
-
-        this.hide = function() {
-            this.container.isVisible = false;
-        }
-
-    return this;
-
-    }
-}
-
-    

dist/preview release/babylon.d.ts

@@ -63900,6 +63900,28 @@ declare module BABYLON {
     }
 }
 declare module BABYLON {
+    /**
+     * Represents a set of particle systems working together to create a specific effect
+     */
+    export class ParticleSystemDebugger implements IDisposable {
+        /**
+         * Defines the particle system to debug
+         */
+        system: IParticleSystem;
+        /**
+         * Creates a new particle system debugger
+         * @param system defines the particle system to debug
+         */
+        constructor(
+        /**
+         * Defines the particle system to debug
+         */
+        system: IParticleSystem);
+        /** Clear all the resources */
+        dispose(): void;
+    }
+}
+declare module BABYLON {
         interface Scene {
             /** @hidden (Backing field) */
             _physicsEngine: Nullable<IPhysicsEngine>;

dist/preview release/babylon.module.d.ts

@@ -67145,6 +67145,30 @@ declare module "babylonjs/Particles/cloudPoint" {
         constructor(id: number, posFunction: Nullable<(particle: CloudPoint, i?: number, s?: number) => void>);
     }
 }
+declare module "babylonjs/Particles/particleSystemDebugger" {
+    import { IDisposable } from "babylonjs/scene";
+    import { IParticleSystem } from "babylonjs/Particles/IParticleSystem";
+    /**
+     * Represents a set of particle systems working together to create a specific effect
+     */
+    export class ParticleSystemDebugger implements IDisposable {
+        /**
+         * Defines the particle system to debug
+         */
+        system: IParticleSystem;
+        /**
+         * Creates a new particle system debugger
+         * @param system defines the particle system to debug
+         */
+        constructor(
+        /**
+         * Defines the particle system to debug
+         */
+        system: IParticleSystem);
+        /** Clear all the resources */
+        dispose(): void;
+    }
+}
 declare module "babylonjs/Particles/index" {
     export * from "babylonjs/Particles/baseParticleSystem";
     export * from "babylonjs/Particles/EmitterTypes/index";
@@ -67160,6 +67184,7 @@ declare module "babylonjs/Particles/index" {
     export * from "babylonjs/Particles/cloudPoint";
     export * from "babylonjs/Particles/pointsCloudSystem";
     export * from "babylonjs/Particles/subEmitter";
+    export * from "babylonjs/Particles/particleSystemDebugger";
 }
 declare module "babylonjs/Physics/physicsEngineComponent" {
     import { Nullable } from "babylonjs/types";
@@ -137992,6 +138017,28 @@ declare module BABYLON {
     }
 }
 declare module BABYLON {
+    /**
+     * Represents a set of particle systems working together to create a specific effect
+     */
+    export class ParticleSystemDebugger implements IDisposable {
+        /**
+         * Defines the particle system to debug
+         */
+        system: IParticleSystem;
+        /**
+         * Creates a new particle system debugger
+         * @param system defines the particle system to debug
+         */
+        constructor(
+        /**
+         * Defines the particle system to debug
+         */
+        system: IParticleSystem);
+        /** Clear all the resources */
+        dispose(): void;
+    }
+}
+declare module BABYLON {
         interface Scene {
             /** @hidden (Backing field) */
             _physicsEngine: Nullable<IPhysicsEngine>;

dist/preview release/documentation.d.ts

@@ -63900,6 +63900,28 @@ declare module BABYLON {
     }
 }
 declare module BABYLON {
+    /**
+     * Represents a set of particle systems working together to create a specific effect
+     */
+    export class ParticleSystemDebugger implements IDisposable {
+        /**
+         * Defines the particle system to debug
+         */
+        system: IParticleSystem;
+        /**
+         * Creates a new particle system debugger
+         * @param system defines the particle system to debug
+         */
+        constructor(
+        /**
+         * Defines the particle system to debug
+         */
+        system: IParticleSystem);
+        /** Clear all the resources */
+        dispose(): void;
+    }
+}
+declare module BABYLON {
         interface Scene {
             /** @hidden (Backing field) */
             _physicsEngine: Nullable<IPhysicsEngine>;

dist/preview release/inspector/babylon.inspector.d.ts

@@ -1540,6 +1540,7 @@ declare module INSPECTOR {
         buttonLabel: string;
         url?: string;
         onClick: () => void;
+        onIconClick?: () => void;
     }
     export class LinkButtonComponent extends React.Component<ILinkButtonComponentProps> {
         constructor(props: ILinkButtonComponentProps);

dist/preview release/inspector/babylon.inspector.module.d.ts

@@ -1999,6 +1999,7 @@ declare module "babylonjs-inspector/components/actionTabs/lines/linkButtonCompon
         buttonLabel: string;
         url?: string;
         onClick: () => void;
+        onIconClick?: () => void;
     }
     export class LinkButtonComponent extends React.Component<ILinkButtonComponentProps> {
         constructor(props: ILinkButtonComponentProps);
@@ -4271,6 +4272,7 @@ declare module INSPECTOR {
         buttonLabel: string;
         url?: string;
         onClick: () => void;
+        onIconClick?: () => void;
     }
     export class LinkButtonComponent extends React.Component<ILinkButtonComponentProps> {
         constructor(props: ILinkButtonComponentProps);

dist/preview release/viewer/babylon.module.d.ts

@@ -67145,6 +67145,30 @@ declare module "babylonjs/Particles/cloudPoint" {
         constructor(id: number, posFunction: Nullable<(particle: CloudPoint, i?: number, s?: number) => void>);
     }
 }
+declare module "babylonjs/Particles/particleSystemDebugger" {
+    import { IDisposable } from "babylonjs/scene";
+    import { IParticleSystem } from "babylonjs/Particles/IParticleSystem";
+    /**
+     * Represents a set of particle systems working together to create a specific effect
+     */
+    export class ParticleSystemDebugger implements IDisposable {
+        /**
+         * Defines the particle system to debug
+         */
+        system: IParticleSystem;
+        /**
+         * Creates a new particle system debugger
+         * @param system defines the particle system to debug
+         */
+        constructor(
+        /**
+         * Defines the particle system to debug
+         */
+        system: IParticleSystem);
+        /** Clear all the resources */
+        dispose(): void;
+    }
+}
 declare module "babylonjs/Particles/index" {
     export * from "babylonjs/Particles/baseParticleSystem";
     export * from "babylonjs/Particles/EmitterTypes/index";
@@ -67160,6 +67184,7 @@ declare module "babylonjs/Particles/index" {
     export * from "babylonjs/Particles/cloudPoint";
     export * from "babylonjs/Particles/pointsCloudSystem";
     export * from "babylonjs/Particles/subEmitter";
+    export * from "babylonjs/Particles/particleSystemDebugger";
 }
 declare module "babylonjs/Physics/physicsEngineComponent" {
     import { Nullable } from "babylonjs/types";
@@ -137992,6 +138017,28 @@ declare module BABYLON {
     }
 }
 declare module BABYLON {
+    /**
+     * Represents a set of particle systems working together to create a specific effect
+     */
+    export class ParticleSystemDebugger implements IDisposable {
+        /**
+         * Defines the particle system to debug
+         */
+        system: IParticleSystem;
+        /**
+         * Creates a new particle system debugger
+         * @param system defines the particle system to debug
+         */
+        constructor(
+        /**
+         * Defines the particle system to debug
+         */
+        system: IParticleSystem);
+        /** Clear all the resources */
+        dispose(): void;
+    }
+}
+declare module BABYLON {
         interface Scene {
             /** @hidden (Backing field) */
             _physicsEngine: Nullable<IPhysicsEngine>;

inspector/src/components/actionTabs/actionTabs.scss

@@ -217,7 +217,7 @@ $line-padding-left: 2px;
                     padding-left: $line-padding-left;
                     height: 30px;
                     display: grid;
-                    grid-template-columns: 1fr auto;
+                    grid-template-columns: 1fr auto 20px;
 
                     .link {
                         grid-column: 1;
@@ -253,6 +253,12 @@ $line-padding-left: 2px;
                             outline: 0px;
                         } 
                     }
+
+                    .link-icon{
+                        grid-column: 3;
+                        display: grid;
+                        align-content: center;
+                    }
                 }
 
                 .textLine {

inspector/src/components/actionTabs/lines/linkButtonComponent.tsx

@@ -1,10 +1,14 @@
 import * as React from "react";
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 interface ILinkButtonComponentProps {
     label: string;
     buttonLabel: string;
     url?: string;
     onClick: () => void;
+    icon?: IconProp;
+    onIconClick?: () => void;
 }
 
 export class LinkButtonComponent extends React.Component<ILinkButtonComponentProps> {
@@ -27,6 +31,16 @@ export class LinkButtonComponent extends React.Component<ILinkButtonComponentPro
                 <div className="link-button">
                     <button onClick={() => this.props.onClick()}>{this.props.buttonLabel}</button>
                 </div> 
+                {
+                    this.props.icon &&
+                    <div className="link-icon hoverIcon" onClick={() => {
+                        if (this.props.onIconClick) {
+                            this.props.onIconClick();
+                        }
+                    }}>
+                        <FontAwesomeIcon icon={this.props.icon} />
+                    </div> 
+                }
             </div>
         );
     }

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

@@ -127,7 +127,7 @@ export class ColorGradientStepGridComponent extends React.Component<IColorGradie
                         onPointerUp={evt => this.onPointerUp()}
                         onChange={evt => this.updateGradient(parseFloat(evt.target.value))} />
                 </div>
-                <div className="gradient-delete" onClick={() => this.props.onDelete()}>
+                <div className="gradient-delete hoverIcon" onClick={() => this.props.onDelete()}>
                     <FontAwesomeIcon icon={faTrash} />
                 </div>
             </div>

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

@@ -107,7 +107,7 @@ export class FactorGradientStepGridComponent extends React.Component<IFactorGrad
                         onPointerUp={evt => this.onPointerUp()}
                         onChange={evt => this.updateGradient(parseFloat(evt.target.value))} />
                 </div>
-                <div className="gradient-delete" onClick={() => this.props.onDelete()}>
+                <div className="gradient-delete hoverIcon" onClick={() => this.props.onDelete()}>
                     <FontAwesomeIcon icon={faTrash} />
                 </div>
             </div>

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

@@ -491,8 +491,13 @@ export class ParticleSystemPropertyGridComponent extends React.Component<IPartic
                         lockObject={this.props.lockObject}/>
                 </LineContainerComponent>                  
                 <LineContainerComponent globalState={this.props.globalState} title="SIZE">
-                    <FloatLineComponent lockObject={this.props.lockObject} label="Min size" target={system} propertyName="minSize" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                    <FloatLineComponent lockObject={this.props.lockObject} label="Max size" target={system} propertyName="maxSize" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    {
+                        (!system.getSizeGradients() || system.getSizeGradients()?.length === 0)&& 
+                        <>
+                            <FloatLineComponent lockObject={this.props.lockObject} label="Min size" target={system} propertyName="minSize" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                            <FloatLineComponent lockObject={this.props.lockObject} label="Max size" target={system} propertyName="maxSize" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                        </>
+                    }
                     <FloatLineComponent lockObject={this.props.lockObject} label="Min scale X" target={system} propertyName="minScaleX" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <FloatLineComponent lockObject={this.props.lockObject} label="Max scale X" target={system} propertyName="maxScaleX" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <FloatLineComponent lockObject={this.props.lockObject} label="Min scale Y" target={system} propertyName="minScaleY" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
@@ -552,12 +557,17 @@ export class ParticleSystemPropertyGridComponent extends React.Component<IPartic
                     }                    
                 </LineContainerComponent>    
                 <LineContainerComponent globalState={this.props.globalState} title="COLORS">
-                    <Color4LineComponent label="Color 1" target={system} propertyName="color1" 
-                        onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                    <Color4LineComponent label="Color 2" target={system} propertyName="color2" 
-                        onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                    <Color4LineComponent label="Color dead" target={system} propertyName="colorDead" 
-                        onPropertyChangedObservable={this.props.onPropertyChangedObservable} />  
+                    {
+                        (!system.getColorGradients() || system.getColorGradients()?.length === 0) &&
+                        <>
+                            <Color4LineComponent label="Color 1" target={system} propertyName="color1" 
+                                onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                            <Color4LineComponent label="Color 2" target={system} propertyName="color2" 
+                                onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                            <Color4LineComponent label="Color dead" target={system} propertyName="colorDead" 
+                                onPropertyChangedObservable={this.props.onPropertyChangedObservable} />  
+                        </>
+                    }
                     <ValueGradientGridComponent globalState={this.props.globalState} gradients={system.getColorGradients()!} 
                         label="Color gradients"
                         docLink="https://doc.babylonjs.com/babylon101/particles#particle-colors"

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

@@ -10,6 +10,7 @@ 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 {
     Factor,
@@ -138,9 +139,23 @@ export class ValueGradientGridComponent extends React.Component<IValueGradientGr
         return (
             <div>
                 {
-                    gradients &&
+                    gradients && gradients.length > 0 &&
                     <div className="gradient-container">
                         <LinkButtonComponent label={this.props.label} url={this.props.docLink} 
+                            icon={faTrash}
+                            onIconClick={() => {
+                                gradients!.length = 0;
+                                this.forceUpdate();
+
+                                if (this.props.host instanceof GPUParticleSystem) {
+                                    this.props.host.forceRefreshGradients();
+                                }
+                    
+                                this.props.globalState.onCodeChangedObservable.notifyObservers({
+                                    object: this.props.host,
+                                    code: `TARGET.${this.props.codeRecorderPropertyName}.length = 0;`
+                                });
+                            }}
                             buttonLabel="Add new step" onClick={() => this.addNewStep()} />
                         {
                             gradients.map((g, i) => {
@@ -184,7 +199,7 @@ export class ValueGradientGridComponent extends React.Component<IValueGradientGr
                     </div>
                 }
                 {
-                    !gradients &&                    
+                    (!gradients || gradients.length === 0) &&                    
                     <ButtonLineComponent label={"Use " + this.props.label} onClick={() => {
                         this.props.onCreateRequired();
                         this.forceUpdate();

src/Particles/index.ts

@@ -11,4 +11,5 @@ export * from "./solidParticle";
 export * from "./solidParticleSystem";
 export * from "./cloudPoint";
 export * from "./pointsCloudSystem";
-export * from "./subEmitter";
+export * from "./subEmitter";
+export * from "./particleSystemDebugger";

src/Particles/particleHelper.ts

@@ -141,6 +141,7 @@ export class ParticleHelper {
                         }
                         output.snippetId = snippetId;
 
+                        resolve(output);
                     } else {
                         reject("Unable to load the snippet " + snippetId);
                     }

src/Particles/particleSystem.ts

@@ -750,7 +750,7 @@ export class ParticleSystem extends BaseParticleSystem implements IDisposable, I
      * @returns the current particle system
      */
     public removeStartSizeGradient(gradient: number): IParticleSystem {
-        this._removeFactorGradient(this._emitRateGradients, gradient);
+        this._removeFactorGradient(this._startSizeGradients, gradient);
 
         return this;
     }

src/Particles/particleSystemDebugger.ts

@@ -0,0 +1,25 @@
+import { IDisposable } from "../scene";
+import { IParticleSystem } from './IParticleSystem';
+
+/**
+ * Represents a set of particle systems working together to create a specific effect
+ */
+export class ParticleSystemDebugger implements IDisposable {
+
+    /**
+     * Creates a new particle system debugger
+     * @param system defines the particle system to debug
+     */
+    public constructor(
+        /**
+         * Defines the particle system to debug
+         */
+        public system: IParticleSystem) {
+
+    }
+
+    /** Clear all the resources */
+    public dispose() {
+
+    }
+}