Nightly

dist/preview release/babylon.max.js

@@ -108609,7 +108609,7 @@ var BABYLON;
             this._tmpMatrix = new BABYLON.Matrix();
         }
         /**
-         * Initializes the manager, this must be done with a user action (eg. button click event)
+         * Initializes the manager
          * After initialization enterXR can be called to start an XR session
          * @returns Promise which resolves after it is initialized
          */
@@ -108627,7 +108627,7 @@ var BABYLON;
             });
         };
         /**
-         * Enters XR with the desired XR session options
+         * Enters XR with the desired XR session options, this must be done with a user action (eg. button click event)
          * @param sessionCreationOptions xr options to create the session with
          * @param frameOfReferenceType option to configure how the xr pose is expressed
          * @returns Promise which resolves after it enters XR
@@ -108711,6 +108711,18 @@ var BABYLON;
             });
         };
         /**
+         * Checks if a session would be supported for the creation options specified
+         * @param options creation options to check if they are supported
+         * @returns true if supported
+         */
+        WebXRSessionManager.prototype.supportsSession = function (options) {
+            return this._xrDevice.supportsSession(options).then(function () {
+                return true;
+            }).catch(function (e) {
+                return false;
+            });
+        };
+        /**
          * @hidden
          * Converts the render layer of xrSession to a render target
          * @param session session to create render target for
@@ -108749,17 +108761,21 @@ var BABYLON;
     var WebXRState;
     (function (WebXRState) {
         /**
-         * Transitioning to/from being in XR mode
+         * Transitioning to being in XR mode
          */
-        WebXRState[WebXRState["TRANSITION"] = 0] = "TRANSITION";
+        WebXRState[WebXRState["ENTERING_XR"] = 0] = "ENTERING_XR";
+        /**
+         * Transitioning to non XR mode
+         */
+        WebXRState[WebXRState["EXITING_XR"] = 1] = "EXITING_XR";
         /**
          * In XR mode and presenting
          */
-        WebXRState[WebXRState["IN_XR"] = 1] = "IN_XR";
+        WebXRState[WebXRState["IN_XR"] = 2] = "IN_XR";
         /**
          * Not entered XR mode
          */
-        WebXRState[WebXRState["NOT_IN_XR"] = 2] = "NOT_IN_XR";
+        WebXRState[WebXRState["NOT_IN_XR"] = 3] = "NOT_IN_XR";
     })(WebXRState = BABYLON.WebXRState || (BABYLON.WebXRState = {}));
     /**
      * Helper class used to enable XR
@@ -108782,18 +108798,35 @@ var BABYLON;
             this.onStateChangedObservable = new BABYLON.Observable();
             this._nonVRCamera = null;
             this._originalSceneAutoClear = true;
+            this._supported = false;
             this.camera = new BABYLON.WebXRCamera("", scene);
             this._sessionManager = new BABYLON.WebXRSessionManager(scene);
             this.container = new BABYLON.AbstractMesh("", scene);
-            this._sessionManager.initialize();
         }
+        WebXRExperienceHelper.prototype._setState = function (val) {
+            this.state = val;
+            this.onStateChangedObservable.notifyObservers(this.state);
+        };
+        /**
+         * Creates the experience helper
+         * @param scene the scene to attach the experience helper to
+         * @returns a promise for the experience helper
+         */
+        WebXRExperienceHelper.CreateAsync = function (scene) {
+            var helper = new WebXRExperienceHelper(scene);
+            return helper._sessionManager.initialize().then(function () {
+                helper._supported = true;
+                return helper;
+            }).catch(function () {
+                return helper;
+            });
+        };
         /**
          * Exits XR mode and returns the scene to its original state
          * @returns promise that resolves after xr mode has exited
          */
         WebXRExperienceHelper.prototype.exitXR = function () {
-            this.state = WebXRState.TRANSITION;
-            this.onStateChangedObservable.notifyObservers(this.state);
+            this._setState(WebXRState.EXITING_XR);
             return this._sessionManager.exitXR();
         };
         /**
@@ -108804,12 +108837,7 @@ var BABYLON;
          */
         WebXRExperienceHelper.prototype.enterXR = function (sessionCreationOptions, frameOfReference) {
             var _this = this;
-            this.state = WebXRState.TRANSITION;
-            this.onStateChangedObservable.notifyObservers(this.state);
-            this._createCanvas();
-            if (!sessionCreationOptions.outputContext) {
-                sessionCreationOptions.outputContext = this._outputCanvasContext;
-            }
+            this._setState(WebXRState.ENTERING_XR);
             return this._sessionManager.enterXR(sessionCreationOptions, frameOfReference).then(function () {
                 // Cache pre xr scene settings
                 _this._originalSceneAutoClear = _this.scene.autoClear;
@@ -108829,43 +108857,238 @@ var BABYLON;
                     _this.scene.autoClear = _this._originalSceneAutoClear;
                     _this.scene.activeCamera = _this._nonVRCamera;
                     _this._sessionManager.onXRFrameObservable.clear();
-                    _this._removeCanvas();
-                    _this.state = WebXRState.NOT_IN_XR;
-                    _this.onStateChangedObservable.notifyObservers(_this.state);
+                    _this._setState(WebXRState.NOT_IN_XR);
                 });
-                _this.state = WebXRState.IN_XR;
-                _this.onStateChangedObservable.notifyObservers(_this.state);
+                _this._setState(WebXRState.IN_XR);
             });
         };
         /**
+         * Checks if the creation options are supported by the xr session
+         * @param options creation options
+         * @returns true if supported
+         */
+        WebXRExperienceHelper.prototype.supportsSession = function (options) {
+            if (!this._supported) {
+                return Promise.resolve(false);
+            }
+            return this._sessionManager.supportsSession(options);
+        };
+        /**
          * Disposes of the experience helper
          */
         WebXRExperienceHelper.prototype.dispose = function () {
             this.camera.dispose();
             this.container.dispose();
-            this._removeCanvas();
             this.onStateChangedObservable.clear();
             this._sessionManager.dispose();
         };
