Fix #4425

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

@@ -2383,10 +2383,9 @@ declare module BABYLON.GUI {
 
 declare module BABYLON.GUI {
     /**
-     * Class used to create a conainter panel deployed on the surface of a sphere
+     * Abstract class used to create a container panel deployed on the surface of a volume
      */
-    class SpherePanel extends Container3D {
-        private _radius;
+    abstract class VolumeBasedPanel extends Container3D {
         private _columns;
         private _rows;
         private _rowThenColum;
@@ -2407,10 +2406,6 @@ declare module BABYLON.GUI {
          */
         orientation: number;
         /**
-         * Gets or sets the radius of the sphere where to project controls (5 by default)
-         */
-        radius: float;
-        /**
          * Gets or sets the number of columns requested (10 by default).
          * The panel will automatically compute the number of rows based on number of child controls.
          */
@@ -2425,6 +2420,23 @@ declare module BABYLON.GUI {
          */
         constructor();
         protected _arrangeChildren(): void;
+        /** Child classes must implement this function to provide correct control positioning */
+        protected abstract _mapGridNode(control: Control3D, nodePosition: Vector3): void;
+    }
+}
+
+
+declare module BABYLON.GUI {
+    /**
+     * Class used to create a container panel deployed on the surface of a sphere
+     */
+    class SpherePanel extends VolumeBasedPanel {
+        private _radius;
+        /**
+         * Gets or sets the radius of the sphere where to project controls (5 by default)
+         */
+        radius: float;
+        protected _mapGridNode(control: Control3D, nodePosition: Vector3): void;
         private _sphericalMapping(source);
     }
 }

dist/preview release/gui/babylon.gui.js

@@ -7987,16 +7987,15 @@ var BABYLON;
     var GUI;
     (function (GUI) {
         /**
-         * Class used to create a conainter panel deployed on the surface of a sphere
+         * Abstract class used to create a container panel deployed on the surface of a volume
          */
-        var SpherePanel = /** @class */ (function (_super) {
-            __extends(SpherePanel, _super);
+        var VolumeBasedPanel = /** @class */ (function (_super) {
+            __extends(VolumeBasedPanel, _super);
             /**
              * Creates new SpherePanel
              */
-            function SpherePanel() {
+            function VolumeBasedPanel() {
                 var _this = _super.call(this) || this;
-                _this._radius = 5.0;
                 _this._columns = 10;
                 _this._rows = 0;
                 _this._rowThenColum = true;
@@ -8007,7 +8006,7 @@ var BABYLON;
                 _this.margin = 0;
                 return _this;
             }
-            Object.defineProperty(SpherePanel.prototype, "orientation", {
+            Object.defineProperty(VolumeBasedPanel.prototype, "orientation", {
                 /**
                  * Gets or sets the orientation to apply to all controls (BABYLON.Container3D.FaceOriginReversedOrientation by default)
                 * | Value | Type                                | Description |
@@ -8034,27 +8033,7 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
-            Object.defineProperty(SpherePanel.prototype, "radius", {
-                /**
-                 * Gets or sets the radius of the sphere where to project controls (5 by default)
-                 */
-                get: function () {
-                    return this._radius;
-                },
-                set: function (value) {
-                    var _this = this;
-                    if (this._radius === value) {
-                        return;
-                    }
-                    this._radius = value;
-                    BABYLON.Tools.SetImmediate(function () {
-                        _this._arrangeChildren();
-                    });
-                },
-                enumerable: true,
-                configurable: true
-            });
-            Object.defineProperty(SpherePanel.prototype, "columns", {
+            Object.defineProperty(VolumeBasedPanel.prototype, "columns", {
                 /**
                  * Gets or sets the number of columns requested (10 by default).
                  * The panel will automatically compute the number of rows based on number of child controls.
@@ -8076,7 +8055,7 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
-            Object.defineProperty(SpherePanel.prototype, "rows", {
+            Object.defineProperty(VolumeBasedPanel.prototype, "rows", {
                 /**
                  * Gets or sets a the number of rows requested.
                  * The panel will automatically compute the number of columns based on number of child controls.
@@ -8098,7 +8077,7 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
-            SpherePanel.prototype._arrangeChildren = function () {
+            VolumeBasedPanel.prototype._arrangeChildren = function () {
                 var cellWidth = 0;
                 var cellHeight = 0;
                 var rows = 0;
@@ -8162,25 +8141,74 @@ var BABYLON;
                     if (!child.mesh) {
                         continue;
                     }
-                    var newPos = this._sphericalMapping(nodeGrid[cellCounter]);
-                    switch (this._orientation) {
-                        case GUI.Container3D.FACEORIGIN_ORIENTATION:
-                            child.mesh.lookAt(new BABYLON.Vector3(-newPos.x, -newPos.y, -newPos.z));
-                            break;
-                        case GUI.Container3D.FACEORIGINREVERSED_ORIENTATION:
-                            child.mesh.lookAt(new BABYLON.Vector3(newPos.x, newPos.y, newPos.z));
-                            break;
-                        case GUI.Container3D.FACEFORWARD_ORIENTATION:
-                            child.mesh.lookAt(new BABYLON.Vector3(0, 0, 1));
-                            break;
-                        case GUI.Container3D.FACEFORWARDREVERSED_ORIENTATION:
-                            child.mesh.lookAt(new BABYLON.Vector3(0, 0, -1));
-                            break;
-                    }
-                    child.position = newPos;
+                    this._mapGridNode(child, nodeGrid[cellCounter]);
                     cellCounter++;
                 }
             };
+            return VolumeBasedPanel;
+        }(GUI.Container3D));
+        GUI.VolumeBasedPanel = VolumeBasedPanel;
+    })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
+})(BABYLON || (BABYLON = {}));
+
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
+
+var BABYLON;
+(function (BABYLON) {
+    var GUI;
+    (function (GUI) {
+        /**
+         * Class used to create a container panel deployed on the surface of a sphere
+         */
+        var SpherePanel = /** @class */ (function (_super) {
+            __extends(SpherePanel, _super);
+            function SpherePanel() {
+                var _this = _super !== null && _super.apply(this, arguments) || this;
+                _this._radius = 4.0;
+                return _this;
+            }
+            Object.defineProperty(SpherePanel.prototype, "radius", {
+                /**
+                 * Gets or sets the radius of the sphere where to project controls (5 by default)
+                 */
+                get: function () {
+                    return this._radius;
+                },
+                set: function (value) {
+                    var _this = this;
+                    if (this._radius === value) {
+                        return;
+                    }
+                    this._radius = value;
+                    BABYLON.Tools.SetImmediate(function () {
+                        _this._arrangeChildren();
+                    });
+                },
+                enumerable: true,
+                configurable: true
+            });
+            SpherePanel.prototype._mapGridNode = function (control, nodePosition) {
+                var newPos = this._sphericalMapping(nodePosition);
+                var mesh = control.mesh;
+                if (!mesh) {
+                    return;
+                }
+                switch (this.orientation) {
+                    case GUI.Container3D.FACEORIGIN_ORIENTATION:
+                        mesh.lookAt(new BABYLON.Vector3(-newPos.x, -newPos.y, -newPos.z));
+                        break;
+                    case GUI.Container3D.FACEORIGINREVERSED_ORIENTATION:
+                        mesh.lookAt(new BABYLON.Vector3(newPos.x, newPos.y, newPos.z));
+                        break;
+                    case GUI.Container3D.FACEFORWARD_ORIENTATION:
+                        mesh.lookAt(new BABYLON.Vector3(0, 0, 1));
+                        break;
+                    case GUI.Container3D.FACEFORWARDREVERSED_ORIENTATION:
+                        mesh.lookAt(new BABYLON.Vector3(0, 0, -1));
+                        break;
+                }
+                control.position = newPos;
+            };
             SpherePanel.prototype._sphericalMapping = function (source) {
                 var newPos = new BABYLON.Vector3(0, 0, this._radius);
                 var xAngle = (source.y / this._radius);
@@ -8189,7 +8217,7 @@ var BABYLON;
                 return BABYLON.Vector3.TransformNormal(newPos, BABYLON.Tmp.Matrix[0]);
             };
             return SpherePanel;
-        }(GUI.Container3D));
+        }(GUI.VolumeBasedPanel));
         GUI.SpherePanel = SpherePanel;
     })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
 })(BABYLON || (BABYLON = {}));

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

@@ -2388,10 +2388,9 @@ declare module BABYLON.GUI {
 
 declare module BABYLON.GUI {
     /**
-     * Class used to create a conainter panel deployed on the surface of a sphere
+     * Abstract class used to create a container panel deployed on the surface of a volume
      */
-    class SpherePanel extends Container3D {
-        private _radius;
+    abstract class VolumeBasedPanel extends Container3D {
         private _columns;
         private _rows;
         private _rowThenColum;
@@ -2412,10 +2411,6 @@ declare module BABYLON.GUI {
          */
         orientation: number;
         /**
-         * Gets or sets the radius of the sphere where to project controls (5 by default)
-         */
-        radius: float;
-        /**
          * Gets or sets the number of columns requested (10 by default).
          * The panel will automatically compute the number of rows based on number of child controls.
          */
@@ -2430,6 +2425,23 @@ declare module BABYLON.GUI {
          */
         constructor();
         protected _arrangeChildren(): void;
+        /** Child classes must implement this function to provide correct control positioning */
+        protected abstract _mapGridNode(control: Control3D, nodePosition: Vector3): void;
+    }
+}
+
+
+declare module BABYLON.GUI {
+    /**
+     * Class used to create a container panel deployed on the surface of a sphere
+     */
+    class SpherePanel extends VolumeBasedPanel {
+        private _radius;
+        /**
+         * Gets or sets the radius of the sphere where to project controls (5 by default)
+         */
+        radius: float;
+        protected _mapGridNode(control: Control3D, nodePosition: Vector3): void;
         private _sphericalMapping(source);
     }
 }

dist/preview release/inspector/babylon.inspector.css

@@ -297,6 +297,45 @@
         background-color: #383838; }
       .insp-wrapper .tab-panel .gltf-actions .gltf-button:active {
         background-color: #454545; }
+  .insp-wrapper .tab-panel.tools-panel {
+    overflow-y: auto; }
+  .insp-wrapper .tab-panel .tool-title1 {
+    font-size: 1.1em;
+    padding: 10px; }
+  .insp-wrapper .tab-panel .tool-title2 {
+    margin: 10px 0 10px 0;
+    font-size: 1.05em;
+    border-bottom: 1px solid #5db0d7;
+    box-sizing: border-box; }
+  .insp-wrapper .tab-panel .tool-label, .insp-wrapper .tab-panel .tool-label-line, .insp-wrapper .tab-panel .tool-label-error {
+    display: inline-block;
+    width: 75%;
+    padding: 2px;
+    background-color: #2c2c2c;
+    border-bottom: 1px solid #242424;
+    border-top: 1px solid #242424;
+    height: 30px;
+    line-height: 30px;
+    box-sizing: border-box; }
+  .insp-wrapper .tab-panel .tool-label-line {
+    width: 100%; }
+  .insp-wrapper .tab-panel .tool-label-error {
+    color: #fa371d;
+    width: 100%;
+    background-color: none; }
+  .insp-wrapper .tab-panel .tool-value {
+    display: inline-block;
+    width: 25%;
+    padding: 2px;
+    background-color: #2c2c2c;
+    border-top: 1px solid #242424;
+    border-bottom: 1px solid #242424;
+    height: 30px;
+    line-height: 30px;
+    box-sizing: border-box; }
+  .insp-wrapper .tab-panel .tool-infos {
+    width: 100%;
+    padding: 4px; }
   .insp-wrapper .property-type {
     color: #5db0d7; }
   .insp-wrapper .property-name, .insp-wrapper .insp-details .base-row .prop-name, .insp-wrapper .insp-details .row .prop-name, .insp-wrapper .insp-details .header-row .prop-name {

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

@@ -1052,6 +1052,16 @@ declare module INSPECTOR {
 }
 
 declare module INSPECTOR {
+    class ToolsTab extends Tab {
+        private _inspector;
+        private _scene;
+        constructor(tabbar: TabBar, insp: Inspector);
+        private _createToolLabel(content, parent);
+        dispose(): void;
+    }
+}
+
+declare module INSPECTOR {
     /**
      * A tab bar will contains each view the inspector can have : Canvas2D, Meshes...
      * The default active tab is the first one of the list.

dist/preview release/inspector/babylon.inspector.js

@@ -4253,6 +4253,142 @@ var __extends = (this && this.__extends) || (function () {
 })();
 var INSPECTOR;
 (function (INSPECTOR) {
+    var ToolsTab = /** @class */ (function (_super) {
+        __extends(ToolsTab, _super);
+        function ToolsTab(tabbar, insp) {
+            var _this = _super.call(this, tabbar, 'Tools') || this;
+            _this._inspector = insp;
+            _this._scene = _this._inspector.scene;
+            // Build the tools panel: a div that will contains all tools
+            _this._panel = INSPECTOR.Helpers.CreateDiv('tab-panel');
+            _this._panel.classList.add("tools-panel");
+            var title = INSPECTOR.Helpers.CreateDiv('tool-title1', _this._panel);
+            var versionSpan = INSPECTOR.Helpers.CreateElement('span');
+            versionSpan.textContent = "Babylon.js v" + BABYLON.Engine.Version + " - Tools";
+            title.appendChild(versionSpan);
+            // Environment block
+            title = INSPECTOR.Helpers.CreateDiv('tool-title2', _this._panel);
+            title.textContent = "Environment";
+            {
+                var elemLabel = _this._createToolLabel("Load Environment Texture (.dds, .env) ", _this._panel);
+                elemLabel.className = "tool-label-line";
+                var errorElemm_1 = INSPECTOR.Inspector.DOCUMENT.createElement('div');
+                errorElemm_1.className = "tool-label-error";
+                errorElemm_1.style.display = "none";
+                var inputElement = INSPECTOR.Inspector.DOCUMENT.createElement('input');
+                inputElement.className = "tool-label-line";
+                inputElement.type = "file";
+                inputElement.onchange = function (event) {
+                    var files = event.target.files;
+                    var file = null;
+                    if (files && files.length) {
+                        file = files[0];
+                    }
+                    if (!file) {
+                        errorElemm_1.style.display = "block";
+                        errorElemm_1.textContent = "Please, select a file first.";
+                        return;
+                    }
+                    var isFileDDS = file.name.toLowerCase().indexOf(".dds") > 0;
+                    var isFileEnv = file.name.toLowerCase().indexOf(".env") > 0;
+                    if (!isFileDDS && !isFileEnv) {
+                        errorElemm_1.style.display = "block";
+                        errorElemm_1.textContent = "Please, select a dds or env file.";
+                        return;
+                    }
+                    BABYLON.Tools.ReadFile(file, function (data) {
+                        var blob = new Blob([data], { type: "octet/stream" });
+                        var url = URL.createObjectURL(blob);
+                        if (isFileDDS) {
+                            _this._scene.environmentTexture = BABYLON.CubeTexture.CreateFromPrefilteredData(url, _this._scene, ".dds");
+                            errorElemm_1.style.display = "none";
+                        }
+                        else {
+                            _this._scene.environmentTexture = new BABYLON.CubeTexture(url, _this._scene, undefined, undefined, undefined, function () {
+                                errorElemm_1.style.display = "none";
+                            }, function (message) {
+                                if (message) {
+                                    errorElemm_1.style.display = "block";
+                                    errorElemm_1.textContent = message;
+                                }
+                            }, undefined, undefined, ".env");
+                        }
+                    }, undefined, true);
+                };
+                _this._panel.appendChild(inputElement);
+                _this._createToolLabel("Compress to .env", _this._panel);
+                var elemValue = INSPECTOR.Helpers.CreateDiv('tool-value', _this._panel);
+                inputElement = INSPECTOR.Inspector.DOCUMENT.createElement('input');
+                inputElement.value = "Save";
+                inputElement.type = "button";
+                inputElement.onclick = function () {
+                    if (!_this._scene.environmentTexture) {
+                        errorElemm_1.style.display = "block";
+                        errorElemm_1.textContent = "You must load an environment texture first.";
+                        return;
+                    }
+                    if (_this._scene.activeCamera) {
+                        BABYLON.EnvironmentTextureTools.CreateEnvTextureAsync(_this._scene.environmentTexture)
+                            .then(function (buffer) {
+                            var blob = new Blob([buffer], { type: "octet/stream" });
+                            BABYLON.Tools.Download(blob, "environment.env");
+                            errorElemm_1.style.display = "none";
+                        })
+                            .catch(function (error) {
+                            errorElemm_1.style.display = "block";
+                            errorElemm_1.textContent = error;
+                        });
+                    }
+                    else {
+                        errorElemm_1.style.display = "block";
+                        errorElemm_1.textContent = "An active camera is required.";
+                    }
+                };
+                elemValue.appendChild(inputElement);
+                _this._panel.appendChild(errorElemm_1);
+            }
+            title = INSPECTOR.Helpers.CreateDiv('tool-title2', _this._panel);
+            title.textContent = "Capture";
+            {
+                _this._createToolLabel("Screenshot", _this._panel);
+                var elemValue = INSPECTOR.Helpers.CreateDiv('tool-value', _this._panel);
+                var inputElement = INSPECTOR.Inspector.DOCUMENT.createElement('input');
+                inputElement.value = "Capture";
+                inputElement.type = "button";
+                inputElement.onclick = function () {
+                    if (_this._scene.activeCamera) {
+                        BABYLON.Tools.CreateScreenshot(_this._scene.getEngine(), _this._scene.activeCamera, { precision: 0.5 });
+                    }
+                };
+                elemValue.appendChild(inputElement);
+            }
+            return _this;
+        }
+        ToolsTab.prototype._createToolLabel = function (content, parent) {
+            var elem = INSPECTOR.Helpers.CreateDiv('tool-label', parent);
+            elem.textContent = content;
+            return elem;
+        };
+        ToolsTab.prototype.dispose = function () {
+            // Nothing to dispose
+        };
+        return ToolsTab;
+    }(INSPECTOR.Tab));
+    INSPECTOR.ToolsTab = ToolsTab;
+})(INSPECTOR || (INSPECTOR = {}));
+
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var INSPECTOR;
+(function (INSPECTOR) {
     /**
      * A tab bar will contains each view the inspector can have : Canvas2D, Meshes...
      * The default active tab is the first one of the list.
@@ -4285,6 +4421,7 @@ var INSPECTOR;
             _this._tabs.push(new INSPECTOR.PhysicsTab(_this, _this._inspector));
             _this._tabs.push(new INSPECTOR.CameraTab(_this, _this._inspector));
             _this._tabs.push(new INSPECTOR.SoundTab(_this, _this._inspector));
+            _this._tabs.push(new INSPECTOR.ToolsTab(_this, _this._inspector));
             _this._toolBar = new INSPECTOR.Toolbar(_this._inspector);
             _this._build();
             //Check initialTab is defined and between tabs bounds

inspector/src/tabs/ToolsTab.ts

@@ -95,7 +95,7 @@ module INSPECTOR {
                         return;
                     }
                     if (this._scene.activeCamera) {
-                        BABYLON.EnvironmentTextureTools.CreateEnvTextureAsync(this._scene.environmentTexture)
+                        BABYLON.EnvironmentTextureTools.CreateEnvTextureAsync(<BABYLON.CubeTexture>this._scene.environmentTexture)
                         .then((buffer: ArrayBuffer) => {
                             var blob = new Blob([buffer], {type: "octet/stream"});
                             BABYLON.Tools.Download(blob, "environment.env");

src/Mesh/babylon.abstractMesh.ts

@@ -811,7 +811,7 @@
          * @param camera defines the camera to use to pick the right LOD level
          * @returns the currentAbstractMesh 
          */
-        public getLOD(camera: Camera): AbstractMesh {
+        public getLOD(camera: Camera): Nullable<AbstractMesh> {
             return this;
         }
 

src/Mesh/babylon.mesh.ts

@@ -98,7 +98,7 @@
         public delayLoadingFile: string;
         public _binaryInfo: any;
         private _LODLevels = new Array<MeshLODLevel>();
-        public onLODLevelSelection: (distance: number, mesh: Mesh, selectedLevel: Mesh) => void;
+        public onLODLevelSelection: (distance: number, mesh: Mesh, selectedLevel: Nullable<Mesh>) => void;
 
         // Morph
         private _morphTargetManager: Nullable<MorphTargetManager>;
@@ -331,11 +331,11 @@
         /**
          * Add a mesh as LOD level triggered at the given distance.
          * tuto : http://doc.babylonjs.com/tutorials/How_to_use_LOD
-         * @param {number} distance The distance from the center of the object to show this level
-         * @param {Mesh} mesh The mesh to be added as LOD level
-         * @return {Mesh} This mesh (for chaining)
+         * @param distance The distance from the center of the object to show this level
+         * @param mesh The mesh to be added as LOD level (can be null)
+         * @return This mesh (for chaining)
          */
-        public addLODLevel(distance: number, mesh: Mesh): Mesh {
+        public addLODLevel(distance: number, mesh: Nullable<Mesh>): Mesh {
             if (mesh && mesh._masterMesh) {
                 Tools.Warn("You cannot use a mesh as LOD level twice");
                 return this;
@@ -392,9 +392,9 @@
 
         /**
          * Returns the registered LOD mesh distant from the parameter `camera` position if any, else returns the current mesh.
-         * tuto : http://doc.babylonjs.com/tutorials/How_to_use_LOD
+         * tuto : http://doc.babylonjs.com/how_to/how_to_use_lod
          */
-        public getLOD(camera: Camera, boundingSphere?: BoundingSphere): AbstractMesh {
+        public getLOD(camera: Camera, boundingSphere?: BoundingSphere): Nullable<AbstractMesh> {
             if (!this._LODLevels || this._LODLevels.length === 0) {
                 return this;
             }
@@ -430,7 +430,8 @@
                     if (this.onLODLevelSelection) {
                         this.onLODLevelSelection(distanceToCamera, this, level.mesh);
                     }
-                    return level.mesh;
+
+                    return level.mesh;                   
                 }
             }
 

src/Mesh/babylon.meshLODLevel.ts

@@ -1,6 +1,6 @@
 module BABYLON {
     export class MeshLODLevel {
-        constructor(public distance: number, public mesh: Mesh) {
+        constructor(public distance: number, public mesh: Nullable<Mesh>) {
         }
     }
 } 

src/Rendering/babylon.utilityLayerRenderer.ts

@@ -141,6 +141,8 @@ module BABYLON {
          * Disposes of the renderer
          */
         public dispose(){
+            this.onPointerOutObservable.clear();
+
             if(this._afterRenderObserver){
                 this.originalScene.onAfterRenderObservable.remove(this._afterRenderObserver);
             }

src/Tools/babylon.environmentTextureTools.ts

@@ -198,7 +198,7 @@ module BABYLON {
                             // Reading datas from WebGL
                             canvas!.toBlob((blob) => {
                                 let fileReader = new FileReader();
-                                fileReader.onload = (event) => {
+                                fileReader.onload = (event: any) => {
                                     let arrayBuffer = event.target!.result as ArrayBuffer;
                                     specularTextures[i * 6 + face] = arrayBuffer;
                                     resolve();