How to turn off split eye view in VR?

Hello again!

So I’ve been successful in retrieving orientation data from this.app.vr.display.getFrameData().pose.orientation;

Although it looks like the orientation field is null, if my camera has not done an enterVr(), I’m debugging my camera before and after I enter VR but I’m not sure how the split-eye camera view is controlling my scene camera. Should I be looking at the projection matrix?

Mainly I just want to be able to allow users to look around the scene via device orientation even if they choose not to use a VR device since the vr/polyfill already handles the orientation quite well.

Thanks.

Sounds like you want a ‘magic window’ view. Not entirely sure if the current Engine implementation is supported. @moka may know more

3 Likes

I have the same issue as well, as I would like to provide both (cardboard vr and device orientation only).
I recently stumbled across this project, which could be an foundation for an alternative implementation:
https://playcanvas.com/project/525009/overview/device-orientation

It still misses the ios 11 permissions, but that should be easy to integrate.
If you find out something about the magic mirror implementation, it would be great to share this info as well.

1 Like

Got it working @Rechi ! Yaustar’s reply was enough for me to dig and find more on magic window, thanks dude!

The page for webvr seems to not exist anymore but luckily google keeps a cache so I looked here and realized that look-camera.js in the webvr project is doing this on initialize

So I debugged the camera with the vrdisplay and found a way to get pose orientation data (way without VR)

    if (this.app.vr && this.app.vr.display) {

        if (self.vrEntered) {
            pose = this.app.vr.display.getFrameData().pose.orientation;
            //console.log('vr: ', this.app.vr.display);
            this.camera.setLocalRotation(pose[0], pose[1], pose[2], pose[3]);
        } else {
            pose = this.camera.camera.vrDisplay.getFrameData().pose.orientation;
            this.camera.setLocalRotation(pose[0], pose[1], pose[2], pose[3]);
        }
    }

The bottom “else” is for non split eye magic window support, works on android, to get it to work on iOS, simply add this to a button click or user interaction

        // Enable device motion for iOS
        if (typeof DeviceMotionEvent.requestPermission === 'function') {
            DeviceMotionEvent.requestPermission()
                .then(permissionState => {                
                if (permissionState === 'granted') {
                    window.addEventListener('devicemotion', () => {});

                } 
            })
                .catch(console.error);
        } else {

        }

        // Enable device orientation for iOS
        if (typeof DeviceOrientationEvent.requestPermission === 'function') {
            DeviceOrientationEvent.requestPermission()
                .then(permissionState => {
                if (permissionState === 'granted') {
                    window.addEventListener('deviceorientation', (e) => {

                    });
                }
            })
                .catch(console.error);
        } else {
            // handle regular non iOS 13+ devices
        }

If they accept permissions, the former code snippet will start receiving the orientation data needed.

One interesting thing is that android orientation is flipped on the Y by 180 degrees, so may need to add an offset otherwise you start in the opposite direction.

Here is the reference project I’ve been using with above scripts (look-camera.js), code above not included though.

1 Like

Oh wow! Thanks for the information! I’m also actually working on VR, AR and Magic Window.

The only thing with your solution is that I don’t think that touch event will be handle the same way that we can do with the integration of WebXR in Playcanvas.

For example, if you use the “select event” (which is map to a trigger of VR controller), with the AR mode, this will be automatically translate to a touch event. If you bypass the role of the “VR session”, you may miss some events for mobile.

EDIT: Also, you are working with the old code related with WebVR. WebVR is deprecated and is replaced by WebXR. Check this documentation related to that.

1 Like

Yeah, using it because I need to support for iOS which currently doesn’t have support for WebXR, so I’m just using the remnants of WebVR combined with polyfill to keep things consistent and reduce the workload across each platform.

Which is sort of cumbersome on it’s own :\ but it appears to be working for me and my needs.

There’s a WebXR polyfill that works for Google Cardboard style VR on iOS.

I’ve recently updated the VR starter kit to include the polyfill now.

1 Like

Thanks @adkaros for sharing, that works nice!

I created a public project for future reference, which integrates all 3 modes (touch navigation, magic mirror and stereo vr). Tested on iOs 12 and iOs 13 and android.
See:
https://playcanvas.com/project/712213

@yaustar
Maybe that could serve as a foundation for a new, quite simple template / demo (if you add a bit of polish & maybe switch to webXR)?

3 Likes