Instances - step 3 (Support for RenderTargetTexture)

Babylon/Loading/babylon.sceneLoader.js

@@ -56,7 +56,7 @@ var BABYLON = BABYLON || {};
                 }
             };
 
-            if (sceneFilename.substr(0, 5) === "data:") {
+            if (sceneFilename.substr && sceneFilename.substr(0, 5) === "data:") {
                 // Direct load
                 importMeshFromData(sceneFilename.substr(5));
                 return;
@@ -95,7 +95,7 @@ var BABYLON = BABYLON || {};
                 }
             };
 
-            if (sceneFilename.substr(0, 5) === "data:") {
+            if (sceneFilename.substr && sceneFilename.substr(0, 5) === "data:") {
                 // Direct load
                 loadSceneFromData(sceneFilename.substr(5));
                 return;

Babylon/Materials/textures/babylon.renderTargetTexture.js

@@ -67,6 +67,8 @@ var BABYLON;
                 var mesh = this.renderList[meshIndex];
 
                 if (mesh && mesh.isEnabled() && mesh.isVisible && mesh.subMeshes) {
+                    mesh._activate(scene.getRenderId());
+
                     for (var subIndex = 0; subIndex < mesh.subMeshes.length; subIndex++) {
                         var subMesh = mesh.subMeshes[subIndex];
                         scene._activeVertices += subMesh.verticesCount;

Babylon/Materials/textures/babylon.renderTargetTexture.ts

@@ -70,6 +70,8 @@
                 var mesh = this.renderList[meshIndex];
 
                 if (mesh && mesh.isEnabled() && mesh.isVisible && mesh.subMeshes) {
+                    mesh._activate(scene.getRenderId());
+
                     for (var subIndex = 0; subIndex < mesh.subMeshes.length; subIndex++) {
                         var subMesh = mesh.subMeshes[subIndex];
                         scene._activeVertices += subMesh.verticesCount;

Babylon/Mesh/babylon.InstancedMesh.js

@@ -106,9 +106,12 @@ var BABYLON;
             this._updateBoundingInfo();
         };
 
+        InstancedMesh.prototype._activate = function (renderId) {
+            this.sourceMesh._registerInstanceForRenderId(this, renderId);
+        };
+
         InstancedMesh.prototype._syncSubMeshes = function () {
             this.releaseSubMeshes();
-            this.subMeshes = [];
             for (var index = 0; index < this._sourceMesh.subMeshes.length; index++) {
                 this._sourceMesh.subMeshes[index].clone(this, this._sourceMesh);
             }

Babylon/Mesh/babylon.InstancedMesh.ts

@@ -77,9 +77,12 @@
             this._updateBoundingInfo();
         }
 
+        public _activate(renderId: number): void {
+            this.sourceMesh._registerInstanceForRenderId(this, renderId);
+        }
+
         public _syncSubMeshes(): void {
             this.releaseSubMeshes();
-            this.subMeshes = [];
             for (var index = 0; index < this._sourceMesh.subMeshes.length; index++) {
                 this._sourceMesh.subMeshes[index].clone(this, this._sourceMesh);
             }

Babylon/Mesh/babylon.abstractMesh.js

@@ -107,6 +107,9 @@ var BABYLON;
             return this._boundingInfo;
         };
 
+        AbstractMesh.prototype._preActivate = function () {
+        };
+
         AbstractMesh.prototype._activate = function (renderId) {
             this._renderId = renderId;
         };
@@ -630,6 +633,8 @@ var BABYLON;
                 while (this.subMeshes.length) {
                     this.subMeshes[0].dispose();
                 }
+            } else {
+                this.subMeshes = new Array();
             }
         };
 

Babylon/Mesh/babylon.abstractMesh.ts

@@ -102,6 +102,9 @@
             return this._boundingInfo;
         }
 
+        public _preActivate(): void {
+        }
+
         public _activate(renderId: number): void {
             this._renderId = renderId;
         }
@@ -620,6 +623,8 @@
                 while (this.subMeshes.length) {
                     this.subMeshes[0].dispose();
                 }
+            } else {
+                this.subMeshes = new Array<SubMesh>();
             }
         }
 

Babylon/Mesh/babylon.mesh.js

