Replacement for WebXR.CreateARButton?

🌵 Needle Engine
1

I have some code where I was triggering the WebXR.CreateARButton to click it through other html elements but in recent Needle versions that is removed, what do I use now for similar functionality? See code attached

image.png
image.png660×805 37.8 KB

TmsController.ts

Original Post on Discord

by user 103054507105067008

2

Hello there – we have an experimental AI bot :robot: that might be able to help you with your question. Would you like to try this out?

3

Hey :wave: this is the new API:

@serializable(WebXR)
webXR!: WebXR;

const btn = webXR.getButtonsContainer().createARButton();
4

We also added a lot more code comments / docs to the WebXR api - so make sure to hover over the methods or types that you get back to get more information.
The buttons container is a custom html component which brings some basic styles if the AR button is parented to it but you can also add it to your own UI elsewhere and style it however you like. The button will do the most important logic automatically (checking if AR is available, detecting device changes to update itself)

That being said: starting a new XR session for AR or VR is a lot easier now so you can also create just a normal html button (or no button at all) and just call NeedleXRSession.start("immersive-vr") or “immersive-ar” - thats all this button does basically too
Or call enterVR or enterAR on the WebXR component (which in turn will do the call mentioned above)

5

Thanks that works for me

by user 103054507105067008

6

Here’s basically all the code for the AR button now:

        const mode: XRSessionMode = "immersive-ar";
        const button = document.createElement("button");
        button.innerText = "Enter AR";
        button.addEventListener("click", () => NeedleXRSession.start(mode, init));
7

While I’m here figuring this out, I’m struggling with the docs on this - how do I replace
const haveAR = WebXR.IsARSupported;
with
const haveAR = this.supportsXR(XRSessionMode)

Do I need to add this in my functions:

  supportsXR(mode: XRSessionMode): boolean {
    return mode === "immersive-vr" || mode === "immersive-ar";
  }

by user 103054507105067008

8

NeedleXRSession.isVRSupported().then(supported => { }) or isXRSupported

9

Do you need this extra check? For… hiding the button?

10

That’s just it, it’s on another script where I just want to store a bool if AR is supported or not

by user 103054507105067008

11

Im not sure what you mean by

 const haveAR = WebXR.IsARSupported;
with
const haveAR = this.supportsXR(XRSessionMode)

Where’s the supportsXR method coming from?

12

You can call
NeedleXRSession.isXRSupported().then(supported => { this.hasXRSupport = supported; }) and set your variable hasXRSupport for example to save it. This could theoretically change at runtime if a VR capable device is plugged in/unplugged. Altough I guess this happens rather seldomly. If you want to support the case however you can add the following code as well:

if (!isMozillaXR()) // WebXR Viewer can't attach events before session start
            navigator.xr?.addEventListener("devicechange", async () => this.hasXRSupport = await NeedleXRSession.isXRSupported();
13

What I did was I saw the docs suggested using using supportsXR(mode: XRSessionMode)
So I searched all scripts for it and all the engine scripts seemed to implement it by putting in

  supportsXR(mode: XRSessionMode): boolean {
    return mode === "immersive-vr" || mode === "immersive-ar";
  }

by user 103054507105067008

14

That works cheers

by user 103054507105067008

15

Do you have a file for me? I havent seen this code before or dont remember seeing it.

16

image.png

by user 103054507105067008

17

You need the WebXR component instance

18

Different script in my Model viewer

by user 103054507105067008

19

it’s not a static function

20

ah your code?