Set WebXR's fixedFoveation property based on foveationLevel (fixes #5108

) (#5110) Co-authored-by: Noeri Huisman <mrxz@users.noreply.github.com>
aframevr · Sep 8, 2022 · 34665ed · 34665ed
1 parent 54022b8
commit 34665ed
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 12 deletions.
diff --git a/docs/components/renderer.md b/docs/components/renderer.md
@@ -31,7 +31,7 @@ It also configures presentation attributes when entering WebVR/WebXR.
 | antialias               | Whether to perform antialiasing. If `auto`, antialiasing is disabled on mobile. | auto          |
 | colorManagement         | Whether to use a color-managed linear workflow.                                 | false         |
 | highRefreshRate         | Toggles 72hz mode on Oculus Browser. Defaults to 60hz.                          | false         |
-| foveationLevel          | Enables foveation in VR to improve perf. 0 none, 1 low, 2 medium, 3 high        | 0             |
+| foveationLevel          | Amount of foveation used in VR to improve perf, from 0 (min) to 1 (max).        | 1             |
 | sortObjects             | Whether to sort objects before rendering.                                       | false         |
 | physicallyCorrectLights | Whether to use physically-correct light attenuation.                            | false         |
 | maxCanvasWidth          | Maximum canvas width. Uses the size multiplied by device pixel ratio. Does not limit canvas width if set to -1.                                | 1920            |
@@ -69,9 +69,9 @@ Browser in Oculus Go and switches rendering from 60hz to 72hz.
 
 ### foveationLevel
 
-Sets the level of requested foveation which renders fewer pixels around the edges of the viewport
-when in stereo rendering mode on certain systems. This is currently supported by the Oculus Browser
-on the Oculus Go with values ranging from 0 (none) to 3 (high). 
+Controls the amount of foveation which renders fewer pixels near the edges of the user's field of view
+when in stereo rendering mode on certain systems. The value should be in the range of 0 to 1, where
+0 is the minimum and 1 the maximum amount of foveation. This is currently supported by the Oculus Browser.
 
 ### sortObjects
 

diff --git a/src/core/scene/a-scene.js b/src/core/scene/a-scene.js
@@ -293,6 +293,7 @@ module.exports.AScene = registerElement('a-scene', {
 
         // Has VR.
         if (this.checkHeadsetConnected() || this.isMobile) {
+          var rendererSystem = self.getAttribute('renderer');
           vrManager.enabled = true;
 
           if (this.hasWebXR) {
@@ -309,7 +310,9 @@ module.exports.AScene = registerElement('a-scene', {
                 function requestSuccess (xrSession) {
                   self.xrSession = xrSession;
                   vrManager.layersEnabled = xrInit.requiredFeatures.indexOf('layers') !== -1;
-                  vrManager.setSession(xrSession);
+                  vrManager.setSession(xrSession).then(function () {
+                    vrManager.setFoveation(rendererSystem.foveationLevel);
+                  });
                   xrSession.addEventListener('end', self.exitVRBound);
                   enterVRSuccess(resolve);
                 },
@@ -328,10 +331,8 @@ module.exports.AScene = registerElement('a-scene', {
               enterVRSuccess();
               return Promise.resolve();
             }
-            var rendererSystem = this.getAttribute('renderer');
             var presentationAttributes = {
-              highRefreshRate: rendererSystem.highRefreshRate,
-              foveationLevel: rendererSystem.foveationLevel
+              highRefreshRate: rendererSystem.highRefreshRate
             };
 
             return vrDisplay.requestPresent([{

diff --git a/src/systems/renderer.js b/src/systems/renderer.js
@@ -23,7 +23,7 @@ module.exports.System = registerSystem('renderer', {
     colorManagement: {default: false},
     gammaOutput: {default: false},
     alpha: {default: true},
-    foveationLevel: {default: 0}
+    foveationLevel: {default: 1}
   },
 
   init: function () {
@@ -59,6 +59,7 @@ module.exports.System = registerSystem('renderer', {
     var toneMappingName = this.data.toneMapping.charAt(0).toUpperCase() + this.data.toneMapping.slice(1);
     renderer.toneMapping = THREE[toneMappingName + 'ToneMapping'];
     renderer.toneMappingExposure = data.exposure;
+    renderer.xr.setFoveation(data.foveationLevel);
   },
 
   applyColorCorrection: function (colorOrTexture) {

diff --git a/tests/__init.test.js b/tests/__init.test.js
@@ -36,6 +36,7 @@ setup(function () {
       getDevice: function () { return {requestPresent: function () {}}; },
       isPresenting: function () { return true; },
       setDevice: function () {},
+      setFoveation: function () {},
       setPoseTarget: function () {},
       dispose: function () {},
       enabled: false

diff --git a/tests/systems/renderer.test.js b/tests/systems/renderer.test.js
@@ -12,7 +12,7 @@ suite('renderer', function () {
     sceneEl.addEventListener('loaded', function () {
       // Verify the properties which are part of the renderer system schema.
       var rendererSystem = sceneEl.getAttribute('renderer');
-      assert.strictEqual(rendererSystem.foveationLevel, 0);
+      assert.strictEqual(rendererSystem.foveationLevel, 1);
       assert.strictEqual(rendererSystem.highRefreshRate, false);
       assert.strictEqual(rendererSystem.physicallyCorrectLights, false);
       assert.strictEqual(rendererSystem.sortObjects, false);
@@ -71,10 +71,10 @@ suite('renderer', function () {
 
   test('change renderer foveationLevel', function (done) {
     var sceneEl = createScene();
-    sceneEl.setAttribute('renderer', 'foveationLevel: 2');
+    sceneEl.setAttribute('renderer', 'foveationLevel: 0.5');
     sceneEl.addEventListener('loaded', function () {
       var rendererSystem = sceneEl.getAttribute('renderer');
-      assert.strictEqual(rendererSystem.foveationLevel, 2);
+      assert.strictEqual(rendererSystem.foveationLevel, 0.5);
       done();
     });
     document.body.appendChild(sceneEl);