Toggle WebXR Session Mode (VR mode vs. passthrough AR mode)

Questions
1

Babylon JS supports a passthrough AR or MR mode. It works really well on Quest Pro with room setup enabled.

My question is this: is there a way to toggle between passthrough mode and regular VR mode? My guess is no, since the main way to enable passthrough is through the initial call to the createDefaultXRExperienceAsync, but I’d thought I’d ask just in case.

    const xr = await scene.createDefaultXRExperienceAsync({
      uiOptions: {
        sessionMode: "immersive-ar"
      }
    });

Ideally, I like to allow the user already in an immersive session the ability to toggle between these modes. If that’s not possible, I’ll just give them the option of which mode to use before they enter immersive mode.

1 Like
2

cc @RaananW

3

Sadly you guessed right… When starting an XR session you need to provide the type of session you want to start - VR or AR.

What you can do (would be a very interesting experiment) is using the event triggered between sites if you are already in session. Technically, if you click on a link in your XR experience that also supports XR you should enter the XR session instantly, if you use our default experience helper. So theoretically (haven’t tested that!) you could have a hashtag change in your URL - for example #vr and #ar, and enter the session based on this hashtag. You will only need to change the window location in order for that to work.
Note - that might be VERY NAIVE of me to say this will work. It works well between two HTML pages and the same session type, but I have never tested it with hash anchors and different session types… And of course, you need to make sure you stop the session and start a new one on page URL change.

1 Like
4

Thanks for the info. I’ll add this experiment to my list of labs for Canvatorium. I may be a fun problem to tinker with. In the meantime I’ll just add a mode toggle to the page that the user can set prior to entering the session.

1 Like
5

I just found out we can create two XR helpers :slight_smile:
Just they both use the same buttons, and they overlap. So I thought, let’s just move AR button left, leave VR button right, and clearly print AR and VR on buttons.
And there’s this overlay property that contains reference to div, and div contains only one button.
We can manipulate style of either div or button (classes xr-button-overlay and babylonVRicon)

CSS:

  button.babylonVRicon {
    height: 100px;
    width: 160px; 
    font-size: 32px;
  }

AR helper:

        xrHelper.enterExitUI.overlay.children[0].textContent="AR";
        xrHelper.enterExitUI.overlay.style.cssText = xrHelper.enterExitUI.overlay.style.cssText.replace("right","left");

VR helper:

        xrHelper.enterExitUI.overlay.children[0].textContent="VR";
1 Like