WebXR Support

build/dependencies.txt

@@ -109,8 +109,7 @@
 ../src/input/touch.js
 ../src/input/controller.js
 ../src/input/element-input.js
-../src/vr/vr-manager.js
-../src/vr/vr-display.js
+../src/xr/xr-manager.js
 ../src/net/http.js
 ../src/script/script-registry.js
 ../src/script/script.js

src/callbacks.js

@@ -86,12 +86,6 @@
  * @param {pc.Vec3} cameraForward - The forward vector of the camera.
  */
 
-/**
- * @callback pc.callbacks.VrCamera
- * @description Callback used by {@link pc.CameraComponent#enterVr} and {@link pc.CameraComponent#exitVr}.
- * @param {string|null} err - On success it is null on failure it is the error message.
- */
-
 /**
  * @private
  * @callback pc.callbacks.CreateScript
@@ -162,12 +156,7 @@
  */
 
 /**
- * @callback pc.callbacks.VrDisplay
- * @description Callback used by {@link pc.VrDisplay#requestPresent} and {@link pc.VrDisplay#exitPresent}.
- * @param {string|null} err - The error message if presenting fails, or null if the call succeeds.
- */
-
-/**
- * @callback pc.callbacks.VrFrame
- * @description Callback used by {@link pc.VrDisplay#requestAnimationFrame}.
+ * @callback pc.callbacks.XrError
+ * @description Callback used by {@link pc.XrManager#endXr} and {@link pc.XrManager#startXr}.
+ * @param {Error|null} err The Error object or null if operation was successfull.
  */

src/framework/application.js

@@ -124,6 +124,17 @@ Object.assign(pc, function () {
      * this.app.systems.sound.volume = 0.5;
      */
 
+    /**
+     * @name pc.Application#xr
+     * @type {pc.XrManager}
+     * @description The XR Manager that provides ability to start VR/AR sessions.
+     * @example
+     * // check if VR is available
+     * if (app.xr.isAvailable(pc.XR_TYPE_IMMERSIVE_VR)) {
+     *     // VR is available
+     * }
+     */
+
     /**
      * @name pc.Application#loader
      * @type {pc.ResourceLoader}
@@ -255,11 +266,12 @@ Object.assign(pc, function () {
         this._librariesLoaded = false;
         this._fillMode = pc.FILLMODE_KEEP_ASPECT;
         this._resolutionMode = pc.RESOLUTION_FIXED;
-        this._allowResize = true;
 
         // for compatibility
         this.context = this;
 
+        options.graphicsDeviceOptions.xrCompatible = true;
+
         this.graphicsDevice = new pc.GraphicsDevice(canvas, options.graphicsDeviceOptions);
         this.stats = new pc.ApplicationStats(this.graphicsDevice);
         this._audioManager = new pc.SoundManager(options);
@@ -535,7 +547,7 @@ Object.assign(pc, function () {
         if (this.elementInput)
             this.elementInput.app = this;
 
-        this.vr = null;
+        this.xr = new pc.XrManager(this);
 
         this._inTools = false;
 
@@ -1163,8 +1175,6 @@ Object.assign(pc, function () {
 
             this.graphicsDevice.updateClientRect();
 
-            if (this.vr) this.vr.poll();
-
             // #ifdef PROFILER
             this.stats.frame.updateStart = pc.now();
             // #endif
@@ -1379,7 +1389,9 @@ Object.assign(pc, function () {
          * @returns {object} A object containing the values calculated to use as width and height.
          */
         resizeCanvas: function (width, height) {
-            if (!this._allowResize) return; // prevent resizing (e.g. if presenting in VR HMD)
+            // prevent resizing when in XR session
+            if (this.xr && this.xr.session)
+                return;
 
             var windowWidth = window.innerWidth;
             var windowHeight = window.innerHeight;
@@ -1565,29 +1577,6 @@ Object.assign(pc, function () {
             }
         },
 
-        /**
-         * @function
-         * @name pc.Application#enableVr
-         * @description Create and assign a {@link pc.VrManager} object to allow this application render in VR.
-         */
-        enableVr: function () {
-            if (!this.vr) {
-                this.vr = new pc.VrManager(this);
-            }
-        },
-
-        /**
-         * @function
-         * @name pc.Application#disableVr
-         * @description Destroy the {@link pc.VrManager}.
-         */
-        disableVr: function () {
-            if (this.vr) {
-                this.vr.destroy();
-                this.vr = null;
-            }
-        },
-
         _onSkyboxChange: function (asset) {
             this.scene.setSkybox(asset.resources);
         },
@@ -1740,10 +1729,7 @@ Object.assign(pc, function () {
 
             pc.destroyPostEffectQuad();
 
-            if (this.vr) {
-                this.vr.destroy();
-                this.vr = null;
-            }
+            this.xr.sessionEnd();
 
             this.graphicsDevice.destroy();
             this.graphicsDevice = null;
@@ -1789,13 +1775,19 @@ Object.assign(pc, function () {
     // create tick function to be wrapped in closure
     var makeTick = function (_app) {
         var app = _app;
-        return function (timestamp) {
-            if (!app.graphicsDevice) {
+        var frameRequest;
+
+        return function (timestamp, frame) {
+            if (!app.graphicsDevice)
                 return;
-            }
 
             Application._currentApplication = app;
 
+            if (frameRequest) {
+                cancelAnimationFrame(frameRequest);
+                frameRequest = null;
+            }
+
             // have current application pointer in pc
             pc.app = app;
 
@@ -1808,20 +1800,27 @@ Object.assign(pc, function () {
             app._time = now;
 
             // Submit a request to queue up a new animation frame immediately
-            if (app.vr && app.vr.display) {
-                app.vr.display.requestAnimationFrame(app.tick);
+            if (app.xr.session) {
+                frameRequest = app.xr.session.requestAnimationFrame(app.tick);
             } else {
-                requestAnimationFrame(app.tick);
+                frameRequest = requestAnimationFrame(app.tick);
             }
 
-            if (app.graphicsDevice.contextLost) {
+            if (app.graphicsDevice.contextLost)
                 return;
-            }
 
             // #ifdef PROFILER
             app._fillFrameStats(now, dt, ms);
             // #endif
 
+            if (frame) app.xr.calculateViews(frame);
+
+            if (frame) {
+                app.graphicsDevice.defaultFramebuffer = frame.session.renderState.baseLayer.framebuffer;
+            } else {
+                app.graphicsDevice.defaultFramebuffer = null;
+            }
+
             app.update(dt);
 
             if (app.autoRender || app.renderNextFrame) {
@@ -1835,10 +1834,6 @@ Object.assign(pc, function () {
 
             app.fire("frameend", _frameEndData);
             app.fire("frameEnd", _frameEndData);// deprecated old event, remove when editor updated
-
-            if (app.vr && app.vr.display && app.vr.display.presenting) {
-                app.vr.display.submitFrame();
-            }
         };
     };