React-360: iOS Split Screen - Not working

Created on 29 Jan 2019 · 3Comments · Source: facebookarchive/react-360

Description

Unable to view react-360 on iOS/Safari. I do see the 360 View, but not the Split screen.

Expected behavior

VR Split Screen should work in iOS/Safari or iOS/Chrome

Actual behavior

VR Split Screen doesn't show - up, nor the View in VR button

Reproduction

Open a React 360 URL in Safari

List all the steps required to encounter the issue you're reporting. These steps should be clear and concise.

An example of your code that reliably reproduces the issue is ideal.

Solution

What needs to be done to address this issue? Ideally, provide a pull request with a fix.

Additional Information

'react-360' package version: [FILL THIS OUT: get this by running npm list react-360]
[email protected]
'react-360-web' package version: [FILL THIS OUT: get this by running npm list react-360-web]
[email protected]
Operating System: [FILL THIS OUT: MacOS, Linux, or Windows?]
MacOs
Browser: [FILL THIS OUT: Oculus Browser, Chrome, Edge, Safari? Which version?]
Safari ios/ Chrome iOS
VR Device: [FILL THIS OUT: In or Out of VR? Headset? ]

Source

devsatish

Most helpful comment

Have you tried using this package? webvr-polyfill

Insert this in your client.js

import WebVRPolyfill from 'webvr-polyfill';
const polyfill = new WebVRPolyfill();

drubio1989 on 29 Jan 2019

👍2

All 3 comments

There isn't any code in React 360 to support split screen viewing, so this is expected. React 360 is built on top of the standard Web VR APIs, which Apple has not implemented. There is a WebVR polyfill available that you can inject into your web page that might work, but because it's not hardware-accelerated, it's not going to be high-quality.

Our team decided a while back that we were not going to support binocular view on non-VR devices, since it creates a sub-par experience. We'd rather focus on high-quality 2D views for those devices, and create the best in-VR experience on actual VR hardware.

andrewimm on 29 Jan 2019

👍1

Have you tried using this package? webvr-polyfill

Insert this in your client.js

import WebVRPolyfill from 'webvr-polyfill';
const polyfill = new WebVRPolyfill();

drubio1989 on 29 Jan 2019

👍2

@devsatish WebVR API is not a standard API in some browser like safari or Wechat x5.

https://github.com/facebook/react-360/blob/d9477483e7785bfdfd032684adcc02c4c0570a75/React360/js/Compositor/VRState.js#L45

if (typeof navigator.getVRDisplays === 'function') {
      navigator.getVRDisplays().then(displays => {
       // some browser return not empty array but display[0].getFrameData is undefined
        if (displays.length) {
          this.setCurrentDisplay(displays[0]);
        }
      });
    }

Read [spec/1.1]https://immersive-web.github.io/webvr/spec/1.1/ to get more!