enter exit ui

src/Cameras/XR/webXREnterExitUI.ts

@@ -2,6 +2,7 @@ import { Nullable } from "../../types";
 import { Observable } from "../../Misc/observable";
 import { IDisposable, Scene } from "../../scene";
 import { WebXRExperienceHelper, WebXRState } from "./webXRExperienceHelper";
+import { WebXRManagedOutputCanvas } from '../XR/webXRManagedOutputCanvas';
 /**
  * Button which can be used to enter a different mode of XR
  */
@@ -15,7 +16,8 @@ export class WebXREnterExitUIButton {
         /** button element */
         public element: HTMLElement,
         /** XR initialization options for the button */
-        //public initializationOptions: XRSessionCreationOptions
+        public sessionMode: XRSessionMode,
+        public frameOfReference: XRReferenceSpaceType
     ) { }
     /**
      * Overwritable function which can be used to update the button's visuals when the state changes
@@ -32,7 +34,7 @@ export class WebXREnterExitUIOptions {
     /**
      * Context to enter xr with
      */
-    outputCanvasContext?: Nullable<WebGLRenderingContext>;
+    webXRManagedOutputCanvas?: Nullable<WebXRManagedOutputCanvas>;
 
     /**
      * User provided buttons to enable/disable WebXR. The system will provide default if not set
@@ -64,7 +66,7 @@ export class WebXREnterExitUI implements IDisposable {
     public static CreateAsync(scene: Scene, helper: WebXRExperienceHelper, options: WebXREnterExitUIOptions): Promise<WebXREnterExitUI> {
         var ui = new WebXREnterExitUI(scene, options);
         var supportedPromises = ui._buttons.map((btn) => {
-            return null;//helper.supportsSessionAsync(btn.initializationOptions);
+            return helper.sessionManager.supportsSessionModeAsync(btn.sessionMode);
         });
         helper.onStateChangedObservable.add((state) => {
             if (state == WebXRState.NOT_IN_XR) {
@@ -82,7 +84,9 @@ export class WebXREnterExitUI implements IDisposable {
                             return;
                         } else if (helper.state == WebXRState.NOT_IN_XR) {
                             ui._updateButtons(ui._buttons[i]);
-                            //await helper.enterXRAsync(ui._buttons[i].initializationOptions, "eye-level");
+                            if(options.webXRManagedOutputCanvas){
+                                await helper.enterXRAsync(ui._buttons[i].sessionMode, ui._buttons[i].frameOfReference, options.webXRManagedOutputCanvas);
+                            }
                         }
                     };
                 }
@@ -101,11 +105,11 @@ export class WebXREnterExitUI implements IDisposable {
             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(new WebXREnterExitUIButton(hmdBtn, { immersive: true, outputContext: options.outputCanvasContext }));
-            // this._buttons[this._buttons.length - 1].update = function(activeButton: WebXREnterExitUIButton) {
-            //     this.element.style.display = (activeButton === null || activeButton === this) ? "" : "none";
-            //     this.element.innerText = activeButton === this ? "EXIT" : "HMD";
-            // };
+            this._buttons.push(new WebXREnterExitUIButton(hmdBtn, "immersive-vr", "local-floor"));
+            this._buttons[this._buttons.length - 1].update = function(activeButton: WebXREnterExitUIButton) {
+                this.element.style.display = (activeButton === null || activeButton === this) ? "" : "none";
+                this.element.innerText = activeButton === this ? "EXIT" : "HMD";
+            };
 
             // var windowBtn = document.createElement("button");
             // windowBtn.style.cssText = hmdBtn.style.cssText;

src/Cameras/XR/webXRExperienceHelper.ts

@@ -177,18 +177,6 @@ export class WebXRExperienceHelper implements IDisposable {
         this.container.position.rotateByQuaternionAroundPointToRef(rotation, this.camera.globalPosition, this.container.position);
     }
 
-    // /**
-    //  * Checks if the creation options are supported by the xr session
-    //  * @param options creation options
-    //  * @returns true if supported
-    //  */
-    // public supportsSessionAsync(options: XRSessionCreationOptions) {
-    //     if (!this._supported) {
-    //         return Promise.resolve(false);
-    //     }
-    //     return this.sessionManager.supportsSessionAsync(options);
-    // }
-
     /**
      * Disposes of the experience helper
      */

src/Cameras/XR/webXRManagedOutputCanvas.ts

