Merge branch 'master' of https://github.com/BabylonJS/Babylon.js

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

@@ -505,7 +505,7 @@ declare module INSPECTOR {
         private _elem;
         /** The tooltip div */
         private _infoDiv;
-        constructor(elem: HTMLElement, tip: string);
+        constructor(elem: HTMLElement, tip: string, attachTo?: HTMLElement);
     }
 }
 
@@ -552,6 +552,7 @@ declare module INSPECTOR {
          */
         static Css(elem: HTMLElement, cssAttribute: string): string;
         static LoadScript(): void;
+        static IsSystemName(name: string): boolean;
     }
 }
 
@@ -832,12 +833,23 @@ declare module INSPECTOR {
     class LabelTool extends AbstractTool {
         /** True if label are displayed, false otherwise */
         private _isDisplayed;
-        private _labels;
-        private _camera;
-        private _transformationMatrix;
+        private _canvas;
+        private _labelInitialized;
+        private _scene;
+        private _canvas2DLoaded;
+        private _newMeshObserver;
+        private _removedMeshObserver;
+        private _newLightObserver;
+        private _removedLightObserver;
+        private _newCameraObserver;
+        private _removedCameraObserver;
         constructor(parent: HTMLElement, inspector: Inspector);
+        dispose(): void;
+        private _checkC2DLoaded();
+        private _initializeLabels();
+        private _createLabel(node);
+        private _removeLabel(node);
         action(): void;
-        private _update();
     }
 }
 

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

@@ -14,6 +14,10 @@ var INSPECTOR;
             // Save HTML document and window
             Inspector.DOCUMENT = window.document;
             Inspector.WINDOW = window;
