Improved FilesInput loading process + code cleanup

dist/preview release/babylon.max.js

@@ -48092,30 +48092,39 @@ var BABYLON;
 var BABYLON;
 (function (BABYLON) {
     var FilesInput = (function () {
-        /// Register to core BabylonJS object: engine, scene, rendering canvas, callback function when the scene will be loaded,
-        /// loading progress callback and optionnal addionnal logic to call in the rendering loop
-        function FilesInput(p_engine, p_scene, p_canvas, p_sceneLoadedCallback, p_progressCallback, p_additionnalRenderLoopLogicCallback, p_textureLoadingCallback, p_startingProcessingFilesCallback) {
-            this._engine = p_engine;
-            this._canvas = p_canvas;
-            this._currentScene = p_scene;
-            this._sceneLoadedCallback = p_sceneLoadedCallback;
-            this._progressCallback = p_progressCallback;
-            this._additionnalRenderLoopLogicCallback = p_additionnalRenderLoopLogicCallback;
-            this._textureLoadingCallback = p_textureLoadingCallback;
-            this._startingProcessingFilesCallback = p_startingProcessingFilesCallback;
+        function FilesInput(engine, scene, sceneLoadedCallback, progressCallback, additionalRenderLoopLogicCallback, textureLoadingCallback, startingProcessingFilesCallback, onReloadCallback) {
+            this._engine = engine;
+            this._currentScene = scene;
+            this._sceneLoadedCallback = sceneLoadedCallback;
+            this._progressCallback = progressCallback;
+            this._additionalRenderLoopLogicCallback = additionalRenderLoopLogicCallback;
+            this._textureLoadingCallback = textureLoadingCallback;
+            this._startingProcessingFilesCallback = startingProcessingFilesCallback;
+            this._onReloadCallback = onReloadCallback;
         }
-        FilesInput.prototype.monitorElementForDragNDrop = function (p_elementToMonitor) {
+        FilesInput.prototype.monitorElementForDragNDrop = function (elementToMonitor) {
             var _this = this;
-            if (p_elementToMonitor) {
-                this._elementToMonitor = p_elementToMonitor;
-                this._elementToMonitor.addEventListener("dragenter", function (e) { _this.drag(e); }, false);
-                this._elementToMonitor.addEventListener("dragover", function (e) { _this.drag(e); }, false);
-                this._elementToMonitor.addEventListener("drop", function (e) { _this.drop(e); }, false);
+            if (elementToMonitor) {
+                this._elementToMonitor = elementToMonitor;
+                this._dragEnterHandler = function (e) { _this.drag(e); };
+                this._dragOverHandler = function (e) { _this.drag(e); };
+                this._dropHandler = function (e) { _this.drop(e); };
+                this._elementToMonitor.addEventListener("dragenter", this._dragEnterHandler, false);
+                this._elementToMonitor.addEventListener("dragover", this._dragOverHandler, false);
+                this._elementToMonitor.addEventListener("drop", this._dropHandler, false);
+            }
+        };
+        FilesInput.prototype.dispose = function () {
+            if (!this._elementToMonitor) {
+                return;
             }
+            this._elementToMonitor.removeEventListener("dragenter", this._dragEnterHandler);
+            this._elementToMonitor.removeEventListener("dragover", this._dragOverHandler);
+            this._elementToMonitor.removeEventListener("drop", this._dropHandler);
         };
         FilesInput.prototype.renderFunction = function () {
-            if (this._additionnalRenderLoopLogicCallback) {
-                this._additionnalRenderLoopLogicCallback();
+            if (this._additionalRenderLoopLogicCallback) {
+                this._additionalRenderLoopLogicCallback();
             }
             if (this._currentScene) {
                 if (this._textureLoadingCallback) {
@@ -48173,7 +48182,12 @@ var BABYLON;
                     FilesInput.FilesToLoad[name] = files[i];
                 }
             }
-            this.reload();
+            if (this._onReloadCallback) {
+                this._onReloadCallback(this._sceneFileToLoad);
+            }
+            else {
+                this.reload();
+            }
         };
         FilesInput.prototype.loadFiles = function (event) {
             var _this = this;
@@ -48238,7 +48252,6 @@ var BABYLON;
         };
         FilesInput.prototype.reload = function () {
             var _this = this;
-            var that = this;
             // If a ".babylon" file has been provided
             if (this._sceneFileToLoad) {
                 if (this._currentScene) {
@@ -48250,13 +48263,15 @@ var BABYLON;
                     this._currentScene.dispose();
                 }
                 BABYLON.SceneLoader.Load("file:", this._sceneFileToLoad, this._engine, function (newScene) {
-                    that._currentScene = newScene;
+                    _this._currentScene = newScene;
+                    if (_this._sceneLoadedCallback) {
+                        _this._sceneLoadedCallback(_this._sceneFileToLoad, _this._currentScene);
+                    }
                     // Wait for textures and shaders to be ready
-                    that._currentScene.executeWhenReady(function () {
-                        if (that._sceneLoadedCallback) {
-                            that._sceneLoadedCallback(_this._sceneFileToLoad, that._currentScene);
-                        }
-                        that._engine.runRenderLoop(function () { that.renderFunction(); });
+                    _this._currentScene.executeWhenReady(function () {
+                        _this._engine.runRenderLoop(function () {
+                            _this.renderFunction();
+                        });
                     });
                 }, function (progress) {
                     if (_this._progressCallback) {
@@ -55102,7 +55117,7 @@ var BABYLON;
 (function (BABYLON) {
     var Bone = (function (_super) {
         __extends(Bone, _super);
-        function Bone(name, skeleton, parentBone, matrix, restPose) {
+        function Bone(name, skeleton, parentBone, localMatrix, restPose, baseMatrix, index) {
             if (parentBone === void 0) { parentBone = null; }
             var _this = _super.call(this, name, skeleton.getScene()) || this;
             _this.name = name;
@@ -55116,9 +55131,10 @@ var BABYLON;
             _this._negateScaleChildren = BABYLON.Vector3.One();
             _this._scalingDeterminant = 1;
             _this._skeleton = skeleton;
-            _this._localMatrix = matrix ? matrix : BABYLON.Matrix.Identity();
-            _this._baseMatrix = _this._localMatrix.clone();
+            _this._localMatrix = localMatrix ? localMatrix : BABYLON.Matrix.Identity();
             _this._restPose = restPose ? restPose : _this._localMatrix.clone();
+            _this._baseMatrix = baseMatrix ? baseMatrix : _this._localMatrix.clone();
+            _this._index = index;
             skeleton.bones.push(_this);
             _this.setParent(parentBone, false);
             _this._updateDifferenceMatrix();
@@ -56816,7 +56832,10 @@ var BABYLON;
                         bone.getWorldMatrix().copyFrom(bone.getLocalMatrix());
                     }
                 }
-                bone.getInvertedAbsoluteTransform().multiplyToArray(bone.getWorldMatrix(), targetMatrix, index * 16);
+                if (bone._index !== -1) {
+                    var mappedIndex = bone._index === undefined ? index : bone._index;
+                    bone.getInvertedAbsoluteTransform().multiplyToArray(bone.getWorldMatrix(), targetMatrix, bone._index * 16);
+                }
             }
             this._identity.copyToArray(targetMatrix, this.bones.length * 16);
         };
@@ -56981,6 +57000,29 @@ var BABYLON;
             }
             return poseMatrix;
         };
+        Skeleton.prototype.sortBones = function () {
+            var bones = new Array();
+            var visited = new Array(this.bones.length);
+            for (var index = 0; index < this.bones.length; index++) {
+                this._sortBones(index, bones, visited);
+            }
+            this.bones = bones;
+        };
+        Skeleton.prototype._sortBones = function (index, bones, visited) {
+            if (visited[index]) {
+                return;
+            }
+            visited[index] = true;
+            var bone = this.bones[index];
+            if (bone._index === undefined) {
+                bone._index = index;
+            }
+            var parentBone = bone.getParent();
+            if (parentBone) {
+                this._sortBones(this.bones.indexOf(parentBone), bones, visited);
+            }
+            bones.push(bone);
+        };
         return Skeleton;
     }());
     BABYLON.Skeleton = Skeleton;
@@ -69752,13 +69794,13 @@ var BABYLON;
         });
         Object.defineProperty(FramingBehavior.prototype, "positionY", {
             /**
-             * Gets the Y offset of the primary mesh from the camera's focus.
+             * Gets the Y offset of the target mesh from the camera's focus.
              */
             get: function () {
                 return this._positionY;
             },
             /**
-             * Sets the Y offset of the primary mesh from the camera's focus.
+             * Sets the Y offset of the target mesh from the camera's focus.
              */
             set: function (positionY) {
                 this._positionY = positionY;

dist/preview release/customConfigurations/minimalGLTFViewer/babylon.max.js

@@ -49511,30 +49511,39 @@ var BABYLON;
 var BABYLON;
 (function (BABYLON) {
     var FilesInput = (function () {
-        /// Register to core BabylonJS object: engine, scene, rendering canvas, callback function when the scene will be loaded,
-        /// loading progress callback and optionnal addionnal logic to call in the rendering loop
-        function FilesInput(p_engine, p_scene, p_canvas, p_sceneLoadedCallback, p_progressCallback, p_additionnalRenderLoopLogicCallback, p_textureLoadingCallback, p_startingProcessingFilesCallback) {
-            this._engine = p_engine;
-            this._canvas = p_canvas;
-            this._currentScene = p_scene;
-            this._sceneLoadedCallback = p_sceneLoadedCallback;
-            this._progressCallback = p_progressCallback;
-            this._additionnalRenderLoopLogicCallback = p_additionnalRenderLoopLogicCallback;
-            this._textureLoadingCallback = p_textureLoadingCallback;
-            this._startingProcessingFilesCallback = p_startingProcessingFilesCallback;
+        function FilesInput(engine, scene, sceneLoadedCallback, progressCallback, additionalRenderLoopLogicCallback, textureLoadingCallback, startingProcessingFilesCallback, onReloadCallback) {
+            this._engine = engine;
+            this._currentScene = scene;
+            this._sceneLoadedCallback = sceneLoadedCallback;
+            this._progressCallback = progressCallback;
+            this._additionalRenderLoopLogicCallback = additionalRenderLoopLogicCallback;
+            this._textureLoadingCallback = textureLoadingCallback;
+            this._startingProcessingFilesCallback = startingProcessingFilesCallback;
+            this._onReloadCallback = onReloadCallback;
         }
-        FilesInput.prototype.monitorElementForDragNDrop = function (p_elementToMonitor) {
+        FilesInput.prototype.monitorElementForDragNDrop = function (elementToMonitor) {
             var _this = this;
-            if (p_elementToMonitor) {
-                this._elementToMonitor = p_elementToMonitor;
-                this._elementToMonitor.addEventListener("dragenter", function (e) { _this.drag(e); }, false);
-                this._elementToMonitor.addEventListener("dragover", function (e) { _this.drag(e); }, false);
-                this._elementToMonitor.addEventListener("drop", function (e) { _this.drop(e); }, false);
+            if (elementToMonitor) {
+                this._elementToMonitor = elementToMonitor;
+                this._dragEnterHandler = function (e) { _this.drag(e); };
+                this._dragOverHandler = function (e) { _this.drag(e); };
+                this._dropHandler = function (e) { _this.drop(e); };
+                this._elementToMonitor.addEventListener("dragenter", this._dragEnterHandler, false);
+                this._elementToMonitor.addEventListener("dragover", this._dragOverHandler, false);
+                this._elementToMonitor.addEventListener("drop", this._dropHandler, false);
+            }
+        };
+        FilesInput.prototype.dispose = function () {
+            if (!this._elementToMonitor) {
+                return;
             }
+            this._elementToMonitor.removeEventListener("dragenter", this._dragEnterHandler);
+            this._elementToMonitor.removeEventListener("dragover", this._dragOverHandler);
+            this._elementToMonitor.removeEventListener("drop", this._dropHandler);
         };
         FilesInput.prototype.renderFunction = function () {
-            if (this._additionnalRenderLoopLogicCallback) {
-                this._additionnalRenderLoopLogicCallback();
+            if (this._additionalRenderLoopLogicCallback) {
+                this._additionalRenderLoopLogicCallback();
             }
             if (this._currentScene) {
                 if (this._textureLoadingCallback) {
@@ -49592,7 +49601,12 @@ var BABYLON;
                     FilesInput.FilesToLoad[name] = files[i];
                 }
             }
-            this.reload();
+            if (this._onReloadCallback) {
+                this._onReloadCallback(this._sceneFileToLoad);
+            }
+            else {
+                this.reload();
+            }
         };
         FilesInput.prototype.loadFiles = function (event) {
             var _this = this;
@@ -49657,7 +49671,6 @@ var BABYLON;
         };
         FilesInput.prototype.reload = function () {
             var _this = this;
-            var that = this;
             // If a ".babylon" file has been provided
             if (this._sceneFileToLoad) {
                 if (this._currentScene) {
@@ -49669,13 +49682,15 @@ var BABYLON;
                     this._currentScene.dispose();
                 }
                 BABYLON.SceneLoader.Load("file:", this._sceneFileToLoad, this._engine, function (newScene) {
-                    that._currentScene = newScene;
+                    _this._currentScene = newScene;
+                    if (_this._sceneLoadedCallback) {
+                        _this._sceneLoadedCallback(_this._sceneFileToLoad, _this._currentScene);
+                    }
                     // Wait for textures and shaders to be ready
-                    that._currentScene.executeWhenReady(function () {
-                        if (that._sceneLoadedCallback) {
-                            that._sceneLoadedCallback(_this._sceneFileToLoad, that._currentScene);
-                        }
-                        that._engine.runRenderLoop(function () { that.renderFunction(); });
+                    _this._currentScene.executeWhenReady(function () {
+                        _this._engine.runRenderLoop(function () {
+                            _this.renderFunction();
+                        });
                     });
                 }, function (progress) {
                     if (_this._progressCallback) {
@@ -49756,13 +49771,13 @@ var BABYLON;
         });
         Object.defineProperty(FramingBehavior.prototype, "positionY", {
             /**
-             * Gets the Y offset of the primary mesh from the camera's focus.
+             * Gets the Y offset of the target mesh from the camera's focus.
              */
             get: function () {
                 return this._positionY;
             },
             /**
-             * Sets the Y offset of the primary mesh from the camera's focus.
+             * Sets the Y offset of the target mesh from the camera's focus.
              */
             set: function (positionY) {
                 this._positionY = positionY;

sandbox/index.js

@@ -15,6 +15,7 @@
     var currentHelpCounter;
     var currentScene;
     var enableDebugLayer = false;
+    var currentPluginName;
 
     currentHelpCounter = localStorage.getItem("helpcounter");
 
@@ -24,6 +25,8 @@
 
     // Setting up some GLTF values
     BABYLON.SceneLoader.OnPluginActivatedObservable.add(function(plugin) {
+        currentPluginName = plugin.name;
+
         if (plugin.name !== "gltf") {
             return;
         }
@@ -90,7 +93,7 @@
         }
 
         // Environment
-        if (currentScene.loadingPluginName === "gltf") {
+        if (currentPluginName === "gltf") {
             var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("Assets/environment.dds", currentScene);
             hdrTexture.gammaSpace = false;
                         
@@ -121,7 +124,7 @@
         }
     };
 
-    filesInput = new BABYLON.FilesInput(engine, null, canvas, sceneLoaded);
+    filesInput = new BABYLON.FilesInput(engine, null, sceneLoaded);
     filesInput.monitorElementForDragNDrop(canvas);
 
     window.addEventListener("keydown", function (evt) {

src/Tools/babylon.filesInput.ts

@@ -1,47 +1,64 @@
 module BABYLON {
     export class FilesInput {
+        public static FilesToLoad: File[] = new Array<File>();
+
         private _engine: Engine;
         private _currentScene: Scene;
-        private _canvas: HTMLCanvasElement;
-        private _sceneLoadedCallback;
-        private _progressCallback;
-        private _additionnalRenderLoopLogicCallback;
-        private _textureLoadingCallback;
-        private _startingProcessingFilesCallback;
-        private _onReloadCallback;
+        private _sceneLoadedCallback: (sceneFile: File, scene: Scene) => void;
+        private _progressCallback: (progress: ProgressEvent) => void;
+        private _additionalRenderLoopLogicCallback: () => void;
+        private _textureLoadingCallback: (remaining: number) => void;
+        private _startingProcessingFilesCallback: () => void;
+        private _onReloadCallback: (sceneFile: File) => void;
         private _elementToMonitor: HTMLElement;
-        public static FilesToLoad: File[] = new Array();
 
         private _sceneFileToLoad: File;
         private _filesToLoad: File[];
 
-        /// Register to core BabylonJS object: engine, scene, rendering canvas, callback function when the scene will be loaded,
-        /// loading progress callback and optionnal addionnal logic to call in the rendering loop
-        constructor(p_engine: Engine, p_scene: Scene, p_canvas: HTMLCanvasElement, p_sceneLoadedCallback, p_progressCallback,
-            p_additionnalRenderLoopLogicCallback, p_textureLoadingCallback, p_startingProcessingFilesCallback, p_onReloadCallback) {
-            this._engine = p_engine;
-            this._canvas = p_canvas;
-            this._currentScene = p_scene;
-            this._sceneLoadedCallback = p_sceneLoadedCallback;
-            this._progressCallback = p_progressCallback;
-            this._additionnalRenderLoopLogicCallback = p_additionnalRenderLoopLogicCallback;
-            this._textureLoadingCallback = p_textureLoadingCallback;
-            this._startingProcessingFilesCallback = p_startingProcessingFilesCallback;
-            this._onReloadCallback = p_onReloadCallback;
+        constructor(engine: Engine, scene: Scene, sceneLoadedCallback: (sceneFile: File, scene: Scene) => void, progressCallback: (progress: ProgressEvent) => void, additionalRenderLoopLogicCallback: () => void, 
+                    textureLoadingCallback: (remaining: number) => void, startingProcessingFilesCallback: () => void, onReloadCallback: (sceneFile: File) => void) {
+            this._engine = engine;
+            this._currentScene = scene;
+
+            this._sceneLoadedCallback = sceneLoadedCallback;
+            this._progressCallback = progressCallback;
+            this._additionalRenderLoopLogicCallback = additionalRenderLoopLogicCallback;
+            this._textureLoadingCallback = textureLoadingCallback;
+            this._startingProcessingFilesCallback = startingProcessingFilesCallback;
+            this._onReloadCallback = onReloadCallback;
+        }
+
+        private _dragEnterHandler: (any) => void;
+        private _dragOverHandler: (any) => void;
+        private _dropHandler: (any) => void;
+
+        public monitorElementForDragNDrop(elementToMonitor: HTMLElement): void {
+            if (elementToMonitor) {
+                this._elementToMonitor = elementToMonitor;
+
+                this._dragEnterHandler = (e) => { this.drag(e); };
+                this._dragOverHandler = (e) => { this.drag(e); };
+                this._dropHandler = (e) => { this.drop(e); };
+
+                this._elementToMonitor.addEventListener("dragenter", this._dragEnterHandler, false);
+                this._elementToMonitor.addEventListener("dragover", this._dragOverHandler, false);
+                this._elementToMonitor.addEventListener("drop", this._dropHandler, false);
+            }
         }
 
-        public monitorElementForDragNDrop(p_elementToMonitor: HTMLElement): void {
-            if (p_elementToMonitor) {
-                this._elementToMonitor = p_elementToMonitor;
-                this._elementToMonitor.addEventListener("dragenter", (e) => { this.drag(e); }, false);
-                this._elementToMonitor.addEventListener("dragover", (e) => { this.drag(e); }, false);
-                this._elementToMonitor.addEventListener("drop", (e) => { this.drop(e); }, false);
+        public dispose() {
+            if (!this._elementToMonitor) {
+                return;
             }
+
+            this._elementToMonitor.removeEventListener("dragenter", this._dragEnterHandler);
+            this._elementToMonitor.removeEventListener("dragover", this._dragOverHandler);
+            this._elementToMonitor.removeEventListener("drop", this._dropHandler);            
         }
 
         private renderFunction(): void {
-            if (this._additionnalRenderLoopLogicCallback) {
-                this._additionnalRenderLoopLogicCallback();
+            if (this._additionalRenderLoopLogicCallback) {
+                this._additionalRenderLoopLogicCallback();
             }
 
             if (this._currentScene) {
@@ -185,7 +202,6 @@
         }
 
         public reload() {
-            var that = this;
             // If a ".babylon" file has been provided
             if (this._sceneFileToLoad) {
                 if (this._currentScene) {
@@ -198,16 +214,17 @@
                 }
 
                 SceneLoader.Load("file:", this._sceneFileToLoad, this._engine, (newScene) => {
-                    that._currentScene = newScene;
+                    this._currentScene = newScene;
 
-                    // Wait for textures and shaders to be ready
-                    that._currentScene.executeWhenReady(() => {
+                    if (this._sceneLoadedCallback) {
+                        this._sceneLoadedCallback(this._sceneFileToLoad, this._currentScene);
+                    }
 
-                        if (that._sceneLoadedCallback) {
-                            that._sceneLoadedCallback(this._sceneFileToLoad, that._currentScene);
-                        }
-                        that._engine.runRenderLoop(() => { that.renderFunction(); });
-                    });
+                    // Wait for textures and shaders to be ready
+                    this._currentScene.executeWhenReady(() => {                       
+                        this._engine.runRenderLoop(() => { 
+                            this.renderFunction(); });
+                        });
                 }, progress => {
                         if (this._progressCallback) {
                             this._progressCallback(progress);