@@ -14,7 +14,7 @@ var BABYLON;
             this.delayLoadState = BABYLON.Engine.DELAYLOADSTATE_NONE;
             this.instances = new Array();
             this._onBeforeRenderCallbacks = [];
-            this._visibleInstances = new BABYLON.SmartArray(32);
+            this._visibleInstances = {};
             this._renderIdForInstances = -1;
         }
         Mesh.prototype.getTotalVertices = function () {
@@ -88,9 +88,22 @@ var BABYLON;
         };
 
         // Methods
-        Mesh.prototype._activate = function (renderId) {
-            this._visibleInstances.reset();
-            _super.prototype._activate.call(this, renderId);
+        Mesh.prototype._preActivate = function () {
+            this._visibleInstances = null;
+        };
+
+        Mesh.prototype._registerInstanceForRenderId = function (instance, renderId) {
+            if (!this._visibleInstances) {
+                this._visibleInstances = {};
+                this._visibleInstances.defaultRenderId = renderId;
+                this._visibleInstances.selfDefaultRenderId = this._renderId;
+            }
+
+            if (!this._visibleInstances[renderId]) {
+                this._visibleInstances[renderId] = new Array();
+            }
+
+            this._visibleInstances[renderId].push(instance);
         };
 
         Mesh.prototype.refreshBoundingInfo = function () {
@@ -117,7 +130,6 @@ var BABYLON;
             }
 
             this.releaseSubMeshes();
-            this.subMeshes = [];
             return new BABYLON.SubMesh(0, 0, totalVertices, 0, this.getTotalIndices(), this);
         };
 
@@ -131,7 +143,6 @@ var BABYLON;
             var offset = 0;
 
             this.releaseSubMeshes();
