How to open AR/VR session with my button?

Questions
1

Hi all,

How to start the session when the vr/arButton is clicked, is there some option to plug in my button maybe?

<div id="row">
    <div class="vr ">
        <button  id="vrButton">VR</button>
    </div>
    <div class="ar">
        <button id="arButton">AR</button>
    </div>
</div>
2

Of course. You can either call the enterXR function on your own when clicking the button, or add your button as a custom button to the EnterExit UI, which will do it for you.
To use the enter/exit ui interface you can pass the buttons as part of the options passed to the default experience helper:

WebXRDefaultExperienceOptions | Babylon.js Documentation (babylonjs.com)

WebXREnterExitUIOptions | Babylon.js Documentation (babylonjs.com)

You will want to pass custom buttons as part of the options - these are your two buttons with two different session modes.

3

Thank you,

So instead of doing this :

 var xr = await scene.createDefaultXRExperienceAsync({
    uiOptions: {
      sessionMode: "immersive-ar",
      referenceSpaceType: "local-floor"
    },
    optionalFeatures: true,
    outputCanvasOptions: {
      canvasOptions: {
        framebufferScaleFactor: 0.5
      }
    }
  });

I replace createDefaultXRExperienceAsync with new WebXREnterExitUI(scene, options{…}) and pass all the same options as well as my buttons?

4

you can still use the default XR experience and configure the UI options using custom buttons. if you add custom buttons you will need to configure a session mode per button.

Per button you need to create this - WebXREnterExitUIButton | Babylon.js Documentation (babylonjs.com)

so:

const button1 = new WebXREnterExitUIButton(theHtmlElement, "immersive-vr", "local-floor");
const button2 = new WebXREnterExitUIButton(theHtmlElement, "immersive-ar", "unbounded");
const buttonsArray = [button1, button2];

// now pass it to the options
var xr = await scene.createDefaultXRExperienceAsync({
    uiOptions: {
      customButtons: buttonsArray
    },
    optionalFeatures: true,
    outputCanvasOptions: {
      canvasOptions: {
        framebufferScaleFactor: 0.5
      }
    }
  });
1 Like
5

Thank you very much. Big fan of Babylon and the community

6

Sorry for bumping this up i have some issues if you don’t mind to take a look
This code:

const htmlButton = document.getElementById("arButton")
const arButton = new WebXREnterExitUIButton(htmlButton, "immersive-ar", "local-floor");

    const xr = await scene.createDefaultXRExperienceAsync({
        uiOptions: {
            customButtons: arButton
        },
        optionalFeatures: true,
        outputCanvasOptions: {
            canvasOptions: {
                framebufferScaleFactor: 0.5
            }
        }

    });

Shows these errors in the logger:

BJS - [16:27:58]: Error initializing XR
BJS - [16:27:58]: TypeError: this._buttons.map is not a function

Default ar button works fine, but i don’t understand why it won’t work everything looks ok i also tried to add

disableDefaultUI: true

With that it does not show any errors but it wont open ar session

7

it needs to be an array (like in my code). wrap the button in

8

Oh nice, one more question, is there a way to disable applied styling to the button because it’s changed it’s original position, but it does work now

disableDefaultUI: true
makes the button stay in original place but then it wont open ar session, sorry to bother you with this

9

oh, good question!

Are you referring to custom buttons? We don’t add any styling to custom buttons. We do, however, add a class to the overlay that contains them. so you can use CSS to style them if you want. If you wish to change the default button overlay, you can use CSS as well. The CSS class you would want to change is babylonVRicon

10

No sorry I meant default one provided by babylon js, I asked because the button I created changed it’s position since being passed into defaultXRExperience()

Nice thank you, I will try something with that later