Meta Developers

This means that your web pages should draw the page at that frequency. If your page is too slow and can’t maintain the redraw rate, the system compositor has to create the missing frame. To the user this will show up as stuttering animations and black bars at the side of the field of view. See this TimeWarp blog to learn more about how the compositor creates these missing frames.

Why change the default framerate?

If your browser page can’t produce enough data, the system has to produce missing frame which will increase the load. by lowering the frame rate, you will give the page more time to produce a frame. Consequently, the system has to invent fewer missing frames which will decrease system load.

Conversely, if you spent less time than needed on a frame, you could raise the frame rate. Higher frame rates result in more realistic experiences to the user.

WebXR support

Browser version 16.4 and higher has support for new WebXR APIs that let you query and set the current frame rate.

To get the current framerate:

function onXRAnimationFrame(time, xrFrame) {
  ...
  if ( session.frameRate !== undefined) {
    let currentFrameRate = session.frameRate;
    ...
  }
}

To get the list of supported framerates:

function onXRAnimationFrame(time, xrFrame) {
  ...
  if ( session.supportedFrameRates !== undefined) {
    let framerateList = session.supportedFrameRates;
    ...
  }
}

To set a framerate:

function onXRAnimationFrame(time, xrFrame) {
  ...
  if ( session.supportedFrameRates !== undefined) {
    let framerateList = session.supportedFrameRates;
    session.updateTargetFrameRate( framerateList[0] ).then(
        `() => console.log( "frame rate was applied" ) );`
    ...
  }
}

The WebXR group is working on additional support so you have better control over measuring if the system is overloaded or has headroom for a higher frame rate.

Until then, you could measure the time between frames. If it takes longer than the desired frame time (ie longer then 11ms for a 90Hz framerate), you can assume that you should set a lower rate. You could also detect what headset you’re using and tune your application for that device.

Did you find this page helpful?