WebXR Ar not working iphone

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.

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.

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.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);

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

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

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

WebXR is still away from Apple world.

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

Hi @yaustar, please download Webxr viwer app on iphone (https://apps.apple.com/us/app/webxr-viewer/id1295998056) and check bellow this link.

1 Like

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

Please try on iphone 6S, iphone8.

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.

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 :thinking:

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

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. :man_shrugging:

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

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

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/

@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.

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 () {
    }, this);
1 Like

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

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.