+            // Load the Canvas2D library if it's not already done
+            if (!BABYLON.Canvas2D) {
+                BABYLON.Tools.LoadScript("http://www.babylonjs.com/babylon.canvas2d.js", function () { });
+            }
             // POPUP MODE
             if (popup) {
                 // Build the inspector in the given parent
@@ -201,9 +205,9 @@ var INSPECTOR;
                 for (var prop in this._canvasStyle) {
                     canvas.style[prop] = this._canvasStyle[prop];
                 }
-                // Get parent of the wrapper           
+                // Get parent of the wrapper 
                 var canvasParent = canvas.parentElement.parentElement;
-                canvasParent.appendChild(canvas);
+                canvasParent.insertBefore(canvas, this._c2diwrapper);
                 // Remove wrapper
                 INSPECTOR.Helpers.CleanDiv(this._c2diwrapper);
                 this._c2diwrapper.remove();
@@ -1732,10 +1736,13 @@ var INSPECTOR;
      * Creates a tooltip for the parent of the given html element
      */
     var Tooltip = (function () {
-        function Tooltip(elem, tip) {
+        function Tooltip(elem, tip, attachTo) {
             var _this = this;
             this._elem = elem;
-            this._infoDiv = INSPECTOR.Helpers.CreateDiv('tooltip', this._elem.parentElement);
+            if (!attachTo) {
+                attachTo = this._elem.parentElement;
+            }
+            this._infoDiv = INSPECTOR.Helpers.CreateDiv('tooltip', attachTo);
             this._elem.addEventListener('mouseover', function () {
                 _this._infoDiv.textContent = tip;
                 _this._infoDiv.style.display = 'block';
@@ -1894,6 +1901,12 @@ var INSPECTOR;
                 console.log("erreur");
             });
         };
+        Helpers.IsSystemName = function (name) {
+            if (name == null) {
+                return false;
+            }
+            return name.indexOf("###") === 0 && name.lastIndexOf("###") === (name.length - 3);
+        };
         return Helpers;
     }());
     INSPECTOR.Helpers = Helpers;
@@ -2154,17 +2167,13 @@ var INSPECTOR;
             var arr = [];
             // get all canvas2D
             var instances = BABYLON.Canvas2D.instances || [];
-            // Returns true if the id of the given object starts and ends with '###'
-            var shouldExcludeThisPrim = function (obj) {
-                return (obj.id && obj.id.indexOf('###') == 0 && obj.id.lastIndexOf('###', 0) === 0);
-            };
             // Recursive method building the tree panel
             var createNode = function (obj) {
                 if (obj.children && obj.children.length > 0) {
                     var node = new INSPECTOR.TreeItem(_this, new INSPECTOR.Canvas2DAdapter(obj));
                     for (var _i = 0, _a = obj.children; _i < _a.length; _i++) {
                         var child = _a[_i];
-                        if (!shouldExcludeThisPrim(child)) {
+                        if (!INSPECTOR.Helpers.IsSystemName(child.id)) {
                             var n = createNode(child);
                             node.add(n);
                         }
@@ -2178,6 +2187,9 @@ var INSPECTOR;
             };
             for (var _i = 0, instances_1 = instances; _i < instances_1.length; _i++) {
                 var inst = instances_1[_i];
+                if (INSPECTOR.Helpers.IsSystemName(inst.id)) {
+                    continue;
+                }
                 var c2d = inst;
                 var nodes = createNode(c2d);
                 arr.push(nodes);
@@ -2259,17 +2271,44 @@ var INSPECTOR;
         }
         /* Overrides super */
         MeshTab.prototype._getTree = function () {
+            var _this = this;
             var arr = [];
+            // Tab containign mesh already in results
+            var alreadyIn = [];
             // Returns true if the id of the given object starts and ends with '###'
             var shouldExcludeThisMesh = function (obj) {
                 return (obj.name && obj.name.indexOf('###') == 0 && obj.name.lastIndexOf('###', 0) === 0);
             };
+            // Recursive method building the tree panel
+            var createNode = function (obj) {
+                var descendants = obj.getDescendants(true);
+                if (descendants.length > 0) {
+                    var node = new INSPECTOR.TreeItem(_this, new INSPECTOR.MeshAdapter(obj));
+                    alreadyIn.push(node);
+                    for (var _i = 0, descendants_1 = descendants; _i < descendants_1.length; _i++) {
+                        var child = descendants_1[_i];
+                        if (child instanceof BABYLON.AbstractMesh) {
+                            if (!INSPECTOR.Helpers.IsSystemName(child.name)) {
+                                var n = createNode(child);
+                                node.add(n);
+                            }
+                        }
+                    }
+                    node.update();
+                    return node;
+                }
+                else {
+                    alreadyIn.push(obj);
+                    return new INSPECTOR.TreeItem(_this, new INSPECTOR.MeshAdapter(obj));
+                }
+            };
             // get all meshes from the first scene
             var instances = this._inspector.scene;
             for (var _i = 0, _a = instances.meshes; _i < _a.length; _i++) {
                 var mesh = _a[_i];
-                if (!shouldExcludeThisMesh(mesh)) {
-                    arr.push(new INSPECTOR.TreeItem(this, new INSPECTOR.MeshAdapter(mesh)));
+                if (alreadyIn.indexOf(mesh) == -1) {
+                    var node = createNode(mesh);
+                    arr.push(node);
                 }
             }
             return arr;
@@ -3251,32 +3290,136 @@ var INSPECTOR;
             var _this = _super.call(this, 'fa-tags', parent, inspector, 'Display mesh names on the canvas') || this;
             /** True if label are displayed, false otherwise */
             _this._isDisplayed = false;
-            _this._labels = [];
-            _this._transformationMatrix = BABYLON.Matrix.Identity();
+            _this._canvas = null;
+            _this._labelInitialized = false;
+            _this._scene = null;
+            _this._canvas2DLoaded = false;
+            _this._newMeshObserver = null;
+            _this._removedMeshObserver = null;
+            _this._newLightObserver = null;
+            _this._removedLightObserver = null;
+            _this._newCameraObserver = null;
+            _this._removedCameraObserver = null;
+            _this._scene = inspector.scene;
             return _this;
         }
+        LabelTool.prototype.dispose = function () {
+            if (this._newMeshObserver) {
+                this._scene.onNewMeshAddedObservable.remove(this._newMeshObserver);
+                this._scene.onMeshRemovedObservable.remove(this._removedMeshObserver);
+                this._scene.onNewLightAddedObservable.remove(this._newLightObserver);
+                this._scene.onLightRemovedObservable.remove(this._removedLightObserver);
+                this._scene.onNewCameraAddedObservable.remove(this._newCameraObserver);
+                this._scene.onCameraRemovedObservable.remove(this._removedCameraObserver);
+                this._newMeshObserver = this._newLightObserver = this._newCameraObserver = this._removedMeshObserver = this._removedLightObserver = this._removedCameraObserver = null;
+            }
+            this._canvas.dispose();
+            this._canvas = null;
+        };
+        LabelTool.prototype._checkC2DLoaded = function () {
+            if (this._canvas2DLoaded === true) {
+                return true;
+            }
+            if (BABYLON.Canvas2D) {
+                this._canvas2DLoaded = true;
+            }
+            return this._canvas2DLoaded;
+        };
+        LabelTool.prototype._initializeLabels = function () {
+            var _this = this;
+            // Check if the label are already initialized and quit if it's the case
+            if (this._labelInitialized) {
+                return;
+            }
+            // Can't initialize them if the Canvas2D lib is not loaded yet
+            if (!this._checkC2DLoaded()) {
+                return;
+            }
+            // Create the canvas that will be used to display the labels
+            this._canvas = new BABYLON.ScreenSpaceCanvas2D(this._scene, { id: "###Label Canvas###" /*, cachingStrategy: BABYLON.Canvas2D.CACHESTRATEGY_TOPLEVELGROUPS*/ });
+            this._canvas.createCanvasProfileInfoCanvas();
+            // Create label for all the Meshes, Lights and Cameras
+            // Those that will be created/removed after this method is called will be taken care by the event handlers added below
+            for (var _i = 0, _a = this._scene.meshes; _i < _a.length; _i++) {
+                var m = _a[_i];
+                this._createLabel(m);
+            }
+            for (var _b = 0, _c = this._scene.lights; _b < _c.length; _b++) {
+                var l = _c[_b];
+                this._createLabel(l);
+            }
+            for (var _d = 0, _e = this._scene.cameras; _d < _e.length; _d++) {
+                var c = _e[_d];
+                this._createLabel(c);
+            }
+            // Add handlers for new/removed meshes, camera and lights
+            this._newMeshObserver = this._scene.onNewMeshAddedObservable.add(function (e, s) {
+                _this._createLabel(e);
+            });
+            this._removedMeshObserver = this._scene.onMeshRemovedObservable.add(function (e, s) {
+                _this._removeLabel(e);
+            });
+            this._newLightObserver = this._scene.onNewLightAddedObservable.add(function (e, s) {
+                _this._createLabel(e);
+            });
+            this._removedLightObserver = this._scene.onLightRemovedObservable.add(function (e, s) {
+                _this._removeLabel(e);
+            });
+            this._newCameraObserver = this._scene.onNewCameraAddedObservable.add(function (e, s) {
+                _this._createLabel(e);
+            });
+            this._removedCameraObserver = this._scene.onCameraRemovedObservable.add(function (e, s) {
+                _this._removeLabel(e);
+            });
+            this._labelInitialized = true;
+        };
+        LabelTool.prototype._createLabel = function (node) {
+            // Don't create label for "system nodes" (starting and ending with ###)
+            var name = node.name;
+            if (INSPECTOR.Helpers.IsSystemName(name)) {
+                return;
+            }
+            var labelGroup = new BABYLON.Group2D({ parent: this._canvas, id: "Label of " + node.name, trackNode: node, origin: BABYLON.Vector2.Zero(),
+                children: [
+                    new BABYLON.Rectangle2D({ id: "LabelRect", x: 0, y: 0, width: 100, height: 30, origin: BABYLON.Vector2.Zero(), border: "#FFFFFFFF", fill: "#808080B0", children: [
+                            new BABYLON.Text2D(node.name, { x: 10, y: 4, fontName: "bold 16px Arial", fontSignedDistanceField: true })
+                        ]
+                    })
+                ] });
+            var r = labelGroup.children[0];
+            var t = r.children[0];
+            var ts = t.textSize.width;
+            r.width = ts + 20;
+            r.height = t.textSize.height + 12;
+            labelGroup.addExternalData("owner", node);
+            return labelGroup;
+        };
+        LabelTool.prototype._removeLabel = function (node) {
+            for (var _i = 0, _a = this._canvas.children; _i < _a.length; _i++) {
+                var g = _a[_i];
+                var ed = g.getExternalData("owner");
+                if (ed === node) {
+                    g.dispose();
+                    break;
+                }
+            }
+        };
         // Action : Display/hide mesh names on the canvas
         LabelTool.prototype.action = function () {
+            // Don't toggle if the script is not loaded
+            if (!this._checkC2DLoaded()) {
+                return;
+            }
+            // Toggle the label display state
+            this._isDisplayed = !this._isDisplayed;
+            // Check if we have to display the labels
             if (this._isDisplayed) {
+                this._initializeLabels();
+                this._canvas.levelVisible = true;
+            }
+            else {
+                this._canvas.levelVisible = false;
             }
-        };
-        LabelTool.prototype._update = function () {
-            this._camera = this._inspector.scene.activeCamera;
-            var engine = this._inspector.scene.getEngine();
-            var viewport = this._camera.viewport;
-            var globalViewport = viewport.toGlobal(engine.getRenderWidth(), engine.getRenderHeight());
-            this._camera.getViewMatrix().multiplyToRef(this._camera.getProjectionMatrix(), this._transformationMatrix);
-            // Old method
-            // let meshes = this._camera.getActiveMeshes();
-            // let projectedPosition: BABYLON.Vector3;
-            // for (let index = 0; index < meshes.length; index++) {
-            //     let mesh = meshes.data[index];
-            //     let position = mesh.getBoundingInfo().boundingSphere.center;
-            //     projectedPosition = BABYLON.Vector3.Project(position, mesh.getWorldMatrix(), this._transformationMatrix, globalViewport);
-            //     this._renderLabel(mesh.name, projectedPosition, 12,
-            //         () => { mesh.renderOverlay = !mesh.renderOverlay },
-            //         () => { return mesh.renderOverlay ? 'red' : 'black'; });
-            // }
         };
         return LabelTool;
     }(INSPECTOR.AbstractTool));
@@ -3706,7 +3849,7 @@ var INSPECTOR;
             var _this = _super.call(this) || this;
             _this._obj = obj;
             _this._elem.classList.add('fa-info-circle');
-            _this._tooltip = new INSPECTOR.Tooltip(_this._elem, _this._obj.getInfo());
+            _this._tooltip = new INSPECTOR.Tooltip(_this._elem, _this._obj.getInfo(), _this._elem);
             return _this;
         }
         // Nothing to do on click

inspector/src/Inspector.ts

@@ -35,6 +35,11 @@ module INSPECTOR {
             Inspector.DOCUMENT = window.document;   
             Inspector.WINDOW = window;                       
             
+            // Load the Canvas2D library if it's not already done
+            if (!BABYLON.Canvas2D) {
+                BABYLON.Tools.LoadScript("http://www.babylonjs.com/babylon.canvas2d.js", () => {});
+            }
+
             // POPUP MODE
             if (popup) { 
                 // Build the inspector in the given parent

inspector/src/helpers/Helpers.ts

@@ -157,5 +157,11 @@ module INSPECTOR {
             
         }
 
+        public static IsSystemName(name: string): boolean {
+            if (name==null) {
+                return false;
+            }
+            return name.indexOf("###")===0 && name.lastIndexOf("###")===(name.length-3);
+        }
     }
 }

inspector/src/tabs/Canvas2DTab.ts

@@ -12,18 +12,13 @@ module INSPECTOR{
             
             // get all canvas2D
             let instances = BABYLON.Canvas2D.instances || [];
-                    
-            // Returns true if the id of the given object starts and ends with '###'
-            let shouldExcludeThisPrim = (obj:BABYLON.Prim2DBase) : boolean => {
-                return (obj.id && obj.id.indexOf('###') == 0 && obj.id.lastIndexOf('###', 0) === 0);
-            }
-            
+           
             // Recursive method building the tree panel
             let createNode = (obj : BABYLON.Prim2DBase) => {
                 if (obj.children && obj.children.length > 0) {
                     let node = new TreeItem(this, new Canvas2DAdapter(obj));
                     for (let child of obj.children) {     
-                        if (!shouldExcludeThisPrim(child)) {  
+                        if (!Helpers.IsSystemName(child.id)) {  
                             let n = createNode(child);
                             node.add(n); 
                         }
@@ -36,6 +31,9 @@ module INSPECTOR{
             };
             
             for (let inst of instances) {
+                if (Helpers.IsSystemName(inst.id)) {
+                    continue;
+                }
                 let c2d : BABYLON.Canvas2D = inst as BABYLON.Canvas2D;
                 let nodes = createNode(c2d);
                 arr.push(nodes);

inspector/src/tabs/MeshTab.ts

@@ -26,7 +26,7 @@ module INSPECTOR{
                     alreadyIn.push(node);
                     for (let child of descendants) {     
                         if (child instanceof BABYLON.AbstractMesh) {
-                            if (!shouldExcludeThisMesh(child)) {  
+                            if (!Helpers.IsSystemName(child.name)) {  
                                 let n = createNode(child);
                                 node.add(n); 
                             }

inspector/src/tools/LabelTool.ts

@@ -4,41 +4,170 @@ module INSPECTOR {
 
         /** True if label are displayed, false otherwise */
         private _isDisplayed         : boolean            = false;
-        private _labels              : Array<HTMLElement> = [];
-        private _camera              : BABYLON.Camera;
-        private _transformationMatrix: BABYLON.Matrix     = BABYLON.Matrix.Identity();
+        private _canvas              : BABYLON.ScreenSpaceCanvas2D = null;
+        private _labelInitialized    : boolean = false;
+        private _scene               : BABYLON.Scene = null;
+        private _canvas2DLoaded      : boolean = false;
 
+        private _newMeshObserver       : BABYLON.Observer<BABYLON.AbstractMesh> = null;
+        private _removedMeshObserver   : BABYLON.Observer<BABYLON.AbstractMesh> = null;
+        private _newLightObserver      : BABYLON.Observer<BABYLON.Light> = null;
+        private _removedLightObserver  : BABYLON.Observer<BABYLON.Light> = null;
+        private _newCameraObserver     : BABYLON.Observer<BABYLON.Camera> = null;
+        private _removedCameraObserver : BABYLON.Observer<BABYLON.Camera> = null;
+        
         constructor(parent:HTMLElement, inspector:Inspector) {
-            super('fa-tags', parent, inspector, 'Display mesh names on the canvas');            
+            super('fa-tags', parent, inspector, 'Display mesh names on the canvas');
+
+            this._scene = inspector.scene;
+        }
+
+        public dispose() {
+            if (this._newMeshObserver) {
+                this._scene.onNewMeshAddedObservable.remove(this._newMeshObserver);
+                this._scene.onMeshRemovedObservable.remove (this._removedMeshObserver);
+
+                this._scene.onNewLightAddedObservable.remove(this._newLightObserver);
+                this._scene.onLightRemovedObservable.remove (this._removedLightObserver);
+
+                this._scene.onNewCameraAddedObservable.remove(this._newCameraObserver);
+                this._scene.onCameraRemovedObservable.remove (this._removedCameraObserver);
+    
+                this._newMeshObserver = this._newLightObserver = this._newCameraObserver = this._removedMeshObserver = this._removedLightObserver = this._removedCameraObserver = null;
+            }
+
+            this._canvas.dispose();
+            this._canvas = null;
+        }
+
+        private _checkC2DLoaded(): boolean {
+            if (this._canvas2DLoaded === true) {
+                return true;
+            }
+            if (BABYLON.Canvas2D) {
+                this._canvas2DLoaded = true;
+            }
+            return this._canvas2DLoaded;
+        }
+
+        private _initializeLabels() {
+            // Check if the label are already initialized and quit if it's the case
+            if (this._labelInitialized) {
+                return;
+            }
+
+            // Can't initialize them if the Canvas2D lib is not loaded yet
+            if (!this._checkC2DLoaded()) {
+                return;
+            }
+
+            // Create the canvas that will be used to display the labels
+            this._canvas = new BABYLON.ScreenSpaceCanvas2D(this._scene, {id: "###Label Canvas###"/*, cachingStrategy: BABYLON.Canvas2D.CACHESTRATEGY_TOPLEVELGROUPS*/});
+
+            this._canvas.createCanvasProfileInfoCanvas();
+
+            // Create label for all the Meshes, Lights and Cameras
+            // Those that will be created/removed after this method is called will be taken care by the event handlers added below
+
+            for (let m of this._scene.meshes) {
+                this._createLabel(m);
+            }
+
+            for (let l of this._scene.lights) {
+                this._createLabel(l);
+            }
+
+            for (let c of this._scene.cameras) {
+                this._createLabel(c);
+            }
+
+            // Add handlers for new/removed meshes, camera and lights
+
+            this._newMeshObserver = this._scene.onNewMeshAddedObservable.add((e, s) => {
+                this._createLabel(e);
+            });
+
+            this._removedMeshObserver = this._scene.onMeshRemovedObservable.add((e, s) => {
+                this._removeLabel(e);
+            });
+
+            this._newLightObserver = this._scene.onNewLightAddedObservable.add((e, s) => {
+                this._createLabel(e);
+            });
+
+            this._removedLightObserver = this._scene.onLightRemovedObservable.add((e, s) => {
+                this._removeLabel(e);
+            });
+
+            this._newCameraObserver = this._scene.onNewCameraAddedObservable.add((e, s) => {
+                this._createLabel(e);
+            });
+
+            this._removedCameraObserver = this._scene.onCameraRemovedObservable.add((e, s) => {
+                this._removeLabel(e);
+            });
+            
+            this._labelInitialized = true;
+        }
+
+        private _createLabel(node: BABYLON.Node): BABYLON.Group2D {
+            // Don't create label for "system nodes" (starting and ending with ###)
+            let name = node.name;
+
+            if (Helpers.IsSystemName(name)) {
+                return;
+            }
+
+            let labelGroup = new BABYLON.Group2D({ parent: this._canvas, id: `Label of ${node.name}`, trackNode: node, origin: BABYLON.Vector2.Zero(), 
+            children: [
+                    new BABYLON.Rectangle2D({ id: "LabelRect", x: 0, y: 0, width: 100, height: 30, origin: BABYLON.Vector2.Zero(), border: "#FFFFFFFF", fill: "#808080B0", children: [
+                            new BABYLON.Text2D(node.name, { x: 10, y: 4, fontName: "bold 16px Arial", fontSignedDistanceField: true })
+                        ]
+                    })
+                ]}
+            );
+
+            let r = labelGroup.children[0] as BABYLON.Rectangle2D;
+            let t = r.children[0] as BABYLON.Text2D;
+            let ts = t.textSize.width;
+            r.width = ts + 20;
+            r.height = t.textSize.height + 12;
+
+            labelGroup.addExternalData("owner", node);
+
+            return labelGroup;
+        }
+
+        private _removeLabel(node: BABYLON.Node) {
+            for (let g of this._canvas.children) {
+                let ed = g.getExternalData("owner");
+                if (ed === node) {
+                    g.dispose();
+                    break;
+                }
+            }
         }
 
         // Action : Display/hide mesh names on the canvas
         public action() {
+            // Don't toggle if the script is not loaded
+            if (!this._checkC2DLoaded()) {
+                return;
+            }
+
+            // Toggle the label display state
+            this._isDisplayed = !this._isDisplayed;
+
+            // Check if we have to display the labels
             if (this._isDisplayed) {
-                // hide all labels
+                this._initializeLabels();
+                this._canvas.levelVisible = true;
+            } 
+            
+            // Or to hide them
+            else {
+                this._canvas.levelVisible = false;
             }
         }
-        
-        private _update() {
-            this._camera       = this._inspector.scene.activeCamera;
-            let engine         = this._inspector.scene.getEngine();
-            let viewport       = this._camera.viewport;
-            let globalViewport = viewport.toGlobal(engine.getRenderWidth(), engine.getRenderHeight());
-            this._camera.getViewMatrix().multiplyToRef(this._camera.getProjectionMatrix(), this._transformationMatrix);
-                    
-            // Old method
-            // let meshes = this._camera.getActiveMeshes();
-            // let projectedPosition: BABYLON.Vector3;
-            // for (let index = 0; index < meshes.length; index++) {
-            //     let mesh = meshes.data[index];
-
-            //     let position = mesh.getBoundingInfo().boundingSphere.center;
-            //     projectedPosition = BABYLON.Vector3.Project(position, mesh.getWorldMatrix(), this._transformationMatrix, globalViewport);
-
-            //     this._renderLabel(mesh.name, projectedPosition, 12,
-            //         () => { mesh.renderOverlay = !mesh.renderOverlay },
-            //         () => { return mesh.renderOverlay ? 'red' : 'black'; });
-            // }
-        }
     }
 }