-        // create canvas used to mirror/vr xr content in fullscreen
-        WebXRExperienceHelper.prototype._createCanvas = function () {
+        return WebXRExperienceHelper;
+    }());
+    BABYLON.WebXRExperienceHelper = WebXRExperienceHelper;
+})(BABYLON || (BABYLON = {}));
+
+//# sourceMappingURL=babylon.webXRExperienceHelper.js.map
+
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var BABYLON;
+(function (BABYLON) {
+    /**
+     * Options to create the webXR UI
+     */
+    var WebXREnterExitUIOptions = /** @class */ (function () {
+        function WebXREnterExitUIOptions() {
+        }
+        return WebXREnterExitUIOptions;
+    }());
+    BABYLON.WebXREnterExitUIOptions = WebXREnterExitUIOptions;
+    /**
+     * UI to allow the user to enter/exit XR mode
+     */
+    var WebXREnterExitUI = /** @class */ (function () {
+        function WebXREnterExitUI(scene, options) {
+            var _this = this;
+            this.scene = scene;
+            this._buttons = [];
+            this._overlay = document.createElement("div");
+            this._overlay.style.cssText = "z-index:11;position: absolute; right: 20px;bottom: 50px;";
+            if (options.customButtons) {
+                this._buttons = options.customButtons;
+            }
+            else {
+                var hmdBtn = document.createElement("button");
+                hmdBtn.style.cssText = "color: #868686; border-color: #868686; border-style: solid; margin-left: 10px; height: 50px; width: 80px; background-color: rgba(51,51,51,0.7); background-repeat:no-repeat; background-position: center; outline: none;";
+                hmdBtn.innerText = "HMD";
+                this._buttons.push({ element: hmdBtn, initializationOptions: { immersive: true } });
+                var windowBtn = document.createElement("button");
+                windowBtn.style.cssText = hmdBtn.style.cssText;
+                windowBtn.innerText = "Window";
+                this._buttons.push({ element: windowBtn, initializationOptions: { immersive: false, environmentIntegration: true, outputContext: options.outputCanvasContext } });
+            }
+            var renderCanvas = scene.getEngine().getRenderingCanvas();
+            if (renderCanvas && renderCanvas.parentNode) {
+                renderCanvas.parentNode.appendChild(this._overlay);
+                scene.onDisposeObservable.addOnce(function () {
+                    _this.dispose();
+                });
+            }
+        }
+        /**
+         * Creates UI to allow the user to enter/exit XR mode
+         * @param scene the scene to add the ui to
+         * @param helper the xr experience helper to enter/exit xr with
+         * @param options options to configure the UI
+         * @returns the created ui
+         */
+        WebXREnterExitUI.CreateAsync = function (scene, helper, options) {
+            var _this = this;
+            var ui = new WebXREnterExitUI(scene, options);
+            var supportedPromises = ui._buttons.map(function (btn) {
+                return helper.supportsSession(btn.initializationOptions);
+            });
+            return Promise.all(supportedPromises).then(function (results) {
+                results.forEach(function (supported, i) {
+                    if (supported) {
+                        ui._overlay.appendChild(ui._buttons[i].element);
+                        ui._buttons[i].element.onclick = function () { return __awaiter(_this, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0:
+                                        if (!(helper.state == BABYLON.WebXRState.IN_XR)) return [3 /*break*/, 2];
+                                        return [4 /*yield*/, helper.exitXR()];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                    case 2:
+                                        if (!(helper.state == BABYLON.WebXRState.NOT_IN_XR)) return [3 /*break*/, 4];
+                                        return [4 /*yield*/, helper.enterXR(ui._buttons[i].initializationOptions, "eye-level")];
+                                    case 3:
+                                        _a.sent();
+                                        _a.label = 4;
+                                    case 4: return [2 /*return*/];
+                                }
+                            });
+                        }); };
+                    }
+                });
+            });
+        };
+        /**
+         * Disposes of the object
+         */
+        WebXREnterExitUI.prototype.dispose = function () {
+            var renderCanvas = this.scene.getEngine().getRenderingCanvas();
+            if (renderCanvas && renderCanvas.parentNode && renderCanvas.parentNode.contains(this._overlay)) {
+                renderCanvas.parentNode.removeChild(this._overlay);
+            }
+        };
+        return WebXREnterExitUI;
+    }());
+    BABYLON.WebXREnterExitUI = WebXREnterExitUI;
+})(BABYLON || (BABYLON = {}));
+
+//# sourceMappingURL=babylon.webXREnterExitUI.js.map
+
+var BABYLON;
+(function (BABYLON) {
+    /**
+     * Creates a canvas that is added/removed from the webpage when entering/exiting XR
+     */
+    var WebXRManagedOutputCanvas = /** @class */ (function () {
+        /**
+         * Initializes the canvas to be added/removed upon entering/exiting xr
+         * @param helper the xr experience helper used to trigger adding/removing of the canvas
+         * @param canvas The canvas to be added/removed (If not specified a full screen canvas will be created)
+         */
+        function WebXRManagedOutputCanvas(helper, canvas) {
+            var _this = this;
+            this._canvas = null;
+            /**
+             * xrpresent context of the canvas which can be used to display/mirror xr content
+             */
+            this.canvasContext = null;
+            if (!canvas) {
+                canvas = document.createElement('canvas');
+                canvas.style.cssText = "position:absolute; bottom:0px;right:0px;z-index:10;width:100%;height:100%;background-color: #48989e;";
+            }
+            this._setManagedOutputCanvas(canvas);
+            helper.onStateChangedObservable.add(function (stateInfo) {
+                if (stateInfo == BABYLON.WebXRState.ENTERING_XR) {
+                    // The canvas is added to the screen before entering XR because currently the xr session must be initialized while the canvas is added render properly
+                    _this._addCanvas();
+                }
+                else if (helper.state == BABYLON.WebXRState.NOT_IN_XR) {
+                    _this._removeCanvas();
+                }
+            });
+        }
+        /**
+         * Disposes of the object
+         */
+        WebXRManagedOutputCanvas.prototype.dispose = function () {
             this._removeCanvas();
-            this._outputCanvas = document.createElement('canvas');
-            this._outputCanvas.style.cssText = "position:absolute; bottom:0px;right:0px;z-index:10;width:100%;height:100%;background-color: #48989e;";
-            document.body.appendChild(this._outputCanvas);
-            this._outputCanvasContext = this._outputCanvas.getContext('xrpresent');
+            this._setManagedOutputCanvas(null);
         };
-        WebXRExperienceHelper.prototype._removeCanvas = function () {
-            if (this._outputCanvas && document.body.contains(this._outputCanvas)) {
-                document.body.removeChild(this._outputCanvas);
+        WebXRManagedOutputCanvas.prototype._setManagedOutputCanvas = function (canvas) {
+            this._removeCanvas();
+            if (!canvas) {
+                this._canvas = null;
+                this.canvasContext = null;
+            }
+            else {
+                this._canvas = canvas;
+                this.canvasContext = this._canvas.getContext('xrpresent');
             }
         };
-        return WebXRExperienceHelper;
+        WebXRManagedOutputCanvas.prototype._addCanvas = function () {
+            if (this._canvas) {
+                document.body.appendChild(this._canvas);
+            }
+        };
+        WebXRManagedOutputCanvas.prototype._removeCanvas = function () {
+            if (this._canvas && document.body.contains(this._canvas)) {
+                document.body.removeChild(this._canvas);
+            }
+        };
+        return WebXRManagedOutputCanvas;
     }());
-    BABYLON.WebXRExperienceHelper = WebXRExperienceHelper;
+    BABYLON.WebXRManagedOutputCanvas = WebXRManagedOutputCanvas;
 })(BABYLON || (BABYLON = {}));
 
-//# sourceMappingURL=babylon.webXRExperienceHelper.js.map
+//# sourceMappingURL=babylon.webXRManagedOutputCanvas.js.map
 
 // Mainly based on these 2 articles :
 // Creating an universal virtual touch joystick working for all Touch models thanks to Hand.JS : http://blogs.msdn.com/b/davrous/archive/2013/02/22/creating-an-universal-virtual-touch-joystick-working-for-all-touch-models-thanks-to-hand-js.aspx
@@ -119759,9 +119982,14 @@ var BABYLON;
         }
         return null;
     };
