WebXR Ar not working iphone

Parvesh_Garg · July 10, 2020, 10:38am

I am trying to build a new webxr AR in Playcanvas.

The problem I have is that I am not able to run the Ar app of the playcanvas starter on my IPhone Safari, Chrome browser and webxr viewer.

I have a iPhone 6S Plus. IOS Version: 13.5
I have also tried in all above iPhone varients but nothing seemed to work.

other WebXR examples are working on WebXR viewer on iPhone but this is not the case with playcanvas somehow.

Leonidas · July 10, 2020, 10:57am

Hi @Parvesh_Garg,

Are you getting any errors?

I’ve tried the latest Playcanvas ar demo on an old iPad Mini 2 and it seems to be working fine.

Are you able to run it on a non iOS device?

Try also sharing a project url to take a look if you are able.

Parvesh_Garg · July 10, 2020, 11:30am

Hi @Leonidas,

I am trying this Link ‘https://playcanv.as/p/TAYVQgU2/’. But it’s not working.
I am using this code. Please have a look.

this.buttonVr.button.active = this.app.xr.supported && this.app.xr.isAvailable(pc.XRTYPE_VR);
this.buttonAr.button.active = this.app.xr.supported && this.app.xr.isAvailable(pc.XRTYPE_AR);

this.clearColor = this.cameraEntity.camera.clearColor.clone();
this.clearColorAR = new pc.Color(0, 0, 0, 0);

// click button
this.buttonVr.element.on('click', function() {
    // check support
    if (this.app.xr.isAvailable(pc.XRTYPE_VR)) {
        // start session
        this.cameraEntity.camera.startXr(pc.XRTYPE_VR, pc.XRSPACE_LOCALFLOOR);
    }
}, this);

this.buttonAr.element.on('click', function() {
    // check support
    if (this.app.xr.isAvailable(pc.XRTYPE_AR)) {
     
        this.cameraEntity.camera.startXr(pc.XRTYPE_AR, pc.XRSPACE_VIEWER);

    }
}, this);

this.app.keyboard.on('keydown', function(evt) {
    if (evt.key === pc.KEY_ESCAPE) {
        this.app.xr.end();
         this.Splashmenu.enabled = true;
    }
}, this);

this.app.xr.on('start', function() {
    this.buttonVr.enabled = false;
    this.buttonAr.enabled = false;
    
    if (this.app.xr.type === pc.XRTYPE_AR) {
        this.cameraEntity.camera.clearColor = this.clearColorAR;
        this.app.scene.root.findByTag('nonAr').forEach(function(e) {
            e.model.enabled = false;
        });
    }
}, this);

this.app.xr.on('end', function() {
    this.buttonVr.enabled = true;
    this.buttonAr.enabled = true;
    
    this.cameraEntity.camera.clearColor = this.clearColor;
    this.app.scene.root.findByTag('nonAr').forEach(function(e) {
        e.model.enabled = true;
    });
}, this);

this.app.xr.on('available', function() {
    this.buttonVr.button.active = this.app.xr.supported && this.app.xr.isAvailable(pc.XRTYPE_VR);
    this.buttonAr.button.active = this.app.xr.supported && this.app.xr.isAvailable(pc.XRTYPE_AR);
}, this);

yaustar · July 10, 2020, 11:39am

Is WebXR AR supported on iOS? If it is, I’m super surprised!

yaustar · July 10, 2020, 11:43am

It be worth checking if the WebXR examples that do work have some polyfill to help?

Leonidas · July 10, 2020, 11:43am

Ooops, that was my mistake, I was under the impression that it was ar.js in question.

WebXR is still away from Apple world.

yaustar · July 10, 2020, 11:45am

@Parvesh_Garg Can you share the link of the WebXR AR example that worked on your iOS device please?

Parvesh_Garg · July 10, 2020, 11:48am

