Nightly

dist/preview release/babylon.max.js

@@ -86687,6 +86687,67 @@ var BABYLON;
 var BABYLON;
 (function (BABYLON) {
     /**
+     * Renders a layer on top of an existing scene
+     */
+    var UtilityLayerRenderer = /** @class */ (function () {
+        /**
+         * Instantiates a UtilityLayerRenderer
+         * @param originalScene the original scene that will be rendered on top of
+         */
+        function UtilityLayerRenderer(/** the original scene that will be rendered on top of */ originalScene) {
+            var _this = this;
+            this.originalScene = originalScene;
+            /**
+             *  If the utility layer should automatically be rendered on top of existing scene
+            */
+            this.shouldRender = true;
+            // Create scene which will be rendered in the foreground and remove it from being referenced by engine to avoid interfering with existing app
+            this.utilityLayerScene = new BABYLON.Scene(originalScene.getEngine());
+            originalScene.getEngine().scenes.pop();
+            // Render directly on top of existing scene without clearing
+            this.utilityLayerScene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
+            this.utilityLayerScene.autoClear = false;
+            this._afterRenderObserver = this.originalScene.onAfterRenderObservable.add(function () {
+                if (_this.shouldRender) {
+                    _this.render();
+                }
+            });
+            this._sceneDisposeObserver = this.originalScene.onDisposeObservable.add(function () {
+                _this.dispose();
+            });
+        }
+        /**
+         * Renders the utility layers scene on top of the original scene
+         */
+        UtilityLayerRenderer.prototype.render = function () {
+            this._updateCamera();
+            this.utilityLayerScene.render();
+        };
+        /**
+         * Disposes of the renderer
+         */
+        UtilityLayerRenderer.prototype.dispose = function () {
+            if (this._afterRenderObserver) {
+                this.originalScene.onAfterRenderObservable.remove(this._afterRenderObserver);
+            }
+            if (this._sceneDisposeObserver) {
+                this.originalScene.onDisposeObservable.remove(this._sceneDisposeObserver);
+            }
+            this.utilityLayerScene.dispose();
+        };
+        UtilityLayerRenderer.prototype._updateCamera = function () {
+            this.utilityLayerScene.activeCamera = this.originalScene.activeCamera;
+        };
+        return UtilityLayerRenderer;
+    }());
+    BABYLON.UtilityLayerRenderer = UtilityLayerRenderer;
+})(BABYLON || (BABYLON = {}));
+
+//# sourceMappingURL=babylon.utilityLayerRenderer.js.map
+
+var BABYLON;
+(function (BABYLON) {
+    /**
      * Defines a target to use with MorphTargetManager
      * @see http://doc.babylonjs.com/how_to/how_to_use_morphtargets
      */

dist/preview release/babylon.no-module.max.js

@@ -86654,6 +86654,67 @@ var BABYLON;
 var BABYLON;
 (function (BABYLON) {
     /**
+     * Renders a layer on top of an existing scene
+     */
+    var UtilityLayerRenderer = /** @class */ (function () {
+        /**
+         * Instantiates a UtilityLayerRenderer
+         * @param originalScene the original scene that will be rendered on top of
+         */
+        function UtilityLayerRenderer(/** the original scene that will be rendered on top of */ originalScene) {
+            var _this = this;
+            this.originalScene = originalScene;
+            /**
+             *  If the utility layer should automatically be rendered on top of existing scene
+            */
+            this.shouldRender = true;
+            // Create scene which will be rendered in the foreground and remove it from being referenced by engine to avoid interfering with existing app
+            this.utilityLayerScene = new BABYLON.Scene(originalScene.getEngine());
+            originalScene.getEngine().scenes.pop();
+            // Render directly on top of existing scene without clearing
+            this.utilityLayerScene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
+            this.utilityLayerScene.autoClear = false;
+            this._afterRenderObserver = this.originalScene.onAfterRenderObservable.add(function () {
+                if (_this.shouldRender) {
+                    _this.render();
+                }
+            });
+            this._sceneDisposeObserver = this.originalScene.onDisposeObservable.add(function () {
+                _this.dispose();
+            });
+        }
+        /**
+         * Renders the utility layers scene on top of the original scene
+         */
+        UtilityLayerRenderer.prototype.render = function () {
+            this._updateCamera();
+            this.utilityLayerScene.render();
+        };
+        /**
+         * Disposes of the renderer
+         */
+        UtilityLayerRenderer.prototype.dispose = function () {
+            if (this._afterRenderObserver) {
+                this.originalScene.onAfterRenderObservable.remove(this._afterRenderObserver);
+            }
+            if (this._sceneDisposeObserver) {
+                this.originalScene.onDisposeObservable.remove(this._sceneDisposeObserver);
+            }
+            this.utilityLayerScene.dispose();
+        };
+        UtilityLayerRenderer.prototype._updateCamera = function () {
+            this.utilityLayerScene.activeCamera = this.originalScene.activeCamera;
+        };
+        return UtilityLayerRenderer;
+    }());
+    BABYLON.UtilityLayerRenderer = UtilityLayerRenderer;
+})(BABYLON || (BABYLON = {}));
+
+//# sourceMappingURL=babylon.utilityLayerRenderer.js.map
+
+var BABYLON;
+(function (BABYLON) {
+    /**
      * Defines a target to use with MorphTargetManager
      * @see http://doc.babylonjs.com/how_to/how_to_use_morphtargets
      */

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

@@ -187,7 +187,7 @@ declare module BabylonViewer {
                 * The scene will automatically be cleared of the old models, if exist.
                 * @param model the configuration object (or URL) to load.
                 */
-            loadModel(model?: string | IModelConfiguration): Promise<ViewerModel>;
+            loadModel(model?: string | File | IModelConfiguration): Promise<ViewerModel>;
             /**
                 * Show the overlay and the defined sub-screen.
                 * Mainly used for help and errors
@@ -428,7 +428,7 @@ declare module BabylonViewer {
                 * @param clearScene should the scene be cleared before loading this model
                 * @returns a ViewerModel object that is not yet fully loaded.
                 */
-            initModel(modelConfig: string | IModelConfiguration, clearScene?: boolean): ViewerModel;
+            initModel(modelConfig: string | File | IModelConfiguration, clearScene?: boolean): ViewerModel;
             /**
                 * load a model using the provided configuration.
                 * This function, as opposed to initModel, will return a promise that resolves when the model is loaded, and rejects with error.
@@ -438,7 +438,7 @@ declare module BabylonViewer {
                 * @param clearScene Should the scene be cleared before loading the model
                 * @returns a Promise the fulfills when the model finished loading successfully.
                 */
-            loadModel(modelConfig: string | IModelConfiguration, clearScene?: boolean): Promise<ViewerModel>;
+            loadModel(modelConfig: string | File | IModelConfiguration, clearScene?: boolean): Promise<ViewerModel>;
             protected _initTelemetryEvents(): void;
             /**
                 * Injects all the spectre shader in the babylon shader store
@@ -1087,7 +1087,7 @@ declare module BabylonViewer {
             id?: string;
             url?: string;
             root?: string;
-            file?: string;
+            file?: string | File;
             loader?: string;
             position?: {
                     x: number;

dist/preview release/viewer/babylon.viewer.max.js

@@ -86775,6 +86775,67 @@ var BABYLON;
 var BABYLON;
 (function (BABYLON) {
     /**
+     * Renders a layer on top of an existing scene
+     */
+    var UtilityLayerRenderer = /** @class */ (function () {
+        /**
+         * Instantiates a UtilityLayerRenderer
+         * @param originalScene the original scene that will be rendered on top of
+         */
+        function UtilityLayerRenderer(/** the original scene that will be rendered on top of */ originalScene) {
+            var _this = this;
+            this.originalScene = originalScene;
+            /**
+             *  If the utility layer should automatically be rendered on top of existing scene
+            */
+            this.shouldRender = true;
+            // Create scene which will be rendered in the foreground and remove it from being referenced by engine to avoid interfering with existing app
+            this.utilityLayerScene = new BABYLON.Scene(originalScene.getEngine());
+            originalScene.getEngine().scenes.pop();
+            // Render directly on top of existing scene without clearing
+            this.utilityLayerScene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
+            this.utilityLayerScene.autoClear = false;
+            this._afterRenderObserver = this.originalScene.onAfterRenderObservable.add(function () {
+                if (_this.shouldRender) {
+                    _this.render();
+                }
+            });
+            this._sceneDisposeObserver = this.originalScene.onDisposeObservable.add(function () {
+                _this.dispose();
+            });
+        }
+        /**
+         * Renders the utility layers scene on top of the original scene
+         */
+        UtilityLayerRenderer.prototype.render = function () {
+            this._updateCamera();
+            this.utilityLayerScene.render();
+        };
+        /**
+         * Disposes of the renderer
+         */
+        UtilityLayerRenderer.prototype.dispose = function () {
+            if (this._afterRenderObserver) {
+                this.originalScene.onAfterRenderObservable.remove(this._afterRenderObserver);
+            }
+            if (this._sceneDisposeObserver) {
+                this.originalScene.onDisposeObservable.remove(this._sceneDisposeObserver);
+            }
+            this.utilityLayerScene.dispose();
+        };
+        UtilityLayerRenderer.prototype._updateCamera = function () {
+            this.utilityLayerScene.activeCamera = this.originalScene.activeCamera;
+        };
+        return UtilityLayerRenderer;
+    }());
+    BABYLON.UtilityLayerRenderer = UtilityLayerRenderer;
+})(BABYLON || (BABYLON = {}));
+
+//# sourceMappingURL=babylon.utilityLayerRenderer.js.map
+
+var BABYLON;
+(function (BABYLON) {
+    /**
      * Defines a target to use with MorphTargetManager
      * @see http://doc.babylonjs.com/how_to/how_to_use_morphtargets
      */
@@ -100642,8 +100703,24 @@ var DefaultViewer = /** @class */ (function (_super) {
                 _this.hideOverlayScreen();
             });
         }
+        if (this.configuration.templates && this.configuration.templates.viewer) {
+            if (this.configuration.templates.viewer.params && this.configuration.templates.viewer.params.enableDragAndDrop) {
+                var filesInput = new babylonjs_1.FilesInput(this.engine, this.sceneManager.scene, function () {
+                }, function () {
+                }, function () {
+                }, function () {
+                }, function () {
+                }, function (file) {
+                    _this.loadModel(file);
+                }, function () {
+                });
+                filesInput.monitorElementForDragNDrop(this.templateManager.getCanvas());
+            }
+        }
         return _super.prototype._onTemplatesLoaded.call(this);
     };
+    DefaultViewer.prototype._dropped = function (evt) {
+    };
     DefaultViewer.prototype._initNavbar = function () {
         var _this = this;
         var navbar = this.templateManager.getTemplate('navBar');
@@ -101300,26 +101377,34 @@ var AbstractViewer = /** @class */ (function () {
     AbstractViewer.prototype.initModel = function (modelConfig, clearScene) {
         var _this = this;
         if (clearScene === void 0) { clearScene = true; }
-        var modelUrl = (typeof modelConfig === 'string') ? modelConfig : modelConfig.url;
-        if (!modelUrl) {
-            throw new Error("no model url provided");
-        }
-        if (clearScene) {
-            this.sceneManager.clearScene(true, false);
-        }
         var configuration;
         if (typeof modelConfig === 'string') {
             configuration = {
                 url: modelConfig
             };
         }
+        else if (modelConfig instanceof File) {
+            configuration = {
+                file: modelConfig,
+                root: "file:"
+            };
+        }
         else {
             configuration = modelConfig;
         }
+        if (!configuration.url && !configuration.file) {
+            throw new Error("no model provided");
+        }
+        if (clearScene) {
+            this.sceneManager.clearScene(true, false);
+        }
         //merge the configuration for future models:
         if (this._configuration.model && typeof this._configuration.model === 'object') {
             var globalConfig = deepmerge({}, this._configuration.model);
             configuration = deepmerge(globalConfig, configuration);
+            if (modelConfig instanceof File) {
+                configuration.file = modelConfig;
+            }
         }
         else {
             this._configuration.model = configuration;
@@ -110990,7 +111075,10 @@ exports.defaultConfiguration = {
             }
         },
         viewer: {
-            html: __webpack_require__(17)
+            html: __webpack_require__(17),
+            params: {
+                enableDragAndDrop: false
+            }
         },
         navBar: {
             html: __webpack_require__(43),

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

@@ -187,7 +187,7 @@ declare module 'babylonjs-viewer/viewer/defaultViewer' {
                 * The scene will automatically be cleared of the old models, if exist.
                 * @param model the configuration object (or URL) to load.
                 */
-            loadModel(model?: string | IModelConfiguration): Promise<ViewerModel>;
+            loadModel(model?: string | File | IModelConfiguration): Promise<ViewerModel>;
             /**
                 * Show the overlay and the defined sub-screen.
                 * Mainly used for help and errors
@@ -428,7 +428,7 @@ declare module 'babylonjs-viewer/viewer/viewer' {
                 * @param clearScene should the scene be cleared before loading this model
                 * @returns a ViewerModel object that is not yet fully loaded.
                 */
-            initModel(modelConfig: string | IModelConfiguration, clearScene?: boolean): ViewerModel;
+            initModel(modelConfig: string | File | IModelConfiguration, clearScene?: boolean): ViewerModel;
             /**
                 * load a model using the provided configuration.
                 * This function, as opposed to initModel, will return a promise that resolves when the model is loaded, and rejects with error.
@@ -438,7 +438,7 @@ declare module 'babylonjs-viewer/viewer/viewer' {
                 * @param clearScene Should the scene be cleared before loading the model
                 * @returns a Promise the fulfills when the model finished loading successfully.
                 */
-            loadModel(modelConfig: string | IModelConfiguration, clearScene?: boolean): Promise<ViewerModel>;
+            loadModel(modelConfig: string | File | IModelConfiguration, clearScene?: boolean): Promise<ViewerModel>;
             protected _initTelemetryEvents(): void;
             /**
                 * Injects all the spectre shader in the babylon shader store
@@ -1087,7 +1087,7 @@ declare module 'babylonjs-viewer/configuration/configuration' {
             id?: string;
             url?: string;
             root?: string;
-            file?: string;
+            file?: string | File;
             loader?: string;
             position?: {
                     x: number;