-    BABYLON.Scene.prototype.createDefaultVRExperience = function (webVROptions) {
-        if (webVROptions === void 0) { webVROptions = {}; }
-        return new BABYLON.VRExperienceHelper(this, webVROptions);
+    BABYLON.Scene.prototype.createDefaultXRExperienceAsync = function () {
+        var _this = this;
+        return BABYLON.WebXRExperienceHelper.CreateAsync(this).then(function (helper) {
+            var outputCanvas = new BABYLON.WebXRManagedOutputCanvas(helper);
+            return BABYLON.WebXREnterExitUI.CreateAsync(_this, helper, { outputCanvasContext: outputCanvas.canvasContext }).then(function (ui) {
+                return helper;
+            });
+        });
     };
 })(BABYLON || (BABYLON = {}));
 

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

@@ -108576,7 +108576,7 @@ var BABYLON;
             this._tmpMatrix = new BABYLON.Matrix();
         }
         /**
-         * Initializes the manager, this must be done with a user action (eg. button click event)
+         * Initializes the manager
          * After initialization enterXR can be called to start an XR session
          * @returns Promise which resolves after it is initialized
          */
@@ -108594,7 +108594,7 @@ var BABYLON;
             });
         };
         /**
-         * Enters XR with the desired XR session options
+         * Enters XR with the desired XR session options, this must be done with a user action (eg. button click event)
          * @param sessionCreationOptions xr options to create the session with
          * @param frameOfReferenceType option to configure how the xr pose is expressed
          * @returns Promise which resolves after it enters XR
@@ -108678,6 +108678,18 @@ var BABYLON;
             });
         };
         /**
+         * Checks if a session would be supported for the creation options specified
+         * @param options creation options to check if they are supported
+         * @returns true if supported
+         */
+        WebXRSessionManager.prototype.supportsSession = function (options) {
+            return this._xrDevice.supportsSession(options).then(function () {
+                return true;
+            }).catch(function (e) {
+                return false;
+            });
+        };
+        /**
          * @hidden
          * Converts the render layer of xrSession to a render target
          * @param session session to create render target for
@@ -108716,17 +108728,21 @@ var BABYLON;
     var WebXRState;
     (function (WebXRState) {
         /**
-         * Transitioning to/from being in XR mode
+         * Transitioning to being in XR mode
          */
