Refactor, starting down the road to check-in.

src/Cameras/XR/index.ts

@@ -7,5 +7,5 @@ export * from "./webXRControllerPointerSelection";
 export * from "./webXRControllerModelLoader";
 export * from "./webXRController";
 export * from "./webXRManagedOutputCanvas";
-export * from "./webXROutputTarget";
+export * from "./webXRTypes";
 export * from "./webXRSessionManager";

src/Cameras/XR/webXRDefaultExperience.ts

@@ -4,7 +4,7 @@ import { WebXRInput } from './webXRInput';
 import { WebXRControllerModelLoader } from './webXRControllerModelLoader';
 import { WebXRControllerPointerSelection } from './webXRControllerPointerSelection';
 import { WebXRControllerTeleportation } from './webXRControllerTeleportation';
-import { WebXROutputTarget } from './webXROutputTarget';
+import { WebXRRenderTarget } from './webXRTypes';
 import { WebXREnterExitUI } from './webXREnterExitUI';
 import { AbstractMesh } from '../../Meshes/abstractMesh';
 
@@ -54,7 +54,7 @@ export class WebXRDefaultExperience {
     /**
      * Default target xr should render to
      */
-    public outputTarget: WebXROutputTarget;
+    public renderTarget: WebXRRenderTarget;
 
     /**
      * Creates the default xr experience
@@ -79,11 +79,11 @@ export class WebXRDefaultExperience {
             }
 
             // Create the WebXR output target
-            result.outputTarget = result.baseExperience.sessionManager.getWebXROutputTarget(xrHelper);
+            result.renderTarget = result.baseExperience.sessionManager.getWebXROutputTarget(xrHelper.onStateChangedObservable);
 
             if (!options.disableDefaultUI) {
                 // Create ui for entering/exiting xr
-                return WebXREnterExitUI.CreateAsync(scene, result.baseExperience, { outputTarget: result.outputTarget }).then((ui) => {
+                return WebXREnterExitUI.CreateAsync(scene, result.baseExperience, { renderTarget: result.renderTarget }).then((ui) => {
                     result.enterExitUI = ui;
                 });
             } else {
@@ -111,8 +111,8 @@ export class WebXRDefaultExperience {
         if (this.enterExitUI) {
             this.enterExitUI.dispose();
         }
-        if (this.outputTarget) {
-            this.outputTarget.dispose();
+        if (this.renderTarget) {
+            this.renderTarget.dispose();
         }
     }
 }

src/Cameras/XR/webXREnterExitUI.ts

@@ -1,8 +1,8 @@
 import { Nullable } from "../../types";
 import { Observable } from "../../Misc/observable";
 import { IDisposable, Scene } from "../../scene";
-import { WebXRExperienceHelper, WebXRState } from "./webXRExperienceHelper";
-import { WebXROutputTarget } from './webXROutputTarget';
+import { WebXRExperienceHelper } from "./webXRExperienceHelper";
+import { WebXRState, WebXRRenderTarget } from './webXRTypes';
 /**
  * Button which can be used to enter a different mode of XR
  */
@@ -36,7 +36,7 @@ export class WebXREnterExitUIOptions {
     /**
      * Context to enter xr with
      */
-    outputTarget?: Nullable<WebXROutputTarget>;
+    renderTarget?: Nullable<WebXRRenderTarget>;
 
     /**
      * User provided buttons to enable/disable WebXR. The system will provide default if not set
@@ -86,8 +86,8 @@ export class WebXREnterExitUI implements IDisposable {
                             return;
                         } else if (helper.state == WebXRState.NOT_IN_XR) {
                             ui._updateButtons(ui._buttons[i]);
-                            if (options.outputTarget) {
-                                await helper.enterXRAsync(ui._buttons[i].sessionMode, ui._buttons[i].referenceSpaceType, options.outputTarget);
+                            if (options.renderTarget) {
+                                await helper.enterXRAsync(ui._buttons[i].sessionMode, ui._buttons[i].referenceSpaceType, options.renderTarget);
                             }
                         }
                     };

src/Cameras/XR/webXRExperienceHelper.ts

@@ -6,28 +6,8 @@ import { AbstractMesh } from "../../Meshes/abstractMesh";
 import { Camera } from "../../Cameras/camera";
 import { WebXRSessionManager } from "./webXRSessionManager";
 import { WebXRCamera } from "./webXRCamera";
-import { WebXROutputTarget } from './webXROutputTarget';
-/**
- * States of the webXR experience
- */
-export enum WebXRState {
-    /**
-     * Transitioning to being in XR mode
-     */
-    ENTERING_XR,
-    /**
-     * Transitioning to non XR mode
-     */
-    EXITING_XR,
-    /**
-     * In XR mode and presenting
-     */
-    IN_XR,
-    /**
-     * Not entered XR mode
-     */
-    NOT_IN_XR
-}
+import { WebXRState, WebXRRenderTarget } from './webXRTypes';
+
 /**
  * Base set of functionality needed to create an XR experince (WebXRSessionManager, Camera, StateManagement, etc.)
  * @see https://doc.babylonjs.com/how_to/webxr
@@ -110,10 +90,10 @@ export class WebXRExperienceHelper implements IDisposable {
      * Enters XR mode (This must be done within a user interaction in most browsers eg. button click)
      * @param sessionCreationOptions options for the XR session
      * @param referenceSpaceType frame of reference of the XR session
-     * @param outputTarget the output canvas that will be used to enter XR mode
+     * @param renderTarget the output canvas that will be used to enter XR mode
      * @returns promise that resolves after xr mode has entered
      */
-    public enterXRAsync(sessionCreationOptions: XRSessionMode, referenceSpaceType: XRReferenceSpaceType, outputTarget: WebXROutputTarget) {
+    public enterXRAsync(sessionCreationOptions: XRSessionMode, referenceSpaceType: XRReferenceSpaceType, renderTarget: WebXRRenderTarget) {
         if (!this._supported) {
             throw "XR session not supported by this browser";
         }
@@ -121,9 +101,9 @@ export class WebXRExperienceHelper implements IDisposable {
         return this.sessionManager.initializeSessionAsync(sessionCreationOptions).then(() => {
             return this.sessionManager.setReferenceSpaceAsync(referenceSpaceType);
         }).then(() => {
-            return outputTarget.initializeXRLayerAsync(this.sessionManager.session);
+            return renderTarget.initializeXRLayerAsync(this.sessionManager.session);
         }).then(() => {
-            return this.sessionManager.updateRenderStateAsync({ depthFar: this.camera.maxZ, depthNear: this.camera.minZ, baseLayer: outputTarget.xrLayer! });
+            return this.sessionManager.updateRenderStateAsync({ depthFar: this.camera.maxZ, depthNear: this.camera.minZ, baseLayer: renderTarget.xrLayer! });
         }).then(() => {
             return this.sessionManager.startRenderingToXRAsync();
         }).then(() => {

src/Cameras/XR/webXRInput.ts

@@ -1,8 +1,9 @@
 import { Nullable } from "../../types";
 import { Observer, Observable } from "../../Misc/observable";
 import { IDisposable } from "../../scene";
-import { WebXRExperienceHelper, WebXRState } from "./webXRExperienceHelper";
+import { WebXRExperienceHelper } from "./webXRExperienceHelper";
 import { WebXRController } from './webXRController';
+import { WebXRState } from './webXRTypes';
 
 /**
  * XR input used to track XR inputs such as controllers/rays

src/Cameras/XR/webXRManagedOutputCanvas.ts

@@ -1,12 +1,16 @@
 import { Nullable } from "../../types";
-import { WebXRExperienceHelper, WebXRState } from "./webXRExperienceHelper";
-import { WebXROutputTarget } from "./webXROutputTarget";
+import { Observable } from "../../Misc/observable";
+import { ThinEngine } from '../../Engines/thinEngine';
+import { WebXRState, WebXRRenderTarget } from "./webXRTypes";
 
 /**
  * Creates a canvas that is added/removed from the webpage when entering/exiting XR
  */
-export class WebXRManagedOutputCanvas implements WebXROutputTarget {
+export class WebXRManagedOutputCanvas implements WebXRRenderTarget {
+
+    private _engine: ThinEngine;
     private _canvas: Nullable<HTMLCanvasElement> = null;
+
     /**
      * xrpresent context of the canvas which can be used to display/mirror xr content
      */
@@ -29,20 +33,21 @@ export class WebXRManagedOutputCanvas implements WebXROutputTarget {
 
     /**
      * 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 engine the Babylon engine
+     * @param onStateChangedObservable the mechanism by which the canvas will be added/removed based on XR state
      * @param canvas The canvas to be added/removed (If not specified a full screen canvas will be created)
      */
-    constructor(private helper: WebXRExperienceHelper, canvas?: HTMLCanvasElement) {
+    constructor(engine: ThinEngine, onStateChangedObservable: Observable<WebXRState>, 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;";
         }
         this._setManagedOutputCanvas(canvas);
-        helper.onStateChangedObservable.add((stateInfo) => {
+        onStateChangedObservable.add((stateInfo) => {
             if (stateInfo == 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 == WebXRState.NOT_IN_XR) {
+            } else if (stateInfo == WebXRState.NOT_IN_XR) {
                 this._removeCanvas();
             }
         });
@@ -70,13 +75,13 @@ export class WebXRManagedOutputCanvas implements WebXROutputTarget {
     }
 
     private _addCanvas() {
-        if (this._canvas && this._canvas !== this.helper.container.getScene().getEngine().getRenderingCanvas()) {
+        if (this._canvas && this._canvas !== this._engine.getRenderingCanvas()) {
             document.body.appendChild(this._canvas);
         }
     }
 
     private _removeCanvas() {
-        if (this._canvas && document.body.contains(this._canvas) && this._canvas !== this.helper.container.getScene().getEngine().getRenderingCanvas()) {
+        if (this._canvas && document.body.contains(this._canvas) && this._canvas !== this._engine.getRenderingCanvas()) {
             document.body.removeChild(this._canvas);
         }
     }

src/Cameras/XR/webXRSessionManager.ts

@@ -4,9 +4,9 @@ import { Nullable } from "../../types";
 import { IDisposable, Scene } from "../../scene";
 import { InternalTexture } from "../../Materials/Textures/internalTexture";
 import { RenderTargetTexture } from "../../Materials/Textures/renderTargetTexture";
-import { WebXROutputTarget } from './webXROutputTarget';
-import { WebXRExperienceHelper } from '../../Legacy/legacy';
+import { WebXRRenderTarget } from './webXRTypes';
 import { WebXRManagedOutputCanvas } from './webXRManagedOutputCanvas';
+import { WebXRState } from '../../Legacy/legacy';
 
 interface IRenderTargetProvider {
     getRenderTargetForEye(eye: XREye): RenderTargetTexture;
@@ -200,15 +200,15 @@ export class WebXRSessionManager implements IDisposable {
 
     /**
      * Creates a WebXROutputTarget object for the XR session
-     * @param xrHelper optional, helper class for event management, used only for Web scenarios
+     * @param onStateChangedObservable optional, mechanism for enabling/disabling XR rendering canvas, used only on Web
      * @returns a WebXR output target to which the session can render
      */
-    public getWebXROutputTarget(xrHelper?: WebXRExperienceHelper) : WebXROutputTarget {
+    public getWebXROutputTarget(onStateChangedObservable?: Observable<WebXRState>) : WebXRRenderTarget {
         if (this._xrNavigator.xr.native) {
             return this._xrNavigator.xr.getWebXROutputTarget(this.scene.getEngine());
         }
         else {
-            return new WebXRManagedOutputCanvas(xrHelper!, this.scene.getEngine().getRenderingCanvas() as HTMLCanvasElement);
+            return new WebXRManagedOutputCanvas(this.scene.getEngine(), onStateChangedObservable!, this.scene.getEngine().getRenderingCanvas() as HTMLCanvasElement);
         }
     }
 

src/Cameras/XR/webXROutputTarget.ts

@@ -1,7 +1,32 @@
 import { Nullable } from "../../types";
 import { IDisposable } from "../../scene";
 
-export interface WebXROutputTarget extends IDisposable {
+/**
+ * States of the webXR experience
+ */
+export enum WebXRState {
+    /**
+     * Transitioning to being in XR mode
+     */
+    ENTERING_XR,
+    /**
+     * Transitioning to non XR mode
+     */
+    EXITING_XR,
+    /**
+     * In XR mode and presenting
+     */
+    IN_XR,
+    /**
+     * Not entered XR mode
+     */
+    NOT_IN_XR
+}
+
+/**
+ * Abstraction of the XR render target
+ */
+export interface WebXRRenderTarget extends IDisposable {
     /**
      * xrpresent context of the canvas which can be used to display/mirror xr content
      */

src/Engines/nativeEngine.ts

@@ -158,6 +158,7 @@ class NativeTextureFormat {
     public static readonly RGBA32F = 1;
 }
 
+/** @hidden */
 class NativeTexture extends InternalTexture {
     public getInternalTexture(): InternalTexture {
         return this;