whats new, docs/style

dist/preview release/what's new.md

@@ -10,6 +10,7 @@
   - camera customDefaultRenderTarget to allow cameras to render to a custom render target (eg. xr framebuffer) instead of the canvas ([TrevorDev](https://github.com/TrevorDev))
   - webXR camera which can be updated by a webXRSession ([TrevorDev](https://github.com/TrevorDev))
   - webXRSessionManager to bridge xrSession to babylon's engine/camera ([TrevorDev](https://github.com/TrevorDev))
+  - webXRExperienceHelper to setup a default XR experience ([TrevorDev](https://github.com/TrevorDev))
 
 ## Updates
 

src/Cameras/XR/babylon.webXRExperienceHelper.ts

@@ -7,79 +7,81 @@ module BABYLON {
         /**
          * Container which stores the xr camera and controllers as children. This can be used to move the camera/user as the camera's position is updated by the xr device
          */
-        public container:AbstractMesh;
+        public container: AbstractMesh;
         /**
          * Camera used to render xr content
          */
-        public camera:WebXRCamera;
+        public camera: WebXRCamera;
 
-        /** 
-         * If XR mode has completed being entered 
-         * After calling enterXR() this will be false until the returned promise is resolved 
+        /**
+         * If XR mode has completed being entered
+         * After calling enterXR() this will be false until the returned promise is resolved
          */
         public isInXRMode = false;
-        /** 
+        /**
          * If this is transitioning XR modes
-         * After calling enterXR() this will be true until the returned promise is resolved, then it will be false 
+         * After calling enterXR() this will be true until the returned promise is resolved, then it will be false
          */
         public isInStateTransition = false;
-        
-        private _sessionManager:WebXRSessionManager;
 
-        private _nonVRCamera:Nullable<Camera> = null;
+        private _sessionManager: WebXRSessionManager;
+
+        private _nonVRCamera: Nullable<Camera> = null;
         private _originalSceneAutoClear = true;
 
-        private _outputCanvas:HTMLCanvasElement;
-        private _outputCanvasContext:WebGLRenderingContext;
+        private _outputCanvas: HTMLCanvasElement;
+        private _outputCanvasContext: WebGLRenderingContext;
 
         /**
          * Creates a WebXRExperienceHelper
          * @param scene The scene the helper should be created in
          */
-        constructor(private scene:BABYLON.Scene){
+        constructor(private scene: BABYLON.Scene) {
             this.camera = new BABYLON.WebXRCamera("", scene);
             this._sessionManager = new BABYLON.WebXRSessionManager(scene);
             this.container = new AbstractMesh("", scene);
-            this._sessionManager.initialize()
+            this._sessionManager.initialize();
         }
 
         /**
          * Exits XR mode and returns the scene to its original state
+         * @returns promise that resolves after xr mode has exited
          */
-        public exitXR(){
+        public exitXR() {
             this.isInStateTransition = true;
-            return this._sessionManager.exitXR()
+            return this._sessionManager.exitXR();
         }
 
         /**
-         * Enters XR mode
-         * @param sessionCreationOptions options for the XR session 
+         * 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 frameOfReference frame of reference of the XR session
+         * @returns promise that resolves after xr mode has entered
          */
-        public enterXR(sessionCreationOptions:XRSessionCreationOptions, frameOfReference:string){
+        public enterXR(sessionCreationOptions: XRSessionCreationOptions, frameOfReference: string) {
             this.isInStateTransition = true;
 
             this._createCanvas();
-            if(!sessionCreationOptions.outputContext){
+            if (!sessionCreationOptions.outputContext) {
                 sessionCreationOptions.outputContext = this._outputCanvasContext;
             }
 
-            return this._sessionManager.enterXR(sessionCreationOptions, frameOfReference).then(()=>{                
+            return this._sessionManager.enterXR(sessionCreationOptions, frameOfReference).then(() => {
                 // Cache pre xr scene settings
                 this._originalSceneAutoClear = this.scene.autoClear;
                 this._nonVRCamera = this.scene.activeCamera;
 
                 // Overwrite current scene settings
                 this.scene.autoClear = false;
-                this.scene.activeCamera = this.camera
+                this.scene.activeCamera = this.camera;
 
-                this._sessionManager.onXRFrameObservable.add(()=>{
-                    this.camera.updateFromXRSessionManager(this._sessionManager)
+                this._sessionManager.onXRFrameObservable.add(() => {
+                    this.camera.updateFromXRSessionManager(this._sessionManager);
                 });
 
-                this._sessionManager.onXRSessionEnded.addOnce(()=>{
+                this._sessionManager.onXRSessionEnded.addOnce(() => {
                     // Reset camera rigs output render target to ensure sessions render target is not drawn after it ends
-                    this.camera.rigCameras.forEach((c)=>{
+                    this.camera.rigCameras.forEach((c) => {
                         c.outputRenderTarget = null;
                     });
 
@@ -91,22 +93,22 @@ module BABYLON {
 
                     this.isInStateTransition = false;
                     this.isInXRMode = false;
-                })
+                });
                 this.isInStateTransition = false;
                 this.isInXRMode = true;
-            })
+            });
         }
 
         // create canvas used to mirror/vr xr content in fullscreen
-        private _createCanvas(){
+        private _createCanvas() {
             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 = <any>this._outputCanvas.getContext('xrpresent')
+            this._outputCanvasContext = <any>this._outputCanvas.getContext('xrpresent');
         }
-        private _removeCanvas(){
-            if(this._outputCanvas && document.body.contains(this._outputCanvas)){
+        private _removeCanvas() {
+            if (this._outputCanvas && document.body.contains(this._outputCanvas)) {
                 document.body.removeChild(this._outputCanvas);
             }
         }

src/Cameras/XR/babylon.webXRSessionManager.ts

@@ -4,9 +4,15 @@ module BABYLON {
      * @see https://doc.babylonjs.com/how_to/webxr
      */
     export class WebXRSessionManager {
-        private _xrNavigator: any;
-        private _xrDevice: XRDevice;
-        private _tmpMatrix = new BABYLON.Matrix();
+        /**
+         * Fires every time a new xrFrame arrives which can be used to update the camera
+         */
+        public onXRFrameObservable: Observable<any> = new BABYLON.Observable<any>();
+        /**
+         * Fires when the xr session is ended either by the device or manually done
+         */
+        public onXRSessionEnded: Observable<any> = new BABYLON.Observable<any>();
+
         /** @hidden */
         public _xrSession: XRSession;
         /** @hidden */
@@ -15,8 +21,9 @@ module BABYLON {
         public _sessionRenderTargetTexture: Nullable<RenderTargetTexture> = null;
         /** @hidden */
         public _currentXRFrame: Nullable<XRFrame>;
-        public onXRFrameObservable:Observable<any> = new BABYLON.Observable<any>();
-        public onXRSessionEnded:Observable<any> = new BABYLON.Observable<any>();
+        private _xrNavigator: any;
+        private _xrDevice: XRDevice;
+        private _tmpMatrix = new BABYLON.Matrix();
 
         /**
          * Constructs a WebXRSessionManager, this must be initialized within a user action before usage
@@ -56,18 +63,18 @@ module BABYLON {
                 this._xrSession = session;
 
                 // handle when the session is ended (By calling session.end or device ends its own session eg. pressing home button on phone)
-                this._xrSession.addEventListener("end", ()=>{
+                this._xrSession.addEventListener("end", () => {
                     // Remove render target texture and notify frame obervers
                     this._sessionRenderTargetTexture = null;
 
                     // Restore frame buffer to avoid clear on xr framebuffer after session end
                     this.scene.getEngine().restoreDefaultFramebuffer();
-                    
+
                     // Need to restart render loop as after the session is ended the last request for new frame will never call callback
                     this.scene.getEngine().customAnimationFrameRequester = null;
                     this.onXRSessionEnded.notifyObservers(null);
                     this.scene.getEngine()._renderLoop();
-                }, {once : true})
+                }, {once : true});
 
                 this._xrSession.baseLayer = new XRWebGLLayer(this._xrSession, this.scene.getEngine()._gl);
                 return this._xrSession.requestFrameOfReference(frameOfReferenceType);
@@ -85,7 +92,7 @@ module BABYLON {
                 };
                 // Create render target texture from xr's webgl render target
                 this._sessionRenderTargetTexture = WebXRSessionManager._CreateRenderTargetTextureFromSession(this._xrSession, this.scene);
-                
+
                 // Stop window's animation frame and trigger sessions animation frame
                 window.cancelAnimationFrame(this.scene.getEngine()._frameHandler);
                 this.scene.getEngine()._renderLoop();

src/Engine/babylon.engine.ts

@@ -867,6 +867,7 @@ module BABYLON {
         private _emptyCubeTexture: Nullable<InternalTexture>;
         private _emptyTexture3D: Nullable<InternalTexture>;
 
+        /** @hidden */
         public _frameHandler: number;
 
         private _nextFreeTextureSlots = new Array<number>();

src/babylon.mixins.ts

@@ -197,7 +197,7 @@ interface XRSession {
     addEventListener: Function;
 }
 interface XRSessionCreationOptions {
-    outputContext:WebGLRenderingContext;
+    outputContext: WebGLRenderingContext;
 }
 interface XRLayer {
     getViewport: Function;