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

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


As always thanks for any help.

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

@max Any ideas?

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.

Otherwise I would start with a similar implementation like this:

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:


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.

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



1 Like