-        WebXRState[WebXRState["TRANSITION"] = 0] = "TRANSITION";
+        WebXRState[WebXRState["ENTERING_XR"] = 0] = "ENTERING_XR";
+        /**
+         * Transitioning to non XR mode
+         */
+        WebXRState[WebXRState["EXITING_XR"] = 1] = "EXITING_XR";
         /**
          * In XR mode and presenting
          */
-        WebXRState[WebXRState["IN_XR"] = 1] = "IN_XR";
+        WebXRState[WebXRState["IN_XR"] = 2] = "IN_XR";
         /**
          * Not entered XR mode
          */
-        WebXRState[WebXRState["NOT_IN_XR"] = 2] = "NOT_IN_XR";
+        WebXRState[WebXRState["NOT_IN_XR"] = 3] = "NOT_IN_XR";
     })(WebXRState = BABYLON.WebXRState || (BABYLON.WebXRState = {}));
     /**
      * Helper class used to enable XR
@@ -108749,18 +108765,35 @@ var BABYLON;
             this.onStateChangedObservable = new BABYLON.Observable();
             this._nonVRCamera = null;
             this._originalSceneAutoClear = true;
+            this._supported = false;
             this.camera = new BABYLON.WebXRCamera("", scene);
             this._sessionManager = new BABYLON.WebXRSessionManager(scene);
             this.container = new BABYLON.AbstractMesh("", scene);
-            this._sessionManager.initialize();
         }
+        WebXRExperienceHelper.prototype._setState = function (val) {
+            this.state = val;
+            this.onStateChangedObservable.notifyObservers(this.state);
+        };
+        /**
+         * Creates the experience helper
+         * @param scene the scene to attach the experience helper to
+         * @returns a promise for the experience helper
+         */
+        WebXRExperienceHelper.CreateAsync = function (scene) {
+            var helper = new WebXRExperienceHelper(scene);
+            return helper._sessionManager.initialize().then(function () {
+                helper._supported = true;
+                return helper;
+            }).catch(function () {
+                return helper;
+            });
+        };
         /**
          * Exits XR mode and returns the scene to its original state
          * @returns promise that resolves after xr mode has exited
          */
         WebXRExperienceHelper.prototype.exitXR = function () {
-            this.state = WebXRState.TRANSITION;
-            this.onStateChangedObservable.notifyObservers(this.state);
+            this._setState(WebXRState.EXITING_XR);
             return this._sessionManager.exitXR();
         };
         /**
@@ -108771,12 +108804,7 @@ var BABYLON;
          */
         WebXRExperienceHelper.prototype.enterXR = function (sessionCreationOptions, frameOfReference) {
             var _this = this;
-            this.state = WebXRState.TRANSITION;
-            this.onStateChangedObservable.notifyObservers(this.state);
-            this._createCanvas();
-            if (!sessionCreationOptions.outputContext) {
-                sessionCreationOptions.outputContext = this._outputCanvasContext;
-            }
+            this._setState(WebXRState.ENTERING_XR);
             return this._sessionManager.enterXR(sessionCreationOptions, frameOfReference).then(function () {
                 // Cache pre xr scene settings
                 _this._originalSceneAutoClear = _this.scene.autoClear;
@@ -108796,43 +108824,238 @@ var BABYLON;
                     _this.scene.autoClear = _this._originalSceneAutoClear;
                     _this.scene.activeCamera = _this._nonVRCamera;
                     _this._sessionManager.onXRFrameObservable.clear();
-                    _this._removeCanvas();
-                    _this.state = WebXRState.NOT_IN_XR;
-                    _this.onStateChangedObservable.notifyObservers(_this.state);
+                    _this._setState(WebXRState.NOT_IN_XR);
                 });
-                _this.state = WebXRState.IN_XR;
-                _this.onStateChangedObservable.notifyObservers(_this.state);
+                _this._setState(WebXRState.IN_XR);
             });
         };
         /**
+         * Checks if the creation options are supported by the xr session
+         * @param options creation options
+         * @returns true if supported
+         */
+        WebXRExperienceHelper.prototype.supportsSession = function (options) {
+            if (!this._supported) {
+                return Promise.resolve(false);
+            }
+            return this._sessionManager.supportsSession(options);
+        };
+        /**
          * Disposes of the experience helper
          */
         WebXRExperienceHelper.prototype.dispose = function () {
             this.camera.dispose();
             this.container.dispose();
-            this._removeCanvas();
             this.onStateChangedObservable.clear();
             this._sessionManager.dispose();
         };
