@babylonjs/viewer 5.0.0 → 5.0.3

package/viewer/viewer.js

@@ -1,778 +1,778 @@
-import { Engine } from "@babylonjs/core/Engines/engine.js";
-import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader.js";
-import { RenderingManager } from "@babylonjs/core/Rendering/renderingManager.js";
-import { Tools } from "@babylonjs/core/Misc/tools.js";
-import { Effect } from "@babylonjs/core/Materials/effect.js";
-import { processConfigurationCompatibility } from "../configuration/configurationCompatibility.js";
-import { ConfigurationContainer } from "../configuration/configurationContainer.js";
-import { viewerGlobals } from "../configuration/globals.js";
-import { RenderOnlyConfigurationLoader } from "../configuration/renderOnlyLoader.js";
-// eslint-disable-next-line import/no-internal-modules
-import { deepmerge } from "../helper/index.js";
-import { ModelLoader } from "../loader/modelLoader.js";
-import { ObservablesManager } from "../managers/observablesManager.js";
-import { SceneManager } from "../managers/sceneManager.js";
-import { telemetryManager } from "../managers/telemetryManager.js";
-import { viewerManager } from "./viewerManager.js";
-/**
- * The AbstractViewer is the center of Babylon's viewer.
- * It is the basic implementation of the default viewer and is responsible of loading and showing the model and the templates
- */
-var AbstractViewer = /** @class */ (function () {
-    function AbstractViewer(containerElement, initialConfiguration) {
-        if (initialConfiguration === void 0) { initialConfiguration = {}; }
-        var _this = this;
-        this.containerElement = containerElement;
-        /**
-         * A flag that controls whether or not the render loop should be executed
-         */
-        this.runRenderLoop = true;
-        /**
-         * is this viewer disposed?
-         */
-        this._isDisposed = false;
-        this._hdToggled = false;
-        this._vrToggled = false;
-        this._vrModelRepositioning = 0;
-        this._vrScale = 1;
-        this._vrInit = false;
-        /**
-         * The resize function that will be registered with the window object
-         */
-        this._resize = function () {
-            // Only resize if Canvas is in the DOM
-            if (!_this.isCanvasInDOM()) {
-                return;
-            }
-            if (_this.canvas.clientWidth <= 0 || _this.canvas.clientHeight <= 0) {
-                return;
-            }
-            if (_this.configuration.engine && _this.configuration.engine.disableResize) {
-                return;
-            }
-            _this.engine.resize();
-        };
-        /**
-         * render loop that will be executed by the engine
-         * @param force
-         */
-        this._render = function (force) {
-            if (force === void 0) { force = false; }
-            if (force || (_this.sceneManager.scene && _this.sceneManager.scene.activeCamera)) {
-                if (_this.runRenderLoop || force) {
-                    _this.engine.performanceMonitor.enable();
-                    _this.sceneManager.scene.render();
-                    _this.onFrameRenderedObservable.notifyObservers(_this);
-                }
-                else {
-                    _this.engine.performanceMonitor.disable();
-                    // update camera instead of rendering
-                    _this.sceneManager.scene.activeCamera && _this.sceneManager.scene.activeCamera.update();
-                }
-            }
-        };
-        // if exists, use the container id. otherwise, generate a random string.
-        if (containerElement.id) {
-            this.baseId = containerElement.id;
-        }
-        else {
-            this.baseId = containerElement.id = "bjs" + Math.random().toString(32).substr(2, 8);
-        }
-        this._registeredOnBeforeRenderFunctions = [];
-        this._configurationContainer = new ConfigurationContainer();
-        this.observablesManager = new ObservablesManager();
-        this.modelLoader = new ModelLoader(this.observablesManager, this._configurationContainer);
-        RenderingManager.AUTOCLEAR = false;
-        // extend the configuration
-        this._configurationLoader = this.getConfigurationLoader();
-        this._configurationLoader.loadConfiguration(initialConfiguration, function (configuration) {
-            _this._onConfigurationLoaded(configuration);
-        });
-        this.onSceneInitObservable.add(function () {
-            _this.updateConfiguration();
-        });
-        this.onInitDoneObservable.add(function () {
-            _this._isInit = true;
-            _this.engine.runRenderLoop(_this._render);
-        });
-        this._prepareContainerElement();
-        // add this viewer to the viewer manager
-        viewerManager.addViewer(this);
-    }
-    Object.defineProperty(AbstractViewer.prototype, "onSceneInitObservable", {
-        // observables
-        /**
-         * Will notify when the scene was initialized
-         */
-        get: function () {
-            return this.observablesManager.onSceneInitObservable;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AbstractViewer.prototype, "onEngineInitObservable", {
-        /**
-         * will notify when the engine was initialized
-         */
-        get: function () {
-            return this.observablesManager.onEngineInitObservable;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AbstractViewer.prototype, "onModelAddedObservable", {
-        /**
-         * Will notify when a new model was added to the scene.
-         * Note that added does not necessarily mean loaded!
-         */
-        get: function () {
-            return this.observablesManager.onModelAddedObservable;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AbstractViewer.prototype, "onModelLoadedObservable", {
-        /**
-         * will notify after every model load
-         */
-        get: function () {
-            return this.observablesManager.onModelLoadedObservable;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AbstractViewer.prototype, "onModelLoadProgressObservable", {
-        /**
-         * will notify when any model notify of progress
-         */
-        get: function () {
-            return this.observablesManager.onModelLoadProgressObservable;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AbstractViewer.prototype, "onModelLoadErrorObservable", {
-        /**
-         * will notify when any model load failed.
-         */
-        get: function () {
-            return this.observablesManager.onModelLoadErrorObservable;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AbstractViewer.prototype, "onModelRemovedObservable", {
-        /**
-         * Will notify when a model was removed from the scene;
-         */
-        get: function () {
-            return this.observablesManager.onModelRemovedObservable;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AbstractViewer.prototype, "onLoaderInitObservable", {
-        /**
-         * will notify when a new loader was initialized.
-         * Used mainly to know when a model starts loading.
-         */
-        get: function () {
-            return this.observablesManager.onLoaderInitObservable;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AbstractViewer.prototype, "onInitDoneObservable", {
-        /**
-         * Observers registered here will be executed when the entire load process has finished.
-         */
-        get: function () {
-            return this.observablesManager.onViewerInitDoneObservable;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AbstractViewer.prototype, "onFrameRenderedObservable", {
-        /**
-         * Functions added to this observable will be executed on each frame rendered.
-         */
-        get: function () {
-            return this.observablesManager.onFrameRenderedObservable;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AbstractViewer.prototype, "onEnteringVRObservable", {
-        /**
-         * Observers registered here will be executed when VR more is entered.
-         */
-        get: function () {
-            return this.observablesManager.onEnteringVRObservable;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AbstractViewer.prototype, "onExitingVRObservable", {
-        /**
-         * Observers registered here will be executed when VR mode is exited.
-         */
-        get: function () {
-            return this.observablesManager.onExitingVRObservable;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AbstractViewer.prototype, "canvas", {
-        /**
-         * The (single) canvas of this viewer
-         */
-        get: function () {
-            return this._canvas;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AbstractViewer.prototype, "configurationContainer", {
-        get: function () {
-            return this._configurationContainer;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    AbstractViewer.prototype.getConfigurationLoader = function () {
-        return new RenderOnlyConfigurationLoader();
-    };
-    /**
-     * get the baseId of this viewer
-     */
-    AbstractViewer.prototype.getBaseId = function () {
-        return this.baseId;
-    };
-    /**
-     * Do we have a canvas to render on, and is it a part of the scene
-     */
-    AbstractViewer.prototype.isCanvasInDOM = function () {
-        return !!this._canvas && !!this._canvas.parentElement;
-    };
-    Object.defineProperty(AbstractViewer.prototype, "renderInBackground", {
-        /**
-         * Is the engine currently set to render even when the page is in background
-         */
-        get: function () {
-            return this.engine && this.engine.renderEvenInBackground;
-        },
-        /**
-         * Set the viewer's background rendering flag.
-         */
-        set: function (value) {
-            if (this.engine) {
-                this.engine.renderEvenInBackground = value;
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AbstractViewer.prototype, "configuration", {
-        /**
-         * Get the configuration object. This is a reference only.
-         * The configuration can ONLY be updated using the updateConfiguration function.
-         * changing this object will have no direct effect on the scene.
-         */
-        get: function () {
-            return this._configurationContainer.configuration;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * force resizing the engine.
-     */
-    AbstractViewer.prototype.forceResize = function () {
-        this._resize();
-    };
-    AbstractViewer.prototype.toggleHD = function () {
-        this._hdToggled = !this._hdToggled;
-        var scale = this._hdToggled ? Math.max(0.5, 1 / (window.devicePixelRatio || 2)) : 1;
-        this.engine.setHardwareScalingLevel(scale);
-    };
-    AbstractViewer.prototype.toggleVR = function () {
-        if (!this._vrInit) {
-            this._initVR();
-        }
-        if (this.sceneManager.vrHelper && !this.sceneManager.vrHelper.isInVRMode) {
-            // make sure the floor is set
-            if (this.sceneManager.environmentHelper && this.sceneManager.environmentHelper.ground) {
-                this.sceneManager.vrHelper.addFloorMesh(this.sceneManager.environmentHelper.ground);
-            }
-            this._vrToggled = true;
-            this.sceneManager.vrHelper.enterVR();
-            // position the vr camera to be in front of the object or wherever the user has configured it to be
-            if (this.sceneManager.vrHelper.currentVRCamera && this.sceneManager.vrHelper.currentVRCamera !== this.sceneManager.camera) {
-                if (this.configuration.vr && this.configuration.vr.cameraPosition !== undefined) {
-                    this.sceneManager.vrHelper.currentVRCamera.position.copyFromFloats(this.configuration.vr.cameraPosition.x, this.configuration.vr.cameraPosition.y, this.configuration.vr.cameraPosition.z);
-                }
-                else {
-                    this.sceneManager.vrHelper.currentVRCamera.position.copyFromFloats(0, this.sceneManager.vrHelper.currentVRCamera.position.y, -1);
-                }
-                this.sceneManager.vrHelper.currentVRCamera.rotationQuaternion &&
-                    this.sceneManager.vrHelper.currentVRCamera.rotationQuaternion.copyFromFloats(0, 0, 0, 1);
-                // set the height of the model to be what the user has configured, or floating by default
-                if (this.configuration.vr && this.configuration.vr.modelHeightCorrection !== undefined) {
-                    if (typeof this.configuration.vr.modelHeightCorrection === "number") {
-                        this._vrModelRepositioning = this.configuration.vr.modelHeightCorrection;
-                    }
-                    else if (this.configuration.vr.modelHeightCorrection) {
-                        this._vrModelRepositioning = this.sceneManager.vrHelper.currentVRCamera.position.y / 2;
-                    }
-                    else {
-                        this._vrModelRepositioning = 0;
-                    }
-                }
-                // scale the model
-                if (this.sceneManager.models.length) {
-                    var boundingVectors = this.sceneManager.models[0].rootMesh.getHierarchyBoundingVectors();
-                    var sizeVec = boundingVectors.max.subtract(boundingVectors.min);
-                    var maxDimension = Math.max(sizeVec.x, sizeVec.y, sizeVec.z);
-                    this._vrScale = 1 / maxDimension;
-                    if (this.configuration.vr && this.configuration.vr.objectScaleFactor) {
-                        this._vrScale *= this.configuration.vr.objectScaleFactor;
-                    }
-                    this.sceneManager.models[0].rootMesh.scaling.scaleInPlace(this._vrScale);
-                    // reposition the object to "float" in front of the user
-                    this.sceneManager.models[0].rootMesh.position.y += this._vrModelRepositioning;
-                    this.sceneManager.models[0].rootMesh.rotationQuaternion = null;
-                }
-                // scale the environment to match the model
-                if (this.sceneManager.environmentHelper) {
-                    this.sceneManager.environmentHelper.ground && this.sceneManager.environmentHelper.ground.scaling.scaleInPlace(this._vrScale);
-                    this.sceneManager.environmentHelper.skybox && this.sceneManager.environmentHelper.skybox.scaling.scaleInPlace(this._vrScale);
-                }
-                // post processing
-                if (this.sceneManager.defaultRenderingPipelineEnabled && this.sceneManager.defaultRenderingPipeline) {
-                    this.sceneManager.defaultRenderingPipeline.imageProcessingEnabled = false;
-                    this.sceneManager.defaultRenderingPipeline.prepare();
-                }
-            }
-            else {
-                this._vrModelRepositioning = 0;
-            }
-        }
-        else {
-            if (this.sceneManager.vrHelper) {
-                this.sceneManager.vrHelper.exitVR();
-            }
-        }
-    };
-    AbstractViewer.prototype._initVR = function () {
-        var _this = this;
-        if (this.sceneManager.vrHelper) {
-            this.observablesManager.onExitingVRObservable.add(function () {
-                if (_this._vrToggled) {
-                    _this._vrToggled = false;
-                    // undo the scaling of the model
-                    if (_this.sceneManager.models.length) {
-                        _this.sceneManager.models[0].rootMesh.scaling.scaleInPlace(1 / _this._vrScale);
-                        _this.sceneManager.models[0].rootMesh.position.y -= _this._vrModelRepositioning;
-                    }
-                    // undo the scaling of the environment
-                    if (_this.sceneManager.environmentHelper) {
-                        _this.sceneManager.environmentHelper.ground && _this.sceneManager.environmentHelper.ground.scaling.scaleInPlace(1 / _this._vrScale);
-                        _this.sceneManager.environmentHelper.skybox && _this.sceneManager.environmentHelper.skybox.scaling.scaleInPlace(1 / _this._vrScale);
-                    }
-                    // post processing
-                    if (_this.sceneManager.defaultRenderingPipelineEnabled && _this.sceneManager.defaultRenderingPipeline) {
-                        _this.sceneManager.defaultRenderingPipeline.imageProcessingEnabled = true;
-                        _this.sceneManager.defaultRenderingPipeline.prepare();
-                    }
-                    // clear set height and width
-                    _this.canvas.removeAttribute("height");
-                    _this.canvas.removeAttribute("width");
-                    _this.engine.resize();
-                }
-            });
-        }
-        this._vrInit = true;
-    };
-    AbstractViewer.prototype._onConfigurationLoaded = function (configuration) {
-        var _this = this;
-        this._configurationContainer.configuration = deepmerge(this.configuration || {}, configuration);
-        if (this.configuration.observers) {
-            this._configureObservers(this.configuration.observers);
-        }
-        // TODO remove this after testing, as this is done in the updateConfiguration as well.
-        if (this.configuration.loaderPlugins) {
-            Object.keys(this.configuration.loaderPlugins).forEach(function (name) {
-                if (_this.configuration.loaderPlugins && _this.configuration.loaderPlugins[name]) {
-                    _this.modelLoader.addPlugin(name);
-                }
-            });
-        }
-        this.observablesManager.onViewerInitStartedObservable.notifyObservers(this);
-    };
-    /**
-     * Force a single render loop execution.
-     */
-    AbstractViewer.prototype.forceRender = function () {
-        this._render(true);
-    };
-    /**
-     * Takes a screenshot of the scene and returns it as a base64 encoded png.
-     * @param callback optional callback that will be triggered when screenshot is done.
-     * @param width Optional screenshot width (default to 512).
-     * @param height Optional screenshot height (default to 512).
-     * @returns a promise with the screenshot data
-     */
-    AbstractViewer.prototype.takeScreenshot = function (callback, width, height) {
-        var _this = this;
-        if (width === void 0) { width = 0; }
-        if (height === void 0) { height = 0; }
-        width = width || this.canvas.clientWidth;
-        height = height || this.canvas.clientHeight;
-        // Create the screenshot
-        return new Promise(function (resolve, reject) {
-            try {
-                Tools.CreateScreenshot(_this.engine, _this.sceneManager.camera, { width: width, height: height }, function (data) {
-                    if (callback) {
-                        callback(data);
-                    }
-                    resolve(data);
-                });
-            }
-            catch (e) {
-                reject(e);
-            }
-        });
-    };
-    /**
-     * Update the current viewer configuration with new values.
-     * Only provided information will be updated, old configuration values will be kept.
-     * If this.configuration was manually changed, you can trigger this function with no parameters,
-     * and the entire configuration will be updated.
-     * @param newConfiguration the partial configuration to update or a URL to a JSON holding the updated configuration
-     *
-     */
-    AbstractViewer.prototype.updateConfiguration = function (newConfiguration) {
-        var _this = this;
-        if (newConfiguration === void 0) { newConfiguration = this.configuration; }
-        if (typeof newConfiguration === "string") {
-            Tools.LoadFile(newConfiguration, function (data) {
-                try {
-                    var newData = JSON.parse(data.toString());
-                    return _this.updateConfiguration(newData);
-                }
-                catch (e) {
-                    console.log("Error parsing file " + newConfiguration);
-                }
-            }, undefined, undefined, undefined, function (error) {
-                console.log("Error parsing file " + newConfiguration, error);
-            });
-        }
-        else {
-            //backcompat
-            processConfigurationCompatibility(newConfiguration);
-            // update this.configuration with the new data
-            this._configurationContainer.configuration = deepmerge(this.configuration || {}, newConfiguration);
-            this.sceneManager.updateConfiguration(newConfiguration);
-            // observers in configuration
-            if (newConfiguration.observers) {
-                this._configureObservers(newConfiguration.observers);
-            }
-            if (newConfiguration.loaderPlugins) {
-                Object.keys(newConfiguration.loaderPlugins).forEach(function (name) {
-                    if (newConfiguration.loaderPlugins && newConfiguration.loaderPlugins[name]) {
-                        _this.modelLoader.addPlugin(name);
-                    }
-                });
-            }
-        }
-    };
-    /**
-     * this is used to register native functions using the configuration object.
-     * This will configure the observers.
-     * @param observersConfiguration observers configuration
-     */
-    AbstractViewer.prototype._configureObservers = function (observersConfiguration) {
-        if (observersConfiguration.onEngineInit) {
-            this.onEngineInitObservable.add(window[observersConfiguration.onEngineInit]);
-        }
-        else {
-            if (observersConfiguration.onEngineInit === "" && this.configuration.observers && this.configuration.observers.onEngineInit) {
-                this.onEngineInitObservable.removeCallback(window[this.configuration.observers.onEngineInit]);
-            }
-        }
-        if (observersConfiguration.onSceneInit) {
-            this.onSceneInitObservable.add(window[observersConfiguration.onSceneInit]);
-        }
-        else {
-            if (observersConfiguration.onSceneInit === "" && this.configuration.observers && this.configuration.observers.onSceneInit) {
-                this.onSceneInitObservable.removeCallback(window[this.configuration.observers.onSceneInit]);
-            }
-        }
-        if (observersConfiguration.onModelLoaded) {
-            this.onModelLoadedObservable.add(window[observersConfiguration.onModelLoaded]);
-        }
-        else {
-            if (observersConfiguration.onModelLoaded === "" && this.configuration.observers && this.configuration.observers.onModelLoaded) {
-                this.onModelLoadedObservable.removeCallback(window[this.configuration.observers.onModelLoaded]);
-            }
-        }
-    };
-    /**
-     * Dispose the entire viewer including the scene and the engine
-     */
-    AbstractViewer.prototype.dispose = function () {
-        if (this._isDisposed) {
-            return;
-        }
-        window.removeEventListener("resize", this._resize);
-        if (this.sceneManager) {
-            if (this.sceneManager.scene && this.sceneManager.scene.activeCamera) {
-                this.sceneManager.scene.activeCamera.detachControl();
-            }
-            this.sceneManager.dispose();
-        }
-        this._fpsTimeoutInterval && clearInterval(this._fpsTimeoutInterval);
-        this.observablesManager.dispose();
-        this.modelLoader.dispose();
-        if (this.engine) {
-            this.engine.dispose();
-        }
-        viewerManager.removeViewer(this);
-        this._isDisposed = true;
-    };
-    /**
-     * This function will execute when the HTML templates finished initializing.
-     * It should initialize the engine and continue execution.
-     *
-     * @returns {Promise<AbstractViewer>} The viewer object will be returned after the object was loaded.
-     */
-    AbstractViewer.prototype._onTemplatesLoaded = function () {
-        return Promise.resolve(this);
-    };
-    /**
-     * This will force the creation of an engine and a scene.
-     * It will also load a model if preconfigured.
-     * But first - it will load the extendible onTemplateLoaded()!
-     */
-    AbstractViewer.prototype._onTemplateLoaded = function () {
-        var _this = this;
-        // check if viewer was disposed right after created
-        if (this._isDisposed) {
-            return Promise.reject("viewer was disposed");
-        }
-        return this._onTemplatesLoaded().then(function () {
-            var autoLoad = typeof _this.configuration.model === "string" || (_this.configuration.model && _this.configuration.model.url);
-            return _this._initEngine()
-                .then(function (engine) {
-                return _this.onEngineInitObservable.notifyObserversWithPromise(engine);
-            })
-                .then(function () {
-                _this._initTelemetryEvents();
-                if (autoLoad) {
-                    return _this.loadModel(_this.configuration.model)
-                        .catch(function () { })
-                        .then(function () {
-                        return _this.sceneManager.scene;
-                    });
-                }
-                else {
-                    return _this.sceneManager.scene || _this.sceneManager.initScene(_this.configuration.scene);
-                }
-            })
-                .then(function () {
-                return _this.onInitDoneObservable.notifyObserversWithPromise(_this);
-            })
-                .catch(function (e) {
-                Tools.Warn(e.toString());
-                return _this;
-            });
-        });
-    };
-    /**
-     * Initialize the engine. Returns a promise in case async calls are needed.
-     *
-     * @protected
-     * @returns {Promise<Engine>}
-     * @memberof Viewer
-     */
-    AbstractViewer.prototype._initEngine = function () {
-        // init custom shaders
-        this._injectCustomShaders();
-        //let canvasElement = this.templateManager.getCanvas();
-        if (!this.canvas) {
-            return Promise.reject("Canvas element not found!");
-        }
-        var config = this.configuration.engine || {};
-        // TDO enable further configuration
-        // check for webgl2 support, force-disable if needed.
-        if (viewerGlobals.disableWebGL2Support) {
-            config.engineOptions = config.engineOptions || {};
-            config.engineOptions.disableWebGL2Support = true;
-        }
-        if (this.configuration["3dCommerceCertified"]) {
-            config.engineOptions = config.engineOptions || {};
-            config.engineOptions.forceSRGBBufferSupportState = true;
-            var loader = SceneLoader.GetPluginForExtension(".gltf");
-            if (loader) {
-                loader.transparencyAsCoverage = true;
-            }
-            SceneLoader.OnPluginActivatedObservable.add(function (plugin) {
-                if (plugin.name === "gltf") {
-                    var loader_1 = plugin;
-                    loader_1.transparencyAsCoverage = true;
-                }
-            });
-        }
-        this.engine = new Engine(this.canvas, !!config.antialiasing, config.engineOptions);
-        if (!config.disableResize) {
-            window.addEventListener("resize", this._resize);
-        }
-        if (this.configuration.engine) {
-            if (this.configuration.engine.adaptiveQuality) {
-                var scale = Math.max(0.5, 1 / (window.devicePixelRatio || 2));
-                this.engine.setHardwareScalingLevel(scale);
-            }
-            if (this.configuration.engine.hdEnabled) {
-                this.toggleHD();
-            }
-        }
-        // create a new template manager for this viewer
-        this.sceneManager = new SceneManager(this.engine, this._configurationContainer, this.observablesManager);
-        return Promise.resolve(this.engine);
-    };
-    /**
-     * Initialize a model loading. The returned object (a ViewerModel object) will be loaded in the background.
-     * The difference between this and loadModel is that loadModel will fulfill the promise when the model finished loading.
-     *
-     * @param modelConfig model configuration to use when loading the model.
-     * @param clearScene should the scene be cleared before loading this model
-     * @returns a ViewerModel object that is not yet fully loaded.
-     */
-    AbstractViewer.prototype.initModel = function (modelConfig, clearScene) {
-        var _this = this;
-        if (clearScene === void 0) { clearScene = true; }
-        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;
-        }
-        this._isLoading = true;
-        var model = this.modelLoader.load(configuration);
-        this.lastUsedLoader = model.loader;
-        model.onLoadErrorObservable.add(function (errorObject) {
-            _this.onModelLoadErrorObservable.notifyObserversWithPromise(errorObject);
-        });
-        model.onLoadProgressObservable.add(function (progressEvent) {
-            _this.onModelLoadProgressObservable.notifyObserversWithPromise(progressEvent);
-        });
-        this.onLoaderInitObservable.notifyObserversWithPromise(this.lastUsedLoader);
-        model.onLoadedObservable.add(function () {
-            _this._isLoading = false;
-        });
-        return model;
-    };
-    /**
-     * 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.
-     * If you want to attach to the observables of the model, use initModel instead.
-     *
-     * @param modelConfig the model configuration or URL to load.
-     * @param clearScene Should the scene be cleared before loading the model
-     * @returns a Promise the fulfills when the model finished loading successfully.
-     */
-    AbstractViewer.prototype.loadModel = function (modelConfig, clearScene) {
-        var _this = this;
-        if (clearScene === void 0) { clearScene = true; }
-        if (this._isLoading) {
-            // We can decide here whether or not to cancel the lst load, but the developer can do that.
-            return Promise.reject("another model is curently being loaded.");
-        }
-        return Promise.resolve(this.sceneManager.scene)
-            .then(function (scene) {
-            if (!scene) {
-                return _this.sceneManager.initScene(_this.configuration.scene);
-            }
-            return scene;
-        })
-            .then(function () {
-            var model = _this.initModel(modelConfig, clearScene);
-            return new Promise(function (resolve, reject) {
-                // at this point, configuration.model is an object, not a string
-                model.onLoadedObservable.add(function () {
-                    resolve(model);
-                });
-                model.onLoadErrorObservable.add(function (error) {
-                    reject(error);
-                });
-            });
-        });
-    };
-    AbstractViewer.prototype._initTelemetryEvents = function () {
-        var _this = this;
-        telemetryManager.broadcast("Engine Capabilities", this.baseId, this.engine.getCaps());
-        telemetryManager.broadcast("Platform Details", this.baseId, {
-            userAgent: navigator.userAgent,
-            platform: navigator.platform,
-        });
-        telemetryManager.flushWebGLErrors(this.engine, this.baseId);
-        var trackFPS = function () {
-            telemetryManager.broadcast("Current FPS", _this.baseId, { fps: _this.engine.getFps() });
-        };
-        trackFPS();
-        // Track the FPS again after 60 seconds
-        this._fpsTimeoutInterval = window.setInterval(trackFPS, 60 * 1000);
-    };
-    /**
-     * Injects all the spectre shader in the babylon shader store
-     */
-    AbstractViewer.prototype._injectCustomShaders = function () {
-        var customShaders = this.configuration.customShaders;
-        // Inject all the spectre shader in the babylon shader store.
-        if (!customShaders) {
-            return;
-        }
-        if (customShaders.shaders) {
-            Object.keys(customShaders.shaders).forEach(function (key) {
-                // typescript considers a callback "unsafe", so... '!'
-                Effect.ShadersStore[key] = customShaders.shaders[key];
-            });
-        }
-        if (customShaders.includes) {
-            Object.keys(customShaders.includes).forEach(function (key) {
-                // typescript considers a callback "unsafe", so... '!'
-                Effect.IncludesShadersStore[key] = customShaders.includes[key];
-            });
-        }
-    };
-    return AbstractViewer;
-}());
-export { AbstractViewer };
+import { Engine } from "@babylonjs/core/Engines/engine.js";
+import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader.js";
+import { RenderingManager } from "@babylonjs/core/Rendering/renderingManager.js";
+import { Tools } from "@babylonjs/core/Misc/tools.js";
+import { Effect } from "@babylonjs/core/Materials/effect.js";
+import { processConfigurationCompatibility } from "../configuration/configurationCompatibility.js";
+import { ConfigurationContainer } from "../configuration/configurationContainer.js";
+import { viewerGlobals } from "../configuration/globals.js";
+import { RenderOnlyConfigurationLoader } from "../configuration/renderOnlyLoader.js";
+// eslint-disable-next-line import/no-internal-modules
+import { deepmerge } from "../helper/index.js";
+import { ModelLoader } from "../loader/modelLoader.js";
+import { ObservablesManager } from "../managers/observablesManager.js";
+import { SceneManager } from "../managers/sceneManager.js";
+import { telemetryManager } from "../managers/telemetryManager.js";
+import { viewerManager } from "./viewerManager.js";
+/**
+ * The AbstractViewer is the center of Babylon's viewer.
+ * It is the basic implementation of the default viewer and is responsible of loading and showing the model and the templates
+ */
+var AbstractViewer = /** @class */ (function () {
+    function AbstractViewer(containerElement, initialConfiguration) {
+        if (initialConfiguration === void 0) { initialConfiguration = {}; }
+        var _this = this;
+        this.containerElement = containerElement;
+        /**
+         * A flag that controls whether or not the render loop should be executed
+         */
+        this.runRenderLoop = true;
+        /**
+         * is this viewer disposed?
+         */
+        this._isDisposed = false;
+        this._hdToggled = false;
+        this._vrToggled = false;
+        this._vrModelRepositioning = 0;
+        this._vrScale = 1;
+        this._vrInit = false;
+        /**
+         * The resize function that will be registered with the window object
+         */
+        this._resize = function () {
+            // Only resize if Canvas is in the DOM
+            if (!_this.isCanvasInDOM()) {
+                return;
+            }
+            if (_this.canvas.clientWidth <= 0 || _this.canvas.clientHeight <= 0) {
+                return;
+            }
+            if (_this.configuration.engine && _this.configuration.engine.disableResize) {
+                return;
+            }
+            _this.engine.resize();
+        };
+        /**
+         * render loop that will be executed by the engine
+         * @param force
+         */
+        this._render = function (force) {
+            if (force === void 0) { force = false; }
+            if (force || (_this.sceneManager.scene && _this.sceneManager.scene.activeCamera)) {
+                if (_this.runRenderLoop || force) {
+                    _this.engine.performanceMonitor.enable();
+                    _this.sceneManager.scene.render();
+                    _this.onFrameRenderedObservable.notifyObservers(_this);
+                }
+                else {
+                    _this.engine.performanceMonitor.disable();
+                    // update camera instead of rendering
+                    _this.sceneManager.scene.activeCamera && _this.sceneManager.scene.activeCamera.update();
+                }
+            }
+        };
+        // if exists, use the container id. otherwise, generate a random string.
+        if (containerElement.id) {
+            this.baseId = containerElement.id;
+        }
+        else {
+            this.baseId = containerElement.id = "bjs" + Math.random().toString(32).substr(2, 8);
+        }
+        this._registeredOnBeforeRenderFunctions = [];
+        this._configurationContainer = new ConfigurationContainer();
+        this.observablesManager = new ObservablesManager();
+        this.modelLoader = new ModelLoader(this.observablesManager, this._configurationContainer);
+        RenderingManager.AUTOCLEAR = false;
+        // extend the configuration
+        this._configurationLoader = this.getConfigurationLoader();
+        this._configurationLoader.loadConfiguration(initialConfiguration, function (configuration) {
+            _this._onConfigurationLoaded(configuration);
+        });
+        this.onSceneInitObservable.add(function () {
+            _this.updateConfiguration();
+        });
+        this.onInitDoneObservable.add(function () {
+            _this._isInit = true;
+            _this.engine.runRenderLoop(_this._render);
+        });
+        this._prepareContainerElement();
+        // add this viewer to the viewer manager
+        viewerManager.addViewer(this);
+    }
+    Object.defineProperty(AbstractViewer.prototype, "onSceneInitObservable", {
+        // observables
+        /**
+         * Will notify when the scene was initialized
+         */
+        get: function () {
+            return this.observablesManager.onSceneInitObservable;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AbstractViewer.prototype, "onEngineInitObservable", {
+        /**
+         * will notify when the engine was initialized
+         */
+        get: function () {
+            return this.observablesManager.onEngineInitObservable;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AbstractViewer.prototype, "onModelAddedObservable", {
+        /**
+         * Will notify when a new model was added to the scene.
+         * Note that added does not necessarily mean loaded!
+         */
+        get: function () {
+            return this.observablesManager.onModelAddedObservable;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AbstractViewer.prototype, "onModelLoadedObservable", {
+        /**
+         * will notify after every model load
+         */
+        get: function () {
+            return this.observablesManager.onModelLoadedObservable;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AbstractViewer.prototype, "onModelLoadProgressObservable", {
+        /**
+         * will notify when any model notify of progress
+         */
+        get: function () {
+            return this.observablesManager.onModelLoadProgressObservable;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AbstractViewer.prototype, "onModelLoadErrorObservable", {
+        /**
+         * will notify when any model load failed.
+         */
+        get: function () {
+            return this.observablesManager.onModelLoadErrorObservable;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AbstractViewer.prototype, "onModelRemovedObservable", {
+        /**
+         * Will notify when a model was removed from the scene;
+         */
+        get: function () {
+            return this.observablesManager.onModelRemovedObservable;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AbstractViewer.prototype, "onLoaderInitObservable", {
+        /**
+         * will notify when a new loader was initialized.
+         * Used mainly to know when a model starts loading.
+         */
+        get: function () {
+            return this.observablesManager.onLoaderInitObservable;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AbstractViewer.prototype, "onInitDoneObservable", {
+        /**
+         * Observers registered here will be executed when the entire load process has finished.
+         */
+        get: function () {
+            return this.observablesManager.onViewerInitDoneObservable;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AbstractViewer.prototype, "onFrameRenderedObservable", {
+        /**
+         * Functions added to this observable will be executed on each frame rendered.
+         */
+        get: function () {
+            return this.observablesManager.onFrameRenderedObservable;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AbstractViewer.prototype, "onEnteringVRObservable", {
+        /**
+         * Observers registered here will be executed when VR more is entered.
+         */
+        get: function () {
+            return this.observablesManager.onEnteringVRObservable;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AbstractViewer.prototype, "onExitingVRObservable", {
+        /**
+         * Observers registered here will be executed when VR mode is exited.
+         */
+        get: function () {
+            return this.observablesManager.onExitingVRObservable;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AbstractViewer.prototype, "canvas", {
+        /**
+         * The (single) canvas of this viewer
+         */
+        get: function () {
+            return this._canvas;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AbstractViewer.prototype, "configurationContainer", {
+        get: function () {
+            return this._configurationContainer;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    AbstractViewer.prototype.getConfigurationLoader = function () {
+        return new RenderOnlyConfigurationLoader();
+    };
+    /**
+     * get the baseId of this viewer
+     */
+    AbstractViewer.prototype.getBaseId = function () {
+        return this.baseId;
+    };
+    /**
+     * Do we have a canvas to render on, and is it a part of the scene
+     */
+    AbstractViewer.prototype.isCanvasInDOM = function () {
+        return !!this._canvas && !!this._canvas.parentElement;
+    };
+    Object.defineProperty(AbstractViewer.prototype, "renderInBackground", {
+        /**
+         * Is the engine currently set to render even when the page is in background
+         */
+        get: function () {
+            return this.engine && this.engine.renderEvenInBackground;
+        },
+        /**
+         * Set the viewer's background rendering flag.
+         */
+        set: function (value) {
+            if (this.engine) {
+                this.engine.renderEvenInBackground = value;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AbstractViewer.prototype, "configuration", {
+        /**
+         * Get the configuration object. This is a reference only.
+         * The configuration can ONLY be updated using the updateConfiguration function.
+         * changing this object will have no direct effect on the scene.
+         */
+        get: function () {
+            return this._configurationContainer.configuration;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * force resizing the engine.
+     */
+    AbstractViewer.prototype.forceResize = function () {
+        this._resize();
+    };
+    AbstractViewer.prototype.toggleHD = function () {
+        this._hdToggled = !this._hdToggled;
+        var scale = this._hdToggled ? Math.max(0.5, 1 / (window.devicePixelRatio || 2)) : 1;
+        this.engine.setHardwareScalingLevel(scale);
+    };
+    AbstractViewer.prototype.toggleVR = function () {
+        if (!this._vrInit) {
+            this._initVR();
+        }
+        if (this.sceneManager.vrHelper && !this.sceneManager.vrHelper.isInVRMode) {
+            // make sure the floor is set
+            if (this.sceneManager.environmentHelper && this.sceneManager.environmentHelper.ground) {
+                this.sceneManager.vrHelper.addFloorMesh(this.sceneManager.environmentHelper.ground);
+            }
+            this._vrToggled = true;
+            this.sceneManager.vrHelper.enterVR();
+            // position the vr camera to be in front of the object or wherever the user has configured it to be
+            if (this.sceneManager.vrHelper.currentVRCamera && this.sceneManager.vrHelper.currentVRCamera !== this.sceneManager.camera) {
+                if (this.configuration.vr && this.configuration.vr.cameraPosition !== undefined) {
+                    this.sceneManager.vrHelper.currentVRCamera.position.copyFromFloats(this.configuration.vr.cameraPosition.x, this.configuration.vr.cameraPosition.y, this.configuration.vr.cameraPosition.z);
+                }
+                else {
+                    this.sceneManager.vrHelper.currentVRCamera.position.copyFromFloats(0, this.sceneManager.vrHelper.currentVRCamera.position.y, -1);
+                }
+                this.sceneManager.vrHelper.currentVRCamera.rotationQuaternion &&
+                    this.sceneManager.vrHelper.currentVRCamera.rotationQuaternion.copyFromFloats(0, 0, 0, 1);
+                // set the height of the model to be what the user has configured, or floating by default
+                if (this.configuration.vr && this.configuration.vr.modelHeightCorrection !== undefined) {
+                    if (typeof this.configuration.vr.modelHeightCorrection === "number") {
+                        this._vrModelRepositioning = this.configuration.vr.modelHeightCorrection;
+                    }
+                    else if (this.configuration.vr.modelHeightCorrection) {
+                        this._vrModelRepositioning = this.sceneManager.vrHelper.currentVRCamera.position.y / 2;
+                    }
+                    else {
+                        this._vrModelRepositioning = 0;
+                    }
+                }
+                // scale the model
+                if (this.sceneManager.models.length) {
+                    var boundingVectors = this.sceneManager.models[0].rootMesh.getHierarchyBoundingVectors();
+                    var sizeVec = boundingVectors.max.subtract(boundingVectors.min);
+                    var maxDimension = Math.max(sizeVec.x, sizeVec.y, sizeVec.z);
+                    this._vrScale = 1 / maxDimension;
+                    if (this.configuration.vr && this.configuration.vr.objectScaleFactor) {
+                        this._vrScale *= this.configuration.vr.objectScaleFactor;
+                    }
+                    this.sceneManager.models[0].rootMesh.scaling.scaleInPlace(this._vrScale);
+                    // reposition the object to "float" in front of the user
+                    this.sceneManager.models[0].rootMesh.position.y += this._vrModelRepositioning;
+                    this.sceneManager.models[0].rootMesh.rotationQuaternion = null;
+                }
+                // scale the environment to match the model
+                if (this.sceneManager.environmentHelper) {
+                    this.sceneManager.environmentHelper.ground && this.sceneManager.environmentHelper.ground.scaling.scaleInPlace(this._vrScale);
+                    this.sceneManager.environmentHelper.skybox && this.sceneManager.environmentHelper.skybox.scaling.scaleInPlace(this._vrScale);
+                }
+                // post processing
+                if (this.sceneManager.defaultRenderingPipelineEnabled && this.sceneManager.defaultRenderingPipeline) {
+                    this.sceneManager.defaultRenderingPipeline.imageProcessingEnabled = false;
+                    this.sceneManager.defaultRenderingPipeline.prepare();
+                }
+            }
+            else {
+                this._vrModelRepositioning = 0;
+            }
+        }
+        else {
+            if (this.sceneManager.vrHelper) {
+                this.sceneManager.vrHelper.exitVR();
+            }
+        }
+    };
+    AbstractViewer.prototype._initVR = function () {
+        var _this = this;
+        if (this.sceneManager.vrHelper) {
+            this.observablesManager.onExitingVRObservable.add(function () {
+                if (_this._vrToggled) {
+                    _this._vrToggled = false;
+                    // undo the scaling of the model
+                    if (_this.sceneManager.models.length) {
+                        _this.sceneManager.models[0].rootMesh.scaling.scaleInPlace(1 / _this._vrScale);
+                        _this.sceneManager.models[0].rootMesh.position.y -= _this._vrModelRepositioning;
+                    }
+                    // undo the scaling of the environment
+                    if (_this.sceneManager.environmentHelper) {
+                        _this.sceneManager.environmentHelper.ground && _this.sceneManager.environmentHelper.ground.scaling.scaleInPlace(1 / _this._vrScale);
+                        _this.sceneManager.environmentHelper.skybox && _this.sceneManager.environmentHelper.skybox.scaling.scaleInPlace(1 / _this._vrScale);
+                    }
+                    // post processing
+                    if (_this.sceneManager.defaultRenderingPipelineEnabled && _this.sceneManager.defaultRenderingPipeline) {
+                        _this.sceneManager.defaultRenderingPipeline.imageProcessingEnabled = true;
+                        _this.sceneManager.defaultRenderingPipeline.prepare();
+                    }
+                    // clear set height and width
+                    _this.canvas.removeAttribute("height");
+                    _this.canvas.removeAttribute("width");
+                    _this.engine.resize();
+                }
+            });
+        }
+        this._vrInit = true;
+    };
+    AbstractViewer.prototype._onConfigurationLoaded = function (configuration) {
+        var _this = this;
+        this._configurationContainer.configuration = deepmerge(this.configuration || {}, configuration);
+        if (this.configuration.observers) {
+            this._configureObservers(this.configuration.observers);
+        }
+        // TODO remove this after testing, as this is done in the updateConfiguration as well.
+        if (this.configuration.loaderPlugins) {
+            Object.keys(this.configuration.loaderPlugins).forEach(function (name) {
+                if (_this.configuration.loaderPlugins && _this.configuration.loaderPlugins[name]) {
+                    _this.modelLoader.addPlugin(name);
+                }
+            });
+        }
+        this.observablesManager.onViewerInitStartedObservable.notifyObservers(this);
+    };
+    /**
+     * Force a single render loop execution.
+     */
+    AbstractViewer.prototype.forceRender = function () {
+        this._render(true);
+    };
+    /**
+     * Takes a screenshot of the scene and returns it as a base64 encoded png.
+     * @param callback optional callback that will be triggered when screenshot is done.
+     * @param width Optional screenshot width (default to 512).
+     * @param height Optional screenshot height (default to 512).
+     * @returns a promise with the screenshot data
+     */
+    AbstractViewer.prototype.takeScreenshot = function (callback, width, height) {
+        var _this = this;
+        if (width === void 0) { width = 0; }
+        if (height === void 0) { height = 0; }
+        width = width || this.canvas.clientWidth;
+        height = height || this.canvas.clientHeight;
+        // Create the screenshot
+        return new Promise(function (resolve, reject) {
+            try {
+                Tools.CreateScreenshot(_this.engine, _this.sceneManager.camera, { width: width, height: height }, function (data) {
+                    if (callback) {
+                        callback(data);
+                    }
+                    resolve(data);
+                });
+            }
+            catch (e) {
+                reject(e);
+            }
+        });
+    };
+    /**
+     * Update the current viewer configuration with new values.
+     * Only provided information will be updated, old configuration values will be kept.
+     * If this.configuration was manually changed, you can trigger this function with no parameters,
+     * and the entire configuration will be updated.
+     * @param newConfiguration the partial configuration to update or a URL to a JSON holding the updated configuration
+     *
+     */
+    AbstractViewer.prototype.updateConfiguration = function (newConfiguration) {
+        var _this = this;
+        if (newConfiguration === void 0) { newConfiguration = this.configuration; }
+        if (typeof newConfiguration === "string") {
+            Tools.LoadFile(newConfiguration, function (data) {
+                try {
+                    var newData = JSON.parse(data.toString());
+                    return _this.updateConfiguration(newData);
+                }
+                catch (e) {
+                    console.log("Error parsing file " + newConfiguration);
+                }
+            }, undefined, undefined, undefined, function (error) {
+                console.log("Error parsing file " + newConfiguration, error);
+            });
+        }
+        else {
+            //backcompat
+            processConfigurationCompatibility(newConfiguration);
+            // update this.configuration with the new data
+            this._configurationContainer.configuration = deepmerge(this.configuration || {}, newConfiguration);
+            this.sceneManager.updateConfiguration(newConfiguration);
+            // observers in configuration
+            if (newConfiguration.observers) {
+                this._configureObservers(newConfiguration.observers);
+            }
+            if (newConfiguration.loaderPlugins) {
+                Object.keys(newConfiguration.loaderPlugins).forEach(function (name) {
+                    if (newConfiguration.loaderPlugins && newConfiguration.loaderPlugins[name]) {
+                        _this.modelLoader.addPlugin(name);
+                    }
+                });
+            }
+        }
+    };
+    /**
+     * this is used to register native functions using the configuration object.
+     * This will configure the observers.
+     * @param observersConfiguration observers configuration
+     */
+    AbstractViewer.prototype._configureObservers = function (observersConfiguration) {
+        if (observersConfiguration.onEngineInit) {
+            this.onEngineInitObservable.add(window[observersConfiguration.onEngineInit]);
+        }
+        else {
+            if (observersConfiguration.onEngineInit === "" && this.configuration.observers && this.configuration.observers.onEngineInit) {
+                this.onEngineInitObservable.removeCallback(window[this.configuration.observers.onEngineInit]);
+            }
+        }
+        if (observersConfiguration.onSceneInit) {
+            this.onSceneInitObservable.add(window[observersConfiguration.onSceneInit]);
+        }
+        else {
+            if (observersConfiguration.onSceneInit === "" && this.configuration.observers && this.configuration.observers.onSceneInit) {
+                this.onSceneInitObservable.removeCallback(window[this.configuration.observers.onSceneInit]);
+            }
+        }
+        if (observersConfiguration.onModelLoaded) {
+            this.onModelLoadedObservable.add(window[observersConfiguration.onModelLoaded]);
+        }
+        else {
+            if (observersConfiguration.onModelLoaded === "" && this.configuration.observers && this.configuration.observers.onModelLoaded) {
+                this.onModelLoadedObservable.removeCallback(window[this.configuration.observers.onModelLoaded]);
+            }
+        }
+    };
+    /**
+     * Dispose the entire viewer including the scene and the engine
+     */
+    AbstractViewer.prototype.dispose = function () {
+        if (this._isDisposed) {
+            return;
+        }
+        window.removeEventListener("resize", this._resize);
+        if (this.sceneManager) {
+            if (this.sceneManager.scene && this.sceneManager.scene.activeCamera) {
+                this.sceneManager.scene.activeCamera.detachControl();
+            }
+            this.sceneManager.dispose();
+        }
+        this._fpsTimeoutInterval && clearInterval(this._fpsTimeoutInterval);
+        this.observablesManager.dispose();
+        this.modelLoader.dispose();
+        if (this.engine) {
+            this.engine.dispose();
+        }
+        viewerManager.removeViewer(this);
+        this._isDisposed = true;
+    };
+    /**
+     * This function will execute when the HTML templates finished initializing.
+     * It should initialize the engine and continue execution.
+     *
+     * @returns {Promise<AbstractViewer>} The viewer object will be returned after the object was loaded.
+     */
+    AbstractViewer.prototype._onTemplatesLoaded = function () {
+        return Promise.resolve(this);
+    };
+    /**
+     * This will force the creation of an engine and a scene.
+     * It will also load a model if preconfigured.
+     * But first - it will load the extendible onTemplateLoaded()!
+     */
+    AbstractViewer.prototype._onTemplateLoaded = function () {
+        var _this = this;
+        // check if viewer was disposed right after created
+        if (this._isDisposed) {
+            return Promise.reject("viewer was disposed");
+        }
+        return this._onTemplatesLoaded().then(function () {
+            var autoLoad = typeof _this.configuration.model === "string" || (_this.configuration.model && _this.configuration.model.url);
+            return _this._initEngine()
+                .then(function (engine) {
+                return _this.onEngineInitObservable.notifyObserversWithPromise(engine);
+            })
+                .then(function () {
+                _this._initTelemetryEvents();
+                if (autoLoad) {
+                    return _this.loadModel(_this.configuration.model)
+                        .catch(function () { })
+                        .then(function () {
+                        return _this.sceneManager.scene;
+                    });
+                }
+                else {
+                    return _this.sceneManager.scene || _this.sceneManager.initScene(_this.configuration.scene);
+                }
+            })
+                .then(function () {
+                return _this.onInitDoneObservable.notifyObserversWithPromise(_this);
+            })
+                .catch(function (e) {
+                Tools.Warn(e.toString());
+                return _this;
+            });
+        });
+    };
+    /**
+     * Initialize the engine. Returns a promise in case async calls are needed.
+     *
+     * @protected
+     * @returns {Promise<Engine>}
+     * @memberof Viewer
+     */
+    AbstractViewer.prototype._initEngine = function () {
+        // init custom shaders
+        this._injectCustomShaders();
+        //let canvasElement = this.templateManager.getCanvas();
+        if (!this.canvas) {
+            return Promise.reject("Canvas element not found!");
+        }
+        var config = this.configuration.engine || {};
+        // TDO enable further configuration
+        // check for webgl2 support, force-disable if needed.
+        if (viewerGlobals.disableWebGL2Support) {
+            config.engineOptions = config.engineOptions || {};
+            config.engineOptions.disableWebGL2Support = true;
+        }
+        if (this.configuration["3dCommerceCertified"]) {
+            config.engineOptions = config.engineOptions || {};
+            config.engineOptions.forceSRGBBufferSupportState = true;
+            var loader = SceneLoader.GetPluginForExtension(".gltf");
+            if (loader) {
+                loader.transparencyAsCoverage = true;
+            }
+            SceneLoader.OnPluginActivatedObservable.add(function (plugin) {
+                if (plugin.name === "gltf") {
+                    var loader_1 = plugin;
+                    loader_1.transparencyAsCoverage = true;
+                }
+            });
+        }
+        this.engine = new Engine(this.canvas, !!config.antialiasing, config.engineOptions);
+        if (!config.disableResize) {
+            window.addEventListener("resize", this._resize);
+        }
+        if (this.configuration.engine) {
+            if (this.configuration.engine.adaptiveQuality) {
+                var scale = Math.max(0.5, 1 / (window.devicePixelRatio || 2));
+                this.engine.setHardwareScalingLevel(scale);
+            }
+            if (this.configuration.engine.hdEnabled) {
+                this.toggleHD();
+            }
+        }
+        // create a new template manager for this viewer
+        this.sceneManager = new SceneManager(this.engine, this._configurationContainer, this.observablesManager);
+        return Promise.resolve(this.engine);
+    };
+    /**
+     * Initialize a model loading. The returned object (a ViewerModel object) will be loaded in the background.
+     * The difference between this and loadModel is that loadModel will fulfill the promise when the model finished loading.
+     *
+     * @param modelConfig model configuration to use when loading the model.
+     * @param clearScene should the scene be cleared before loading this model
+     * @returns a ViewerModel object that is not yet fully loaded.
+     */
+    AbstractViewer.prototype.initModel = function (modelConfig, clearScene) {
+        var _this = this;
+        if (clearScene === void 0) { clearScene = true; }
+        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;
+        }
+        this._isLoading = true;
+        var model = this.modelLoader.load(configuration);
+        this.lastUsedLoader = model.loader;
+        model.onLoadErrorObservable.add(function (errorObject) {
+            _this.onModelLoadErrorObservable.notifyObserversWithPromise(errorObject);
+        });
+        model.onLoadProgressObservable.add(function (progressEvent) {
+            _this.onModelLoadProgressObservable.notifyObserversWithPromise(progressEvent);
+        });
+        this.onLoaderInitObservable.notifyObserversWithPromise(this.lastUsedLoader);
+        model.onLoadedObservable.add(function () {
+            _this._isLoading = false;
+        });
+        return model;
+    };
+    /**
+     * 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.
+     * If you want to attach to the observables of the model, use initModel instead.
+     *
+     * @param modelConfig the model configuration or URL to load.
+     * @param clearScene Should the scene be cleared before loading the model
+     * @returns a Promise the fulfills when the model finished loading successfully.
+     */
+    AbstractViewer.prototype.loadModel = function (modelConfig, clearScene) {
+        var _this = this;
+        if (clearScene === void 0) { clearScene = true; }
+        if (this._isLoading) {
+            // We can decide here whether or not to cancel the lst load, but the developer can do that.
+            return Promise.reject("another model is curently being loaded.");
+        }
+        return Promise.resolve(this.sceneManager.scene)
+            .then(function (scene) {
+            if (!scene) {
+                return _this.sceneManager.initScene(_this.configuration.scene);
+            }
+            return scene;
+        })
+            .then(function () {
+            var model = _this.initModel(modelConfig, clearScene);
+            return new Promise(function (resolve, reject) {
+                // at this point, configuration.model is an object, not a string
+                model.onLoadedObservable.add(function () {
+                    resolve(model);
+                });
+                model.onLoadErrorObservable.add(function (error) {
+                    reject(error);
+                });
+            });
+        });
+    };
+    AbstractViewer.prototype._initTelemetryEvents = function () {
+        var _this = this;
+        telemetryManager.broadcast("Engine Capabilities", this.baseId, this.engine.getCaps());
+        telemetryManager.broadcast("Platform Details", this.baseId, {
+            userAgent: navigator.userAgent,
+            platform: navigator.platform,
+        });
+        telemetryManager.flushWebGLErrors(this.engine, this.baseId);
+        var trackFPS = function () {
+            telemetryManager.broadcast("Current FPS", _this.baseId, { fps: _this.engine.getFps() });
+        };
+        trackFPS();
+        // Track the FPS again after 60 seconds
+        this._fpsTimeoutInterval = window.setInterval(trackFPS, 60 * 1000);
+    };
+    /**
+     * Injects all the spectre shader in the babylon shader store
+     */
+    AbstractViewer.prototype._injectCustomShaders = function () {
+        var customShaders = this.configuration.customShaders;
+        // Inject all the spectre shader in the babylon shader store.
+        if (!customShaders) {
+            return;
+        }
+        if (customShaders.shaders) {
+            Object.keys(customShaders.shaders).forEach(function (key) {
+                // typescript considers a callback "unsafe", so... '!'
+                Effect.ShadersStore[key] = customShaders.shaders[key];
+            });
+        }
+        if (customShaders.includes) {
+            Object.keys(customShaders.includes).forEach(function (key) {
+                // typescript considers a callback "unsafe", so... '!'
+                Effect.IncludesShadersStore[key] = customShaders.includes[key];
+            });
+        }
+    };
+    return AbstractViewer;
+}());
+export { AbstractViewer };
 //# sourceMappingURL=viewer.js.map