-            this.subMeshes = [];
             for (var index = 0; index < count; index++) {
                 BABYLON.SubMesh.CreateFromIndices(0, offset, Math.min(subdivisionSize, totalIndices - offset), this);
 
@@ -235,16 +246,28 @@ var BABYLON;
             var scene = this.getScene();
 
             // Managing instances
-            if (this._visibleInstances.length) {
-                if (this._renderIdForInstances === scene.getRenderId()) {
-                    return;
+            if (this._visibleInstances) {
+                var currentRenderId = scene.getRenderId();
+                var visibleInstances = this._visibleInstances[currentRenderId];
+                var selfRenderId = this._renderId;
+
+                if (!visibleInstances && this._visibleInstances.defaultRenderId) {
+                    visibleInstances = this._visibleInstances[this._visibleInstances.defaultRenderId];
+                    currentRenderId = this._visibleInstances.defaultRenderId;
+                    selfRenderId = this._visibleInstances.selfDefaultRenderId;
                 }
 
-                if (scene.getRenderId() !== this._renderId) {
-                    renderSelf = false;
+                if (visibleInstances && visibleInstances.length) {
+                    if (this._renderIdForInstances === currentRenderId) {
+                        return;
+                    }
+
+                    if (currentRenderId !== selfRenderId) {
+                        renderSelf = false;
+                    }
                 }
+                this._renderIdForInstances = currentRenderId;
             }
-            this._renderIdForInstances = scene.getRenderId();
 
             // Checking geometry state
             if (!this._geometry || !this._geometry.getVertexBuffers() || !this._geometry.getIndexBuffer()) {
@@ -279,15 +302,17 @@ var BABYLON;
                 this._draw(subMesh, !wireFrame);
             }
 
-            for (var instanceIndex = 0; instanceIndex < this._visibleInstances.length; instanceIndex++) {
-                var instance = this._visibleInstances.data[instanceIndex];
+            if (visibleInstances) {
+                for (var instanceIndex = 0; instanceIndex < visibleInstances.length; instanceIndex++) {
+                    var instance = visibleInstances[instanceIndex];
 
-                // World
-                world = instance.getWorldMatrix();
-                effectiveMaterial.bind(world, this);
+                    // World
+                    world = instance.getWorldMatrix();
+                    effectiveMaterial.bind(world, this);
 
-                // Draw
-                this._draw(subMesh, !wireFrame);
+                    // Draw
+                    this._draw(subMesh, !wireFrame);
+                }
             }
 
             // Unbind
@@ -586,7 +611,6 @@ var BABYLON;
             }
 
             // Updating submeshes
-            this.subMeshes = [];
             this.releaseSubMeshes();
             for (var submeshIndex = 0; submeshIndex < previousSubmeshes.length; submeshIndex++) {
                 var previousOne = previousSubmeshes[submeshIndex];

Babylon/Mesh/babylon.mesh.ts

@@ -10,7 +10,7 @@
         private _onBeforeRenderCallbacks = [];
         private _delayInfo; //ANY
         private _delayLoadingFunction: (any, Mesh) => void;
-        public _visibleInstances = new SmartArray<InstancedMesh>(32);
+        public _visibleInstances: any = {};
         private _renderIdForInstances = -1;
 
         constructor(name: string, scene: Scene) {
@@ -24,7 +24,7 @@
             return this._geometry.getTotalVertices();
         }
 
-        public getVerticesData(kind:  string): number[] {
+        public getVerticesData(kind: string): number[] {
             if (!this._geometry) {
                 return null;
             }
@@ -88,9 +88,22 @@
         }
 
         // Methods  
-        public _activate(renderId: number): void {
-            this._visibleInstances.reset();
-            super._activate(renderId);
+        public _preActivate(): void {
+            this._visibleInstances = null;
+        }
+
+        public _registerInstanceForRenderId(instance: InstancedMesh, renderId: number) {
+            if (!this._visibleInstances) {
+                this._visibleInstances = {};
+                this._visibleInstances.defaultRenderId = renderId;
+                this._visibleInstances.selfDefaultRenderId = this._renderId;
+            }
+
+            if (!this._visibleInstances[renderId]) {
+                this._visibleInstances[renderId] = new Array<InstancedMesh>();
+            }
+
+            this._visibleInstances[renderId].push(instance);
         }
 
         public refreshBoundingInfo(): void {
@@ -117,7 +130,6 @@
             }
 
             this.releaseSubMeshes();
-            this.subMeshes = [];
             return new BABYLON.SubMesh(0, 0, totalVertices, 0, this.getTotalIndices(), this);
         }
 
@@ -131,7 +143,6 @@
             var offset = 0;
 
             this.releaseSubMeshes();
-            this.subMeshes = [];
             for (var index = 0; index < count; index++) {
                 BABYLON.SubMesh.CreateFromIndices(0, offset, Math.min(subdivisionSize, totalIndices - offset), this);
 
@@ -238,17 +249,29 @@
             var scene = this.getScene();
 
             // Managing instances
-            if (this._visibleInstances.length) {
-                if (this._renderIdForInstances === scene.getRenderId()) {
-                    return;
+            if (this._visibleInstances) {
+                var currentRenderId = scene.getRenderId();
+                var visibleInstances = this._visibleInstances[currentRenderId];
+                var selfRenderId = this._renderId;
+
+                if (!visibleInstances && this._visibleInstances.defaultRenderId) {
+                    visibleInstances = this._visibleInstances[this._visibleInstances.defaultRenderId];
+                    currentRenderId = this._visibleInstances.defaultRenderId;
+                    selfRenderId = this._visibleInstances.selfDefaultRenderId;
                 }
 
-                if (scene.getRenderId() !== this._renderId) {
-                    renderSelf = false;
-                }
+                if (visibleInstances && visibleInstances.length) {
+                    if (this._renderIdForInstances === currentRenderId) {
+                        return;
+                    }
 
+                    if (currentRenderId !== selfRenderId) {
+                        renderSelf = false;
+                    }
+
+                }
+                this._renderIdForInstances = currentRenderId;
             }
-            this._renderIdForInstances = scene.getRenderId();
 
             // Checking geometry state
             if (!this._geometry || !this._geometry.getVertexBuffers() || !this._geometry.getIndexBuffer()) {
@@ -283,15 +306,17 @@
                 this._draw(subMesh, !wireFrame);
             }
 
-            for (var instanceIndex = 0; instanceIndex < this._visibleInstances.length; instanceIndex++) {
-                var instance = this._visibleInstances.data[instanceIndex];
+            if (visibleInstances) {
+                for (var instanceIndex = 0; instanceIndex < visibleInstances.length; instanceIndex++) {
+                    var instance = visibleInstances[instanceIndex];
 
-                // World
-                world = instance.getWorldMatrix();
-                effectiveMaterial.bind(world, this);
+                    // World
+                    world = instance.getWorldMatrix();
+                    effectiveMaterial.bind(world, this);
 
-                // Draw
-                this._draw(subMesh, !wireFrame);
+                    // Draw
+                    this._draw(subMesh, !wireFrame);
+                }
             }
 
             // Unbind
@@ -430,7 +455,7 @@
             this.setVerticesData(temp, BABYLON.VertexBuffer.NormalKind, this.getVertexBuffer(BABYLON.VertexBuffer.NormalKind).isUpdatable());
         }
 
-     
+
 
         // Cache
         public _resetPointsArrayCache(): void {
@@ -454,7 +479,7 @@
             }
 
             return true;
-        }     
+        }
 
         // Clone
         public clone(name: string, newParent: Node, doNotCloneChildren?: boolean): Mesh {
@@ -598,7 +623,6 @@
             }
 
             // Updating submeshes
-            this.subMeshes = [];
             this.releaseSubMeshes();
             for (var submeshIndex = 0; submeshIndex < previousSubmeshes.length; submeshIndex++) {
                 var previousOne = previousSubmeshes[submeshIndex];
@@ -710,7 +734,7 @@
                 ground._isReady = true;
             };
 
-            Tools.LoadImage(url, onload, () => {}, scene.database);
+            Tools.LoadImage(url, onload, () => { }, scene.database);
 
             ground._isReady = false;
 
@@ -718,7 +742,7 @@
         }
 
         // Tools
-        public static MinMax(meshes: AbstractMesh[]): {min: Vector3; max: Vector3} {
+        public static MinMax(meshes: AbstractMesh[]): { min: Vector3; max: Vector3 } {
             var minVector = null;
             var maxVector = null;
             for (var i in meshes) {

Babylon/Tools/babylon.database.js

@@ -471,7 +471,7 @@ var BABYLON = BABYLON || {};
             xhr.open("GET", url, true);
 
             xhr.onprogress = progressCallback;
-
+            
             xhr.addEventListener("load", function () {
                 if (xhr.status === 200) {
                     // Blob as response (XHR2)

Babylon/Tools/babylon.filesInput.js

@@ -1,126 +1,130 @@
-"use strict";
-
-var BABYLON = BABYLON || {};
-
-(function () {
-    var that;
-
-    /// 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
-    BABYLON.FilesInput = function (p_engine, p_scene, p_canvas, p_sceneLoadedCallback,
-                                   p_progressCallback, p_additionnalRenderLoopLogicCallback, p_textureLoadingCallback, p_startingProcessingFilesCallback) {
-        that = this;
-        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;
-    };
-
-    // elementToMonitor is the HTML element that will listen to drag'n'drop events
-    // it could be the rendering canvas or whatever element on the page
-    BABYLON.FilesInput.prototype.monitorElementForDragNDrop = function (p_elementToMonitor) {
-        if (p_elementToMonitor) {
-            this.elementToMonitor = p_elementToMonitor;
-            this.elementToMonitor.addEventListener("dragenter", drag, false);
-            this.elementToMonitor.addEventListener("dragover", drag, false);
-            this.elementToMonitor.addEventListener("drop", drop, false);
+
+var BABYLON;
+(function (BABYLON) {
+    // We're mainly based on the logic defined into the FreeCamera code
+    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;
         }
-    };
+        FilesInput.prototype.monitorElementForDragNDrop = function (p_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);
+            }
+        };
 
-    function renderFunction() {
-        if (that.additionnalRenderLoopLogicCallback) {
-            that.additionnalRenderLoopLogicCallback();
-        }
+        FilesInput.prototype.renderFunction = function () {
+            if (this.additionnalRenderLoopLogicCallback) {
+                this.additionnalRenderLoopLogicCallback();
+            }
 
-        if (that.currentScene) {
-            if (that.textureLoadingCallback) {
-                var remaining = that.currentScene.getWaitingItemsCount();
+            if (this.currentScene) {
+                if (this.textureLoadingCallback) {
+                    var remaining = this.currentScene.getWaitingItemsCount();
 
-                if (remaining > 0) {
-                    that.textureLoadingCallback(remaining);
+                    if (remaining > 0) {
+                        this.textureLoadingCallback(remaining);
+                    }
                 }
+                this.currentScene.render();
             }
-            that.currentScene.render();
-        }
-    };
+        };
 
-    function drag(e) {
-        e.stopPropagation();
-        e.preventDefault();
-    };
+        FilesInput.prototype.drag = function (e) {
+            e.stopPropagation();
+            e.preventDefault();
+        };
 
-    function drop(eventDrop) {
-        eventDrop.stopPropagation();
-        eventDrop.preventDefault();
+        FilesInput.prototype.drop = function (eventDrop) {
+            eventDrop.stopPropagation();
+            eventDrop.preventDefault();
 
-        that.loadFiles(eventDrop);
-    };
+            this.loadFiles(eventDrop);
+        };
 
-    BABYLON.FilesInput.prototype.loadFiles = function (event) {
-        if (that.startingProcessingFilesCallback) that.startingProcessingFilesCallback();
+        FilesInput.prototype.loadFiles = function (event) {
+            var that = this;
+            if (this.startingProcessingFilesCallback)
+                this.startingProcessingFilesCallback();
 
-        var sceneFileToLoad;
-        var filesToLoad;
-        BABYLON.FilesTextures = {};
+            var sceneFileToLoad;
+            var filesToLoad;
 
-        // Handling data transfer via drag'n'drop
-        if (event && event.dataTransfer && event.dataTransfer.files) {
-            filesToLoad = event.dataTransfer.files;
-        }
-
-        // Handling files from input files
-        if (event && event.target && event.target.files) {
-            filesToLoad = event.target.files;
-        }
+            // Handling data transfer via drag'n'drop
+            if (event && event.dataTransfer && event.dataTransfer.files) {
+                filesToLoad = event.dataTransfer.files;
+            }
 
-        if (filesToLoad && filesToLoad.length > 0) {
-            for (var i = 0; i < filesToLoad.length; i++) {
-                if (filesToLoad[i].name.indexOf(".babylon") !== -1 && filesToLoad[i].name.indexOf(".manifest") === -1
-				 && filesToLoad[i].name.indexOf(".incremental") === -1 && filesToLoad[i].name.indexOf(".babylonmeshdata") === -1
-                 && filesToLoad[i].name.indexOf(".babylongeometrydata") === -1) {
-                    sceneFileToLoad = filesToLoad[i];
-                }
-                else {
-                    if (filesToLoad[i].type.indexOf("image/jpeg") == 0 || filesToLoad[i].type.indexOf("image/png") == 0) {
-                        BABYLON.FilesTextures[filesToLoad[i].name] = filesToLoad[i];
-                    }
-                }
+            // Handling files from input files
+            if (event && event.target && event.target.files) {
+                filesToLoad = event.target.files;
             }
 
-            // If a ".babylon" file has been provided
-            if (sceneFileToLoad) {
-                if (that.currentScene) {
-                    that.engine.stopRenderLoop();
-                    that.currentScene.dispose();
+            if (filesToLoad && filesToLoad.length > 0) {
+                for (var i = 0; i < filesToLoad.length; i++) {
+                    if (filesToLoad[i].name.indexOf(".babylon") !== -1 && filesToLoad[i].name.indexOf(".manifest") === -1 && filesToLoad[i].name.indexOf(".incremental") === -1 && filesToLoad[i].name.indexOf(".babylonmeshdata") === -1 && filesToLoad[i].name.indexOf(".babylongeometrydata") === -1) {
+                        sceneFileToLoad = filesToLoad[i];
+                    } else {
+                        if (filesToLoad[i].type.indexOf("image/jpeg") == 0 || filesToLoad[i].type.indexOf("image/png") == 0) {
+                            BABYLON.FilesInput.FilesTextures[filesToLoad[i].name] = filesToLoad[i];
+                        }
+                    }
                 }
 
-                BABYLON.SceneLoader.Load("file:", sceneFileToLoad, that.engine, function (newScene) {
-                    that.currentScene = newScene;
+                // If a ".babylon" file has been provided
+                if (sceneFileToLoad) {
+                    if (this.currentScene) {
+                        this.engine.stopRenderLoop();
+                        this.currentScene.dispose();
+                    }
 
-                    // Wait for textures and shaders to be ready
-                    that.currentScene.executeWhenReady(function () {
-                        // Attach camera to canvas inputs
-                        if (that.currentScene.activeCamera) {
-                            that.currentScene.activeCamera.attachControl(that.canvas);
-                        }
-                        if (that.sceneLoadedCallback) {
-                            that.sceneLoadedCallback(sceneFileToLoad, that.currentScene);
+                    BABYLON.SceneLoader.Load("file:", sceneFileToLoad, this.engine, function (newScene) {
+                        that.currentScene = newScene;
+
+                        // Wait for textures and shaders to be ready
+                        that.currentScene.executeWhenReady(function () {
+                            // Attach camera to canvas inputs
+                            if (that.currentScene.activeCamera) {
+                                that.currentScene.activeCamera.attachControl(that.canvas);
+                            }
+                            if (that.sceneLoadedCallback) {
+                                that.sceneLoadedCallback(sceneFileToLoad, that.currentScene);
+                            }
+                            that.engine.runRenderLoop(function () {
+                                that.renderFunction();
+                            });
+                        });
+                    }, function (progress) {
+                        if (that.progressCallback) {
+                            that.progressCallback(progress);
                         }
-                        that.engine.runRenderLoop(renderFunction);
                     });
-                }, function (progress) {
-                    if (that.progressCallback) {
-                        that.progressCallback(progress);
-                    }
-                });
-            }
-            else {
-                BABYLON.Tools.Error("Please provide a valid .babylon file.");
+                } else {
+                    BABYLON.Tools.Error("Please provide a valid .babylon file.");
+                }
             }
-        }
-    };
-})();
+        };
+        FilesInput.FilesTextures = new Array();
+        return FilesInput;
+    })();
+    BABYLON.FilesInput = FilesInput;
+})(BABYLON || (BABYLON = {}));
+//# sourceMappingURL=babylon.filesInput.js.map

Babylon/Tools/babylon.filesInput.ts

@@ -0,0 +1,138 @@
+// ANY
+declare module BABYLON {
+    export class SceneLoader {
+        static Load: (param1: any, param2: any, param3: any, param4: any, param5: any) => void;
+    }
+}
+
+module BABYLON {
+    // We're mainly based on the logic defined into the FreeCamera code
+    export class FilesInput {
+        private engine: BABYLON.Engine;
+        private currentScene: BABYLON.Scene;
+        private canvas: HTMLCanvasElement;
+        private sceneLoadedCallback;
+        private progressCallback;
+        private additionnalRenderLoopLogicCallback;
+        private textureLoadingCallback;
+        private startingProcessingFilesCallback;
+        private elementToMonitor: HTMLElement;
+        public static FilesTextures: any[] = new Array();
+
+        /// 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: BABYLON.Engine, p_scene: BABYLON.Scene, p_canvas: HTMLCanvasElement, 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;
+        }
+
+        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);
+            }
+        }
+
+        private renderFunction(): void {
+            if (this.additionnalRenderLoopLogicCallback) {
+                this.additionnalRenderLoopLogicCallback();
+            }
+
+            if (this.currentScene) {
+                if (this.textureLoadingCallback) {
+                    var remaining = this.currentScene.getWaitingItemsCount();
+
+                    if (remaining > 0) {
+                        this.textureLoadingCallback(remaining);
+                    }
+                }
+                this.currentScene.render();
+            }
+        }
+
+        private drag(e): void {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+
+        private drop(eventDrop): void {
+            eventDrop.stopPropagation();
+            eventDrop.preventDefault();
+
+            this.loadFiles(eventDrop);
+        }
+
+        private loadFiles(event): void {
+            var that = this;
+            if (this.startingProcessingFilesCallback) this.startingProcessingFilesCallback();
+
+            var sceneFileToLoad: File;
+            var filesToLoad: File[];
+
+            // Handling data transfer via drag'n'drop
+            if (event && event.dataTransfer && event.dataTransfer.files) {
+                filesToLoad = event.dataTransfer.files;
+            }
+
+            // Handling files from input files
+            if (event && event.target && event.target.files) {
+                filesToLoad = event.target.files;
+            }
+
+            if (filesToLoad && filesToLoad.length > 0) {
+                for (var i = 0; i < filesToLoad.length; i++) {
+                    if (filesToLoad[i].name.indexOf(".babylon") !== -1 && filesToLoad[i].name.indexOf(".manifest") === -1
+                        && filesToLoad[i].name.indexOf(".incremental") === -1 && filesToLoad[i].name.indexOf(".babylonmeshdata") === -1
+                        && filesToLoad[i].name.indexOf(".babylongeometrydata") === -1) {
+                        sceneFileToLoad = filesToLoad[i];
+                    }
+                    else {
+                        if (filesToLoad[i].type.indexOf("image/jpeg") == 0 || filesToLoad[i].type.indexOf("image/png") == 0) {
+                            BABYLON.FilesInput.FilesTextures[filesToLoad[i].name] = filesToLoad[i];
+                        }
+                    }
+                }
+
+                // If a ".babylon" file has been provided
+                if (sceneFileToLoad) {
+                    if (this.currentScene) {
+                        this.engine.stopRenderLoop();
+                        this.currentScene.dispose();
+                    }
+
+                    BABYLON.SceneLoader.Load("file:", sceneFileToLoad, this.engine, (newScene) => {
+                        that.currentScene = newScene;
+
+                        // Wait for textures and shaders to be ready
+                        that.currentScene.executeWhenReady(function () {
+                            // Attach camera to canvas inputs
+                            if (that.currentScene.activeCamera) {
+                                that.currentScene.activeCamera.attachControl(that.canvas);
+                            }
+                            if (that.sceneLoadedCallback) {
+                                that.sceneLoadedCallback(sceneFileToLoad, that.currentScene);
+                            }
+                            that.engine.runRenderLoop(function () { that.renderFunction() });
+                        });
+                    }, function (progress) {
+                        if (that.progressCallback) {
+                            that.progressCallback(progress);
+                            }
+                        });
+                }
+                else {
+                    BABYLON.Tools.Error("Please provide a valid .babylon file.");
+                }
+            }
+        }
+    }
+}

Babylon/Tools/babylon.tools.js

@@ -1,5 +1,8 @@
-var BABYLON;
+
+var BABYLON;
 (function (BABYLON) {
+    
+
     // Screenshots
     var screenshotCanvas;
 
@@ -162,7 +165,7 @@
             };
 
             //ANY database to do!
-            if (database && database.enableTexturesOffline) {
+            if (database && database.enableTexturesOffline && BABYLON.Database.isUASupportingBlobStorage) {
                 database.openAsync(loadFromIndexedDB, noIndexedDB);
             } else {
                 if (url.indexOf("file:") === -1) {
@@ -172,10 +175,10 @@
                         var textureName = url.substring(5);
                         var blobURL;
                         try  {
-                            blobURL = URL.createObjectURL(FilesTextures[textureName], { oneTimeOnly: true });
+                            blobURL = URL.createObjectURL(BABYLON.FilesInput.FilesTextures[textureName], { oneTimeOnly: true });
                         } catch (ex) {
                             // Chrome doesn't support oneTimeOnly parameter
-                            blobURL = URL.createObjectURL(FilesTextures[textureName]);
+                            blobURL = URL.createObjectURL(BABYLON.FilesInput.FilesTextures[textureName]);
                         }
                         img.src = blobURL;
                     } catch (e) {

Babylon/Tools/babylon.tools.tga.js

@@ -87,7 +87,7 @@ var BABYLON;
                 var palettes;
 
                 if (use_pal) {
-                    palettes = data.subarray(offset, offset += header.colormap_length * pixel_size);
+                    palettes = data.subarray(offset, offset += header.colormap_length * (header.colormap_size >> 3));
                 }
 
                 // Read LRE

Babylon/Tools/babylon.tools.tga.ts

@@ -100,7 +100,7 @@ module BABYLON.Internals {
             var palettes;
 
             if (use_pal) {
-                palettes = data.subarray(offset, offset += header.colormap_length * pixel_size);
+                palettes = data.subarray(offset, offset += header.colormap_length * (header.colormap_size >> 3));
             }
 
             // Read LRE

Babylon/Tools/babylon.tools.ts

@@ -1,6 +1,13 @@
-module BABYLON {
+// ANY
+declare module BABYLON {
+    export class Database {
+        static isUASupportingBlobStorage:  boolean;
+    }
+}
+
+module BABYLON {
 
-    declare var FilesTextures; //ANY
+    //class FilesTextures { } //ANY
 
     export interface IAnimatable {
         animations: Array<Animation>;
@@ -177,7 +184,7 @@
 
 
             //ANY database to do!
-            if (database && database.enableTexturesOffline) { //ANY } && BABYLON.Database.isUASupportingBlobStorage) {
+            if (database && database.enableTexturesOffline && BABYLON.Database.isUASupportingBlobStorage) { 
                 database.openAsync(loadFromIndexedDB, noIndexedDB);
             }
             else {
@@ -189,11 +196,11 @@
                         var textureName = url.substring(5);
                         var blobURL;
                         try {
-                            blobURL = URL.createObjectURL(FilesTextures[textureName], { oneTimeOnly: true });
+                            blobURL = URL.createObjectURL(BABYLON.FilesInput.FilesTextures[textureName], { oneTimeOnly: true });
                         }
                         catch (ex) {
                             // Chrome doesn't support oneTimeOnly parameter
-                            blobURL = URL.createObjectURL(FilesTextures[textureName]);
+                            blobURL = URL.createObjectURL(BABYLON.FilesInput.FilesTextures[textureName]);
                         }
                         img.src = blobURL;
                     }

Babylon/babylon.scene.js

@@ -597,11 +597,6 @@
                     this._activeVertices += subMesh.verticesCount;
                     this._renderingManager.dispatch(subMesh);
                 }
-
-                if (mesh instanceof BABYLON.InstancedMesh) {
-                    var instance = mesh;
-                    instance.sourceMesh._visibleInstances.pushNoDuplicate(instance);
-                }
             }
         };
 
@@ -638,11 +633,13 @@
 
                             mesh.computeWorldMatrix();
                             mesh._renderId = 0;
+                            mesh._preActivate();
                         }
 
                         if (mesh._renderId === this._renderId || (mesh._renderId === 0 && mesh.isEnabled() && mesh.isVisible && mesh.visibility > 0 && mesh.isInFrustum(this._frustumPlanes))) {
                             if (mesh._renderId === 0) {
                                 this._activeMeshes.push(mesh);
+                                mesh._activate(this._renderId);
                             }
                             mesh._renderId = this._renderId;
 
@@ -681,6 +678,7 @@
                     }
 
                     mesh.computeWorldMatrix();
+                    mesh._preActivate();
 
                     if (mesh.isEnabled() && mesh.isVisible && mesh.visibility > 0 && mesh.isInFrustum(this._frustumPlanes)) {
                         this._activeMeshes.push(mesh);
@@ -766,6 +764,7 @@
                     this._renderId++;
                     renderTarget.render();
                 }
+                this._renderId++;
             }
 
             if (this._renderTargets.length > 0) {

Babylon/babylon.scene.ts

@@ -667,11 +667,6 @@
                     this._activeVertices += subMesh.verticesCount;
                     this._renderingManager.dispatch(subMesh);
                 }
-
-                if (mesh instanceof InstancedMesh) {
-                    var instance = <InstancedMesh>mesh;
-                    instance.sourceMesh._visibleInstances.pushNoDuplicate(instance);
-                }
             }
         }
 
@@ -708,11 +703,13 @@
 
                             mesh.computeWorldMatrix();
                             mesh._renderId = 0;
+                            mesh._preActivate();
                         }
 
                         if (mesh._renderId === this._renderId || (mesh._renderId === 0 && mesh.isEnabled() && mesh.isVisible && mesh.visibility > 0 && mesh.isInFrustum(this._frustumPlanes))) {
                             if (mesh._renderId === 0) {
                                 this._activeMeshes.push(mesh);
+                                mesh._activate(this._renderId);
                             }
                             mesh._renderId = this._renderId;
 
@@ -751,6 +748,7 @@
                     }
 
                     mesh.computeWorldMatrix();
+                    mesh._preActivate();
 
                     if (mesh.isEnabled() && mesh.isVisible && mesh.visibility > 0 && mesh.isInFrustum(this._frustumPlanes)) {
                         this._activeMeshes.push(mesh);
@@ -838,6 +836,7 @@
                     this._renderId++;
                     renderTarget.render();
                 }
+                this._renderId++;
             }
 
             if (this._renderTargets.length > 0) { // Restore back buffer