How to enable Fixed Foveated Rendering in Oculus Browser

The oculus documentation explains well what FFR is, but does not provide a clear indication on how to actually enable it (from a javascript web app standpoint).

So here is a simplified implementation example :

navigator.getVRDisplays().then(function(displays) {
  const VRDisplay = displays[0];
  const canvas = document.getElementById('your-canvas-id');

  // NOTE : requestPresent should only be called inside a
  // user gesture event callback (ex: onclick event on a button)
  VRDisplay.requestPresent([{
    source      : canvas,
    attributes  : { foveationLevel: 3 },
  }])
  .then(function() {
    // ...
  });
});

Quick reminder of possible values for foveationLevel :

  • 0 = none
  • 1 = low
  • 2 = medium
  • 3 = high

Also note that : FFR is currently only supported by Oculus Go and Quest; on Gear VR it will be ignored.