-        // create canvas used to mirror/vr xr content in fullscreen
-        WebXRExperienceHelper.prototype._createCanvas = function () {
+        return WebXRExperienceHelper;
+    }());
+    BABYLON.WebXRExperienceHelper = WebXRExperienceHelper;
+})(BABYLON || (BABYLON = {}));
+
+//# sourceMappingURL=babylon.webXRExperienceHelper.js.map
+
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var BABYLON;
+(function (BABYLON) {
+    /**
+     * Options to create the webXR UI
+     */
+    var WebXREnterExitUIOptions = /** @class */ (function () {
+        function WebXREnterExitUIOptions() {
+        }
+        return WebXREnterExitUIOptions;
+    }());
+    BABYLON.WebXREnterExitUIOptions = WebXREnterExitUIOptions;
+    /**
+     * UI to allow the user to enter/exit XR mode
+     */
+    var WebXREnterExitUI = /** @class */ (function () {
+        function WebXREnterExitUI(scene, options) {
+            var _this = this;
+            this.scene = scene;
+            this._buttons = [];
+            this._overlay = document.createElement("div");
+            this._overlay.style.cssText = "z-index:11;position: absolute; right: 20px;bottom: 50px;";
+            if (options.customButtons) {
+                this._buttons = options.customButtons;
+            }
+            else {
+                var hmdBtn = document.createElement("button");
+                hmdBtn.style.cssText = "color: #868686; border-color: #868686; border-style: solid; margin-left: 10px; height: 50px; width: 80px; background-color: rgba(51,51,51,0.7); background-repeat:no-repeat; background-position: center; outline: none;";
+                hmdBtn.innerText = "HMD";
+                this._buttons.push({ element: hmdBtn, initializationOptions: { immersive: true } });
+                var windowBtn = document.createElement("button");
+                windowBtn.style.cssText = hmdBtn.style.cssText;
+                windowBtn.innerText = "Window";
+                this._buttons.push({ element: windowBtn, initializationOptions: { immersive: false, environmentIntegration: true, outputContext: options.outputCanvasContext } });
+            }
+            var renderCanvas = scene.getEngine().getRenderingCanvas();
+            if (renderCanvas && renderCanvas.parentNode) {
+                renderCanvas.parentNode.appendChild(this._overlay);
+                scene.onDisposeObservable.addOnce(function () {
+                    _this.dispose();
+                });
+            }
+        }
+        /**
+         * Creates UI to allow the user to enter/exit XR mode
+         * @param scene the scene to add the ui to
+         * @param helper the xr experience helper to enter/exit xr with
+         * @param options options to configure the UI
+         * @returns the created ui
+         */
+        WebXREnterExitUI.CreateAsync = function (scene, helper, options) {
+            var _this = this;
+            var ui = new WebXREnterExitUI(scene, options);
+            var supportedPromises = ui._buttons.map(function (btn) {
+                return helper.supportsSession(btn.initializationOptions);
+            });
+            return Promise.all(supportedPromises).then(function (results) {
+                results.forEach(function (supported, i) {
+                    if (supported) {
+                        ui._overlay.appendChild(ui._buttons[i].element);
+                        ui._buttons[i].element.onclick = function () { return __awaiter(_this, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0:
+                                        if (!(helper.state == BABYLON.WebXRState.IN_XR)) return [3 /*break*/, 2];
+                                        return [4 /*yield*/, helper.exitXR()];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                    case 2:
+                                        if (!(helper.state == BABYLON.WebXRState.NOT_IN_XR)) return [3 /*break*/, 4];
+                                        return [4 /*yield*/, helper.enterXR(ui._buttons[i].initializationOptions, "eye-level")];
+                                    case 3:
+                                        _a.sent();
+                                        _a.label = 4;
+                                    case 4: return [2 /*return*/];
+                                }
+                            });
+                        }); };
+                    }
+                });
+            });
+        };
+        /**
+         * Disposes of the object
+         */
+        WebXREnterExitUI.prototype.dispose = function () {
+            var renderCanvas = this.scene.getEngine().getRenderingCanvas();
+            if (renderCanvas && renderCanvas.parentNode && renderCanvas.parentNode.contains(this._overlay)) {
+                renderCanvas.parentNode.removeChild(this._overlay);
+            }
+        };
+        return WebXREnterExitUI;
+    }());
+    BABYLON.WebXREnterExitUI = WebXREnterExitUI;
+})(BABYLON || (BABYLON = {}));
+
+//# sourceMappingURL=babylon.webXREnterExitUI.js.map
+
+var BABYLON;
+(function (BABYLON) {
+    /**
+     * Creates a canvas that is added/removed from the webpage when entering/exiting XR
+     */
+    var WebXRManagedOutputCanvas = /** @class */ (function () {
+        /**
+         * Initializes the canvas to be added/removed upon entering/exiting xr
+         * @param helper the xr experience helper used to trigger adding/removing of the canvas
+         * @param canvas The canvas to be added/removed (If not specified a full screen canvas will be created)
+         */
+        function WebXRManagedOutputCanvas(helper, canvas) {
+            var _this = this;
+            this._canvas = null;
+            /**
+             * xrpresent context of the canvas which can be used to display/mirror xr content
+             */
+            this.canvasContext = null;
+            if (!canvas) {
+                canvas = document.createElement('canvas');
+                canvas.style.cssText = "position:absolute; bottom:0px;right:0px;z-index:10;width:100%;height:100%;background-color: #48989e;";
+            }
+            this._setManagedOutputCanvas(canvas);
+            helper.onStateChangedObservable.add(function (stateInfo) {
+                if (stateInfo == BABYLON.WebXRState.ENTERING_XR) {
+                    // The canvas is added to the screen before entering XR because currently the xr session must be initialized while the canvas is added render properly
+                    _this._addCanvas();
+                }
+                else if (helper.state == BABYLON.WebXRState.NOT_IN_XR) {
+                    _this._removeCanvas();
+                }
+            });
+        }
+        /**
+         * Disposes of the object
+         */
+        WebXRManagedOutputCanvas.prototype.dispose = function () {
             this._removeCanvas();
-            this._outputCanvas = document.createElement('canvas');
-            this._outputCanvas.style.cssText = "position:absolute; bottom:0px;right:0px;z-index:10;width:100%;height:100%;background-color: #48989e;";
-            document.body.appendChild(this._outputCanvas);
-            this._outputCanvasContext = this._outputCanvas.getContext('xrpresent');
+            this._setManagedOutputCanvas(null);
         };
-        WebXRExperienceHelper.prototype._removeCanvas = function () {
-            if (this._outputCanvas && document.body.contains(this._outputCanvas)) {
-                document.body.removeChild(this._outputCanvas);
+        WebXRManagedOutputCanvas.prototype._setManagedOutputCanvas = function (canvas) {
+            this._removeCanvas();
+            if (!canvas) {
+                this._canvas = null;
+                this.canvasContext = null;
+            }
+            else {
+                this._canvas = canvas;
+                this.canvasContext = this._canvas.getContext('xrpresent');
             }
         };
-        return WebXRExperienceHelper;
+        WebXRManagedOutputCanvas.prototype._addCanvas = function () {
+            if (this._canvas) {
+                document.body.appendChild(this._canvas);
+            }
+        };
+        WebXRManagedOutputCanvas.prototype._removeCanvas = function () {
+            if (this._canvas && document.body.contains(this._canvas)) {
+                document.body.removeChild(this._canvas);
+            }
+        };
+        return WebXRManagedOutputCanvas;
     }());
-    BABYLON.WebXRExperienceHelper = WebXRExperienceHelper;
+    BABYLON.WebXRManagedOutputCanvas = WebXRManagedOutputCanvas;
 })(BABYLON || (BABYLON = {}));
 
-//# sourceMappingURL=babylon.webXRExperienceHelper.js.map
+//# sourceMappingURL=babylon.webXRManagedOutputCanvas.js.map
 
 // Mainly based on these 2 articles :
 // Creating an universal virtual touch joystick working for all Touch models thanks to Hand.JS : http://blogs.msdn.com/b/davrous/archive/2013/02/22/creating-an-universal-virtual-touch-joystick-working-for-all-touch-models-thanks-to-hand-js.aspx
@@ -119726,9 +119949,14 @@ var BABYLON;
         }
         return null;
     };
