How to turn on multiview easily in WebXR?

Questions
1

I’m working on a webxr application that was running into performance issues in VR mode.

These links lead me to enable multiview which has increased FPS by a lot. However the documentation uses a deprecated way of enabling it. (const xrscene.createDefaultVRExperience({useMultiview:true}))
Is there an easy way to enable it using the webxrexperiencehelper instead?

i.e

xrHelper = await WebXRExperienceHelper.CreateAsync(scene);
await xrHelper.enterXRAsync("immersive-vr", "local-floor", undefined, {});
1 Like
3

multi-views in webxr are rendered using the layers feature, which is only available in one browser (namely - the oculus browser, AFAIK). WebXR doesn’t support the kind of multiview in this docs (though I will be the first one to admit - it is not written in those docs and it should be there!).

To enable multiview you will need to enable the layers feature. The layres feature has a flag that will automatically move you to multi-view if it is available:

Layers Test Multiview | Babylon.js Playground (babylonjs.com)

1 Like
4

Hi @RaananW , I’m definitely interested in turning on multiview as well.

Your playground doesn’t actually work in the Oculus Browser for me! I get these in the logs:

image
image1437×195 12.6 KB

5

Lemme check that! :slight_smile:

6

And now I remember why I haven’t fully documented this yet. The WebXR layers feature is still behind a flag in chrome://flags. you will need to enable it (and set the oculus extension for multiview) to get the playground working.

7

@RaananW Thanks for the help! But I’m facing another issue if you could guide me a bit.
Using Multiview with the WebXR layers feature doesn’t seem to be helping, in fact makes the view very very glitchy, and the FPS stays the same compared to not having multiview on.(20-30 FPS)

This is how it is with multiview on using the layers feature.

com.oculus.browser-20220805-174539
com.oculus.browser-20220805-1745391440×1440 120 KB

While the performance metrics using multiview through webVR is much better as shown in the picture.

Any ideas?

8

@RaananW I have tried both of these codes

const baseExperience = (await scene.createDefaultXRExperienceAsync())
      .baseExperience;
    const xrFeaturesManager = baseExperience.featuresManager;
    const layersFeature = xrFeaturesManager.enableFeature(
      BABYLON.WebXRFeatureName.LAYERS
    ) as BABYLON.WebXRLayers;
    const projectionLayer = layersFeature.createProjectionLayer();
    layersFeature.setXRSessionLayers([projectionLayer]);

and

const xr = await scene.createDefaultXRExperienceAsync({
  disableTeleportation: true,
});
const featureManager = xr.baseExperience.featuresManager;
featureManager.enableFeature(
  BABYLON.WebXRFeatureName.LAYERS,
  'latest',
  { preferMultiviewOnInit: true },
  true,
  false
);

but get this error on enabling XR

image
image782×664 43.1 KB

9

@RaananW will be back next monday from vacation so please bear with us in the mean time :slight_smile:

10

I assume this is an import issue. You are using the BABYLON namespace in an npm-based project. Are you importing the entire namespace, or importing individual modules? If so you will need to import the WebXRFeatureName module and use it without the babylon namespace. same goes to the WebXRLayers feature.

11

Not sure how you tested WebVR (as it is deprecated and was removed from all browsers except firefox), but I have never experienced any serious issues with the layers’ multiview. The only issue that always needs to be addressed in multisampling, that is only supported using the OCULUS extension (and not the default chrome extension). Would you be able to share a reproduction of this so we can analyze it?

13

HI was able to solve the above issue with this code

const attachControllers = (xrHelper: WebXRExperienceHelper) => {
  const controllers = new WebXRInput(xrHelper.sessionManager, xrHelper.camera);
  const xrayPointer = new WebXRControllerPointerSelection(
    xrHelper.sessionManager,
    {
      disablePointerUpOnTouchOut: false,
      disableScenePointerVectorUpdate: false,
      forceGazeMode: false,
      xrInput: controllers,
    }
  );
  xrayPointer.displayLaserPointer = true;
  xrayPointer.attach();
  return controllers;
};

export const enterXR = async (scene: Nullable<Scene>) => {
  if (scene !== null) {
    xrHelper = await WebXRExperienceHelper.CreateAsync(scene);
    const xr = attachControllers(xrHelper);
    await xrHelper.enterXRAsync('immersive-vr', 'local-floor', undefined, {});
    const featureManager = xrHelper.featuresManager;
    featureManager.disableFeature(WebXRFeatureName.TELEPORTATION);
    featureManager.enableFeature(WebXRFeatureName.MOVEMENT, 'latest', {
      xrInput: xr,
    });
    featureManager.enableFeature(
      WebXRFeatureName.LAYERS,
      'latest',
      { preferMultiviewOnInit: true },
      true,
      true
    );
  }
};

The meta quest browser has a ‘webgl multiview extension’ under chrome://flags and it has 4 options

  1. default
  2. oculus multiview and ovr multiview 2
  3. ovr multiview 2
  4. disabled

Hope you have reffered to this same flag

I have tried with 2 and 3 options both but the fps seems to remain the same. Is there a debug log or something to test that if its actually on and working.

14

Following this, is there a way to enable Chrome flags from the application for a user on their local browser?

15

no. This is the entire idea behind those flags - the user itself needs to agree to turn them on.

1 Like