"vrButton" not appearing on iPhone mobile Safari

CesiumJS
1

I've been trying to test out the new cardboard vr support in version 1.18 but have been running into an issue where the vrButton won't appear on iPhone 5 mobile Safari. However, the button and accompanying functionality seem to work fine on a desktop browser running the same code. I'm using the sample HelloWorld app and initializing the Viewer with:

var viewer = new Cesium.Viewer('cesiumContainer',{
      vrButton: true
    });

Any ideas why the vrButton isn't showing up on mobile? Can't tell if there's something I'm missing or if I ran into some bug.

Thanks,
Aaron

2

Hi Aaron,

The VR feature should be able to work on your iPhone. Try using Chrome instead. I don’t think Safari has support for the WebVR API as of yet.

Best,

Hannah

3

Chrome on iOS is not Chrome. All iOS browsers are Safari wrapped with some some app specific features. If something does not work in Safari on iOS, it will not work on ANY browser on iOS. This is a ridiculous limitation imposed by Apple and one of the reasons that iOS is poor at running web apps (since Safari is a pretty poor browser).

As for why WebVR specifically isn’t available on iPhone, I think it’s because it requires both the fullscreen API and the orientation API, neither of which are supported by Safari on iOS.

4

While iOS Safari doesn't support fullscreen, you can effectively trigger fullscreen by having the user transition to landscape mode from portrait mode, which seems to be the standard method used by a bunch of other iOS compatible cardboard examples that I've seen (http://vr.chromeexperiments.com/ https://github.com/borismus/webvr-boilerplate https://github.com/NICTA/cesium-vr –plugin does in fact work with cardboard on iOS when vr mode is force enabled)

In regards to the orientation API, iOS safari does support the "deviceorientation" event (http://caniuse.com/#search=deviceorientation) if that's what you're referring to. I've been poking around the Cesium source but this is my first time looking and there's a lot to dig through – is there some quick way I could forcibly enable WebVR?

5

The code that configures the scene/device for VR mode is in VRButtonViewModel.js. Just remove the code to go fullscreen and the checks that fullscreen is possible. The code that handles the “deviceorientation” event is in DeviceOrientationCameraController.js though I’m not sure that you need to edit it.

I don’t have an iOS device to test with, but I’ll try to find one.

6

Does the edit to VRButtonViewModel.js make the VR Button appear on iOS? If so, what exactly needs to be removed?

7

Hi Greg,

The button is added to the Viewer in Viewer.js.

In VRButtonViewModel.js, in the toggleVr function, you would need to remove the following lines:

Fullscreen.exitFullscreen();

``

and

if (!Fullscreen.fullscreen) {

Fullscreen.requestFullscreen(viewModel._vrElement);

}

``

to get rid of the checks for full screen.

Thanks,

Gabby

8

Hi Gabby, thanks for pointing out those lines in the code. Unfortunately, removing them doesn’t make the VRButton appear on iOS. Do you have any examples of the Cesium VR Button working for an iOS device?

Thanks,

Greg