Updating WebVR to WebXR: Magic Window (Single View VR)

Help & Support
1

I’m currently updating my WebVR projects to the WebXR-Polyfill.
The Stereo VR mode is no problem, but how could the magic window mode be integrated? In the old WebVR implementation it was a simple assignment of:
this.cameraEntity.camera.vrDisplay = this.app.vr.display;

Is there a similiar functionality within the xr-Implementation? Or do I have to write my own mapping of the device orientation to the camera?
I also have to note that I currently route all xr-Stuff to the WebXR-Polyfill (also native xr-capable devices -> android). The current code sections is this:

// enter stereo-vr
    this.enterVRbutton.element.on('click', function() {
        // check support -> currently bypassed to set all devices to webVRPolyfill
        if (this.app.xr.isAvailable(pc.XRTYPE_VR && false)) {
            // start session
            this.cameraEntity.camera.startXr(pc.XRTYPE_VR, pc.XRSPACE_LOCAL);
        
        } else {

            //this.cameraEntity.camera.enterVr(()=>{});
            this.cameraEntity.camera.startXr(pc.XRTYPE_VR, pc.XRSPACE_LOCAL);            
            this.vrPolyfillActive = true;
        }
    }, this);
    
    // enter magic window vr
    this.enterMirrorbutton.element.on('click', function() {
        
        if(!this.app.vrMirror){
            // Enable device orientation for iOS
            if (typeof DeviceOrientationEvent.requestPermission === 'function') {
                DeviceOrientationEvent.requestPermission()
                    .then(permissionState => {
                    if (permissionState === 'granted') {
                        this.cameraEntity.camera.vrDisplay = this.app.xr.display;
                        this.app.vrMirror = true;
                    }
                }).catch(console.error);
            } else {
                this.cameraEntity.camera.vrDisplay = this.app.xr.display;
                this.app.vrMirror = true;
            }
        } else {
            this.app.vrMirror = false;
        }    

    },this);

As always thanks for any help.

2

Last time I looked, magic window was not implemented in WebXR. I don’t know if that has changed :thinking:

@max Any ideas?

3

I found some demo, which (based on a look on the code) could integrate it.
But to be honest, I cant figuring out what they are doing there / or how this could be mapped to playcanvas.
See:

4

Otherwise I would start with a similar implementation like this:
https://playcanvas.com/editor/scene/901923

Just for your info: I think a recent update of the playcanvas core (I assume at least) broke support for the old WebVR implementation. See the error in my demo:

https://launch.playcanvas.com/974722?debug=true

The old deployed version still works.

But I will see if I can write my own device-orientation functionality, and then upgrade to webXR-Polyfill anyway.

5

Ok, faster than expected (and in the meantime webVR core fix seems out),
here for future reference, a working WebVR + Magic Mirror Project, based on the new webXR Polyfill + manuell device orientation

Project:
https://playcanvas.com/editor/scene/974722

Build:

1 Like