-    BABYLON.Scene.prototype.createDefaultVRExperience = function (webVROptions) {
-        if (webVROptions === void 0) { webVROptions = {}; }
-        return new BABYLON.VRExperienceHelper(this, webVROptions);
+    BABYLON.Scene.prototype.createDefaultXRExperienceAsync = function () {
+        var _this = this;
+        return BABYLON.WebXRExperienceHelper.CreateAsync(this).then(function (helper) {
+            var outputCanvas = new BABYLON.WebXRManagedOutputCanvas(helper);
+            return BABYLON.WebXREnterExitUI.CreateAsync(_this, helper, { outputCanvasContext: outputCanvas.canvasContext }).then(function (ui) {
+                return helper;
+            });
+        });
     };
 })(BABYLON || (BABYLON = {}));
 

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

@@ -168,11 +168,11 @@ declare module BabylonViewer {
                 * Mainly used for help and errors
                 * @param subScreen the name of the subScreen. Those can be defined in the configuration object
                 */
-            showOverlayScreen(subScreen: string): Promise<Template> | Promise<string>;
+            showOverlayScreen(subScreen: string): Promise<string> | Promise<Template>;
             /**
                 * Hide the overlay screen.
                 */
-            hideOverlayScreen(): Promise<Template> | Promise<string>;
+            hideOverlayScreen(): Promise<string> | Promise<Template>;
             /**
                 * show the viewer (in case it was hidden)
                 *
@@ -189,11 +189,11 @@ declare module BabylonViewer {
                 * Show the loading screen.
                 * The loading screen can be configured using the configuration object
                 */
-            showLoadingScreen(): Promise<Template> | Promise<string>;
+            showLoadingScreen(): Promise<string> | Promise<Template>;
             /**
                 * Hide the loading screen
                 */
-            hideLoadingScreen(): Promise<Template> | Promise<string>;
+            hideLoadingScreen(): Promise<string> | Promise<Template>;
             dispose(): void;
             protected _onConfigurationLoaded(configuration: ViewerConfiguration): void;
     }
