Quick Look button is tied to enable AR on WebXR Component

🌵 Needle Engine
1

I have a web build I have AR and VR disabled on unless the url parameters have a string that turns them on at runtime. I noticed the iOS quick look button won’t ever show unless AR is enabled in the build initially.

In the scenario of having AR enabled in the build, the Quick look button always shows but I want this to be optional so that I can disable AR/Quick look via url params.

Is it possible to make Quick Look separate to the AR WebXR setting?

Original Post on Discord

by user 103054507105067008

2

Code snippet of what I am doing in start, if Enable AR and VR are ticked on the WebXR component but the Create AR/VR buttons are disabled, this doesn’t work. This only works if Enable AR and VR are unticked in the build for some reason.

it’s like if Enable AR/VR is true already, , .createARButton and .createVRButton don’t work

const isAR = getParam("isAR");
        const isVR = getParam("isVR");
        console.log("Had file url: ", fileUrl)
        if(isAR == true || isVR == true)
        {
            //Disable XR Script first to invoke methods
             //@ts-ignore
             GameObject.setActive(this.xrParent, false);
            if(isAR == true)
            {
                console.log("Is AR: ", isAR);
                //@ts-ignore
                this.xrScript.enableAR = true;
                //@ts-ignore
                this.xrScript.createARButton = true;
            }
            if(isVR == true)
            {
                console.log("Is VR: ", isVR);
                //@ts-ignore
                this.xrScript.enableVR = true;
                //@ts-ignore
                this.xrScript.createVRButton = true;
            }
        //@ts-ignore
            GameObject.setActive(this.xrParent, true);

by user 103054507105067008

3

What’s your usecase for being able to only show the Quicklook button on iOS and no AR support for Android?

4

It’s a model viewer to preview models online - sometimes it will be sent out and I don’t want a client to see it in AR/VR so I made it an optional parameter in the url

by user 103054507105067008

5

So currently that logic above works great if Enable AR/VR are off in the build by default, I can then enable AR/VR by url params but now I found the Quick look button only shows ever if Enable AR is already on

by user 103054507105067008

6

I’ll upload the scene as a bug report now as I’m off work until next wednesday in case it helps you see what I’m doing

by user 103054507105067008

7

Btw perhaps you can just inject your code/logic via the @prefix decorator

8

then you can run it inside the WebXR component directly

9

have a look at Typescript Decorators | Needle Engine Documentation

10

That’s pretty powerful :slightly_smiling_face:

11

That’s a cool idea, might have to try it out. For now the setup I have is great but just some means of programmatically hide/showing the quick look button at runtime would be cool. For example if there was a larger experience where I didn’t want to show the quick look button until later on ie. After a cutscene or user interacting with something to unlock quick look

by user 103054507105067008

12

Yeah I see, makes total sense.

13

One thing I’ve seen used for this is rendering custom AR/VR buttons and invoking the functionality from code instead of using the built-in ones - this way you also have full control over when they are shown. AR/VR would be on from the start, since that also does all the support checks and so on.
You can take a look at the custom XR buttons sample

14

Will refer back to that next week for sure

by user 103054507105067008

15

I tried ## [3.6.15] - 2023-06-22 which has Fix: USDZExporter Quicklook button not being removed when exporter gets removed or disabled but if the AR is disabled then re-enabled programmatically, the quick look button doesn’t show. Is there a way in that to programmatically show it once AR is enabled at runtime?

by user 103054507105067008

16

For example in this instance the USDZExporter.js script has an onEnable method I can’t access in code through a .ts script - I am hoping to just enable and disable it when needed to trigger this.addQuicklookButton();

by user 103054507105067008

17

What does “when the ar is disabled” mean? The change was referring to the usdzexporter component becoming disabled (either by the gameobject being removed or setting enabled to false)

18

If the WebXR Script has the Enable AR and Create AR button disabled, then I programmatically enable those after in code I’m hoping to then trigger the onEnable() function of the USDZExporter script - will try messing with what gameobject it is on like putting it on a child of the scene called Content

by user 103054507105067008

19

SetActive false then true on the Gameobject that the USDZExporter component is on doesn’t seem to fire off its onEnable events again

by user 103054507105067008

20

Found a nice quick way to do this programmatically :slightly_smiling_face:

    let container =
      this.context.domElement.shadowRoot.querySelector(".webxr-buttons");
    console.log(container);

    container.style.display = "none";

Hope this helps others, just do this if you want to hide the webXR buttons and the Quick Look button

by user 103054507105067008