@@ -23,7 +23,7 @@ export class WebXRManagedOutputCanvas implements IDisposable {
      * @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)
      */
-    constructor(helper: WebXRExperienceHelper, canvas?: HTMLCanvasElement) {
+    constructor(private helper: WebXRExperienceHelper, canvas?: HTMLCanvasElement) {
         if (!canvas) {
             canvas = document.createElement('canvas');
             canvas.style.cssText = "position:absolute; bottom:0px;right:0px;z-index:10;width:90%;height:100%;background-color: #000000;";
@@ -53,18 +53,21 @@ export class WebXRManagedOutputCanvas implements IDisposable {
             (this.canvasContext as any) = null;
         } else {
             this._canvas = canvas;
-            this.canvasContext = <any>this._canvas.getContext('webgl2');
+            this.canvasContext = <any>this._canvas.getContext('webgl');
+            if(!this.canvasContext){
+                this.canvasContext = <any>this._canvas.getContext('webgl2');
+            }
         }
     }
 
     private _addCanvas() {
-        if (this._canvas) {
+        if (this._canvas && this._canvas !== this.helper.container.getScene().getEngine().getRenderingCanvas()) {
             document.body.appendChild(this._canvas);
         }
     }
 
     private _removeCanvas() {
-        if (this._canvas && document.body.contains(this._canvas)) {
+        if (this._canvas && document.body.contains(this._canvas) && this._canvas !== this.helper.container.getScene().getEngine().getRenderingCanvas()) {
             document.body.removeChild(this._canvas);
         }
     }

src/Cameras/XR/webXRSessionManager.ts

@@ -5,7 +5,7 @@ import { IDisposable, Scene } from "../../scene";
 import { InternalTexture } from "../../Materials/Textures/internalTexture";
 import { RenderTargetTexture } from "../../Materials/Textures/renderTargetTexture";
 /**
- * Manages an XRSession
+ * Manages an XRSession to work with Babylon's engine
  * @see https://doc.babylonjs.com/how_to/webxr
  */
 export class WebXRSessionManager implements IDisposable {
@@ -118,7 +118,7 @@ export class WebXRSessionManager implements IDisposable {
      * @param sessionMode session mode to check if supported eg. immersive-vr
      * @returns true if supported
      */
-    public supportsSessionModeAsync(sessionMode: string) {
+    public supportsSessionModeAsync(sessionMode: XRSessionMode) {
         if(!(navigator as any).xr || !(navigator as any).xr.supportsSession){
             return Promise.resolve(false);
         }else{

src/Helpers/sceneHelpers.ts

@@ -213,7 +213,7 @@ Scene.prototype.createDefaultVRExperience = function(webVROptions: VRExperienceH
 Scene.prototype.createDefaultXRExperienceAsync = function(): Promise<WebXRExperienceHelper> {
     return WebXRExperienceHelper.CreateAsync(this).then((helper) => {
         var outputCanvas = new WebXRManagedOutputCanvas(helper);
-        return WebXREnterExitUI.CreateAsync(this, helper, { outputCanvasContext: outputCanvas.canvasContext })
+        return WebXREnterExitUI.CreateAsync(this, helper, { webXRManagedOutputCanvas: outputCanvas })
             .then((ui) => {
                 new WebXRInput(helper);
                 return helper;

src/LibDeclarations/webxr.d.ts

@@ -1,29 +1,28 @@
-enum XRSessionMode {
-    "inline",
-    "immersive-vr",
-    "immersive-ar"
-};
+type XRSessionMode =
+    | "inline"
+    | "immersive-vr"
+    | "immersive-ar"
 
-enum XRReferenceSpaceType {
-    "viewer",
-    "local",
-    "local-floor",
-    "bounded-floor",
-    "unbounded"
-};
 
-enum XREnvironmentBlendMode {
-    "opaque",
-    "additive",
-    "alpha-blend",
-};
+type XRReferenceSpaceType =
+    | "viewer"
+    | "local"
+    | "local-floor"
+    | "bounded-floor"
+    | "unbounded"
+
+
+type XREnvironmentBlendMode =
+    | "opaque"
+    | "additive"
+    | "alpha-blend"
 
-enum XRVisibilityState {
-    "visible",
-    "visible-blurred",
-    "hidden",
-};
 
+type XRVisibilityState =
+    | "visible"
+    | "visible-blurred"
+    | "hidden"
+    
 interface XRInputSource {
     handedness:XRHandedness;
     targetRayMode:XRTargetRayMode;