WebVR: Setting correct height on polyfill, understanding the current WebXR UI Interaction Demo [solved]

In my currenty webvr project (which is based on an older webvr-Demo project) I map all vr-requests to the webvr polyfill, as this gives me only one solution to handle and also seems to be better supported on older android devices.

Vr.prototype.enterVr = function(){
    console.log(this);
     // 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_LOCALFLOOR);

    } else {
        //this.cameraEntity.camera.enterVr(()=>{});            
        //this.vrPolyfillActive = true;
        if (typeof DeviceOrientationEvent.requestPermission === 'function') {
                DeviceOrientationEvent.requestPermission()
                    .then(permissionState => {
                    if (permissionState === 'granted') {
                        
                        //var position = this.cameraEntity.getPosition();
                        //this.cameraEntity.setPosition(position.x, position.y +1.7, position.z);
                        this.cameraEntity.camera.enterVr(()=>{});  
                        this.vrPolyfillActive = true;
                    }
                }).catch(console.error);
        } else {
            this.cameraEntity.camera.enterVr(()=>{});            
            this.vrPolyfillActive = true;
        }
    }
};

Yaustar recently fixed the camera-position in the current WebXR UI Interaction - Demo by changing the XR Space for the startXr-Call

this.cameraEntity.camera.startXr(pc.XRTYPE_VR, pc.XRSPACE_LOCALFLOOR);

How could this fix also be integraded into my polyfill vr only - Solution?
I tried to wrap my hand around the current WebXR UI Interaction Demo, but I’can’t see where the current call to the polyfill is now located, as there seems to be no other “VR start” besides the call startXR (which shouldn’t work on iOs?). Maybe someone (Yaustar?) could give me some hint on that.
Thanks in advance

WebVR works differently IIRC. There’s a transform of floor to headset to represent the DoF for position tracking. I’ve got a copy of the older WebVR template project. https://playcanvas.com/editor/scene/994823

There’s a polyfill for WebXR VR applications that is included in all the project samples that worked on iOS last time I checked.

1 Like

Thanks for your info, I will see if I can implement a similar offset like that in the old example.

Concerning the webXR-interactions project:
https://playcanvas.com/editor/scene/500156
you are right, it works well on iOs as well. I just didn’t understand how the polyfill is actually integrated, as there is no longer an “else” branch on the xr.isAvailable, like in the old implementation.
Or does the webxr-polyfill directly hook itself in this call?

// check support
        if (this.app.xr.isAvailable(pc.XRTYPE_VR)) {
            // ask for motion permissions if we can
            if (window.DeviceOrientationEvent && window.DeviceOrientationEvent.requestPermission) {
                DeviceOrientationEvent.requestPermission().then(
                    function(response) {
                        if (response == 'granted') {
                            window.addEventListener('deviceorientation', function (e) {
                                // start session
                                startVr();
                            }.bind(this));
                        }
                    }.bind(this)).catch(console.error);
            } else {
                // start session
                startVr();
            }
        }

The WebXR polyfill works like the WebVR one in the sense it adds all the necessary classes and functionality to match the WebXR browser API.

There should be a file in the project for WebXR polyfill that is loaded before the engine.

1 Like