Hi @yaustar, please download Webxr viwer app on iphone (https://apps.apple.com/us/app/webxr-viewer/id1295998056) and check bellow this link.
https://immersive-web.github.io/webxr-samples/immersive-ar-session.html?usePolyfill=0

yaustar · July 10, 2020, 11:51am

I only have an iPhone 5S to work with here which doesn’t seem to play those examples in the App.

Parvesh_Garg · July 10, 2020, 12:03pm

Please try on iphone 6S, iphone8.

yaustar · July 10, 2020, 12:06pm

Sorry, I don’t have any other iOS devices and I can’t seem to debug the WebXR Viewer to check why XR is not supported.

yaustar · July 10, 2020, 12:24pm

Doing a few tests where I check for navigator.xr each frame in the WebXR viewer and it’s always undefined.

I have no idea how the examples you have are doing this without a polyfill

Parvesh_Garg · July 10, 2020, 12:30pm

I have been looking in for a markerless web based solution for iOS for my clients as the webXR examples are working on all AR supported devices using WebXR viewer but the build I have exported from playcanvas doesen’t seem to work on that also.

can we see what is the issue or if you have any other solution for using markerless AR in iOS.
that would be great

yaustar · July 10, 2020, 12:52pm

I don’t understand why it’s not working for the PlayCanvas examples as we have pretty much the same code for detection etc. I added the WebXr Polyfill and it thinks at immersive-ar is not available.

I’ve said it before but honestly, 8th Wall is your best bet and it works with iOS Safari.

yaustar · July 10, 2020, 12:57pm

I’m doing this every frame:

XrBasic.prototype.update = function (dt) {
        if (navigator.xr) {
          // Checks to ensure that 'immersive-ar' mode is available, and only
          // enables the button if so.
          navigator.xr.isSessionSupported('immersive-ar').then((supported) => {
                if (supported) {
                    console.log('ar supported');
                } else {
                    console.log('ar not supported');
                }
          });
    }
};

And it keeps logging ar not supported

yaustar · July 10, 2020, 1:02pm

This is the project I’m trying to debug with if you are interested: https://playcanvas.com/editor/scene/945284

Published build to see if you get better luck on a newer device: https://playcanv.as/p/xwsQX1GD/

yaustar · July 10, 2020, 2:52pm

@Parvesh_Garg Can you try running the following on your iPhone 6S WebXR viewer please? https://playcanv.as/e/p/xwsQX1GD/

Just found out that the WebXR viewer doesn’t work with iframed apps so this link doesn’t use the iframe.

yaustar · July 10, 2020, 3:51pm

I managed to ‘fix’ but the issues are on the WebXR Viewer side, not PlayCanvas. I’ve just worked around it in a very crappy way.

WebXR Viewer does not support iframes as discussed here: https://github.com/MozillaReality/webxr-ios-js/issues/80

WebXR Viewer has a bug with navigator.xr.addEventListener: https://github.com/MozillaReality/webxr-ios-js/issues/81

Here is an example project that patches around this: https://playcanvas.com/editor/scene/945284

And to launch it in the WebXR Viewer, you MUST run it without the iframe https://playcanv.as/e/p/xwsQX1GD/ (note the extra /e before the /p)

In the project, there is an external file linked so I can patch the XR object before the Engine is started:

The URL is https://yaustar.github.io/playcanvas-hacks/patch-out-xr-event-listener.js which mocks the addEventListener function.

In the script in the project now adds the event listener when the session is started:

    this.app.xr.on('start', function() {
        this.button.enabled = false;
        this.controls.enabled = true && ! this.availableHitTest.enabled;
        
        // Workaround patch for WebXR Viewer
        navigator.xr._addEventListener('devicechange', function () {
			self.app.xr._deviceAvailabilityCheck();
		});
    }, this);

IRONMANROMEO · July 10, 2020, 4:56pm

And to launch it in the WebXR Viewer, you MUST run it without the iframe https://playcanv.as/e/p/xwsQX1GD/ (note the extra /e before the /p )

On iPhone X (iOS 13.5.1)
XRViewer (today’s)

Click on AR rect button
|
Allow usage of Device Motions -> Confirm
|
“Hit test is not available”
|
No camera -> XR supported AR Supported -> now the script is really loaded -> the optional “light estimation” is not supported
|
stop

yaustar · July 10, 2020, 6:09pm

Unfortunately, I haven’t got an iPhone capable of using the WebXR viewer so can’t debug any further. So far all the issues have been with the app rather than PlayCanvas and therefore not really keen spending more time looking into this.