@@ -924,7 +924,7 @@ declare module BabylonViewer {
       * @param name the name of the custom optimizer configuration
       * @param upgrade set to true if you want to upgrade optimizer and false if you want to degrade
       */
-    export function getCustomOptimizerByName(name: string, upgrade?: boolean): typeof extendedUpgrade;
+    export function getCustomOptimizerByName(name: string, upgrade?: boolean): (sceneManager: SceneManager) => boolean;
     export function registerCustomOptimizer(name: string, optimizer: (sceneManager: SceneManager) => boolean): void;
 }
 declare module BabylonViewer {
@@ -1558,20 +1558,6 @@ declare module BabylonViewer {
     export function addLoaderPlugin(name: string, plugin: ILoaderPlugin): void;
 }
 declare module BabylonViewer {
-    /**
-        * A custom upgrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedUpgrade(sceneManager: SceneManager): boolean;
-    /**
-        * A custom degrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedDegrade(sceneManager: SceneManager): boolean;
-}
-declare module BabylonViewer {
 }
 declare module BabylonViewer {
     export interface IEnvironmentMapConfiguration {
@@ -1733,13 +1719,6 @@ declare module BabylonViewer {
     }
 }
 declare module BabylonViewer {
-    /**
-      * A (PBR) material will be extended using this function.
-      * This function will hold extra default configuration for the viewer, if not implemented in Babylon itself.
-      */
-    export class ExtendedMaterialLoaderPlugin implements ILoaderPlugin {
-        onMaterialLoaded(baseMaterial: BABYLON.Material): void;
-    }
 }
 declare module BabylonViewer {
     export interface ICameraConfiguration {

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

@@ -200,11 +200,11 @@ declare module 'babylonjs-viewer/viewer/defaultViewer' {
                 * Mainly used for help and errors
                 * @param subScreen the name of the subScreen. Those can be defined in the configuration object
                 */
-            showOverlayScreen(subScreen: string): Promise<Template> | Promise<string>;
+            showOverlayScreen(subScreen: string): Promise<string> | Promise<Template>;
             /**
                 * Hide the overlay screen.
                 */
-            hideOverlayScreen(): Promise<Template> | Promise<string>;
+            hideOverlayScreen(): Promise<string> | Promise<Template>;
             /**
                 * show the viewer (in case it was hidden)
                 *
@@ -221,11 +221,11 @@ declare module 'babylonjs-viewer/viewer/defaultViewer' {
                 * Show the loading screen.
                 * The loading screen can be configured using the configuration object
                 */
-            showLoadingScreen(): Promise<Template> | Promise<string>;
+            showLoadingScreen(): Promise<string> | Promise<Template>;
             /**
                 * Hide the loading screen
                 */
-            hideLoadingScreen(): Promise<Template> | Promise<string>;
+            hideLoadingScreen(): Promise<string> | Promise<Template>;
             dispose(): void;
             protected _onConfigurationLoaded(configuration: ViewerConfiguration): void;
     }
@@ -985,14 +985,13 @@ declare module 'babylonjs-viewer/templating/viewerTemplatePlugin' {
 }
 
 declare module 'babylonjs-viewer/optimizer/custom' {
-    import { extendedUpgrade } from "babylonjs-viewer/optimizer/custom/extended";
     import { SceneManager } from "babylonjs-viewer/managers/sceneManager";
     /**
       *
       * @param name the name of the custom optimizer configuration
       * @param upgrade set to true if you want to upgrade optimizer and false if you want to degrade
       */
-    export function getCustomOptimizerByName(name: string, upgrade?: boolean): typeof extendedUpgrade;
+    export function getCustomOptimizerByName(name: string, upgrade?: boolean): (sceneManager: SceneManager) => boolean;
     export function registerCustomOptimizer(name: string, optimizer: (sceneManager: SceneManager) => boolean): void;
 }
 
@@ -1663,22 +1662,6 @@ declare module 'babylonjs-viewer/loader/plugins' {
     export function addLoaderPlugin(name: string, plugin: ILoaderPlugin): void;
 }
 
-declare module 'babylonjs-viewer/optimizer/custom/extended' {
-    import { SceneManager } from 'babylonjs-viewer/managers/sceneManager';
-    /**
-        * A custom upgrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedUpgrade(sceneManager: SceneManager): boolean;
-    /**
-        * A custom degrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedDegrade(sceneManager: SceneManager): boolean;
-}
-
 declare module 'babylonjs-viewer/configuration/interfaces' {
     export * from 'babylonjs-viewer/configuration/interfaces/cameraConfiguration';
     export * from 'babylonjs-viewer/configuration/interfaces/colorGradingConfiguration';
@@ -1877,15 +1860,7 @@ declare module 'babylonjs-viewer/loader/plugins/applyMaterialConfig' {
 }
 
 declare module 'babylonjs-viewer/loader/plugins/extendedMaterialLoaderPlugin' {
-    import { Material } from 'babylonjs';
-    import { ILoaderPlugin } from 'babylonjs-viewer/loader/plugins/loaderPlugin';
-    /**
-      * A (PBR) material will be extended using this function.
-      * This function will hold extra default configuration for the viewer, if not implemented in Babylon itself.
-      */
-    export class ExtendedMaterialLoaderPlugin implements ILoaderPlugin {
-        onMaterialLoaded(baseMaterial: Material): void;
-    }
+    
 }
 
 declare module 'babylonjs-viewer/configuration/interfaces/cameraConfiguration' {

gui/src/2D/controls/imageBasedSlider.ts

@@ -124,7 +124,7 @@ export class ImageBasedSlider extends BaseSlider {
                         this._tempMeasure.copyFromFloats(left, top + thumbPosition, width, height - thumbPosition);
                     }
                 } else {
-                    this._tempMeasure.copyFromFloats(left, top, thumbPosition, height);
+                    this._tempMeasure.copyFromFloats(left, top, thumbPosition + this._effectiveThumbThickness / 2, height);
                 }
                 this._valueBarImage._draw(this._tempMeasure, context);
             }

src/Cameras/XR/babylon.webXREnterExitUI.ts

@@ -7,14 +7,18 @@ module BABYLON {
          * Context to enter xr with
          */
         outputCanvasContext?: Nullable<WebGLRenderingContext>;
-        customButtons?: Array<{element: HTMLElement, initializationOptions: XRSessionCreationOptions}>;
+
+        /**
+         * User provided buttons to enable/disable WebXR. The system will provide default if not set
+         */
+        customButtons?: Array<{ element: HTMLElement, initializationOptions: XRSessionCreationOptions }>;
     }
     /**
      * UI to allow the user to enter/exit XR mode
      */
     export class WebXREnterExitUI implements IDisposable {
         private _overlay: HTMLDivElement;
-        private _buttons: Array<{element: HTMLElement, initializationOptions: XRSessionCreationOptions}> = [];
+        private _buttons: Array<{ element: HTMLElement, initializationOptions: XRSessionCreationOptions }> = [];
         /**
          * Creates UI to allow the user to enter/exit XR mode
          * @param scene the scene to add the ui to
@@ -35,7 +39,7 @@ module BABYLON {
                             if (helper.state == BABYLON.WebXRState.IN_XR) {
                                 await helper.exitXR();
                                 return;
-                            }else if (helper.state == BABYLON.WebXRState.NOT_IN_XR) {
+                            } else if (helper.state == BABYLON.WebXRState.NOT_IN_XR) {
                                 await helper.enterXR(ui._buttons[i].initializationOptions, "eye-level");
                             }
                         };
@@ -43,22 +47,23 @@ module BABYLON {
                 });
             });
         }
+
         private constructor(private scene: BABYLON.Scene, options: WebXREnterExitUIOptions) {
             this._overlay = document.createElement("div");
             this._overlay.style.cssText = "z-index:11;position: absolute; right: 20px;bottom: 50px;";
 
             if (options.customButtons) {
                 this._buttons = options.customButtons;
-            }else {
+            } else {
                 var hmdBtn = document.createElement("button");
                 hmdBtn.style.cssText = "color: #868686; border-color: #868686; border-style: solid; margin-left: 10px; height: 50px; width: 80px; background-color: rgba(51,51,51,0.7); background-repeat:no-repeat; background-position: center; outline: none;";
                 hmdBtn.innerText = "HMD";
-                this._buttons.push({element: hmdBtn, initializationOptions: {immersive: true}});
+                this._buttons.push({ element: hmdBtn, initializationOptions: { immersive: true } });
 
                 var windowBtn = document.createElement("button");
                 windowBtn.style.cssText = hmdBtn.style.cssText;
                 windowBtn.innerText = "Window";
-                this._buttons.push({element: windowBtn, initializationOptions: {immersive: false, environmentIntegration: true, outputContext: options.outputCanvasContext}});
+                this._buttons.push({ element: windowBtn, initializationOptions: { immersive: false, environmentIntegration: true, outputContext: options.outputCanvasContext } });
             }
 
             var renderCanvas = scene.getEngine().getRenderingCanvas();