Consider allowing VR when fullscreen isn't supported

[ivnnv]

Browser: Safari or Chrome Operating System: iOS 13 Sandcastle example: https://sandcastle.cesium.com/gallery/Cardboard.html

Hi, I have been working with Cesium on a personal project for a couple of weeks now and didn't wanted to report this until I had a more comprehensive knowledge of everything around WebVR / WebXR.

Thing is Cesium just don't work on iOS as it was supposed to be. It doesn't show the vrButton or fullScreen buttons when you configure the Cesium Viewer with those options. It does not even work in the original Cardboard Sandcastle demo (linked above).

I suspect this has something to do with how iOS require apps to mandatory get the user actively triggering grant permission. AFrame had the same issue described here and here and they solved it requesting those permissions on this PR.

Is this what could be happening to you? It makes sense if Cesium doesn't detect motion capabilities on the device (because iOS will return false if user isn't prompted), so it wont show/allow VR features. Can you please confirm?

PS: I have created a workaround for this based on this "Synced Views Sandcastle" and "this guy's approach to sync deviceMotion-Viewer", and I have a "working version" of stereo view 3d/VR Cesium at my app, so its definitely something doable, but obviously i'd prefer having it working "the proper way".

Thanks.

[OmarShehata]

I believe the reason the VR button doesn't appear on iOS is because the fullscreen API isn't supported. See https://caniuse.com/#feat=fullscreen. Notice iOS 13 has only partial support (for iPads, not iPhones).

This is where the VR button checks if fullscreen is allowed and decides whether to hide it: https://github.com/CesiumGS/cesium/blob/d781f6f7fc971757436c566da769a5e174bf488a/Source/Widgets/VRButton/VRButtonViewModel.js#L157

This is where CesiumJS detects if fullscreen is allowed:

https://github.com/CesiumGS/cesium/blob/d781f6f7fc971757436c566da769a5e174bf488a/Source/Core/Fullscreen.js#L118

In your workaround, does the URL address bar still appear at the top of the page when running your VR mode?

[ivnnv]

Safari hides the url bar when you turn horizontal the phone and theres only one tab opened in the browser (I normally use private mode to test my app and avoid having to close other tabs). So fullScreen "is working" on iOS, and it works on my workaround under those two conditions (only tab opened + horizontal).

This behaviour also works with your actual implementation, but theres no way to have stereo-viewport and Viewer<-->Gyroscope: Vertical:

Horizontal (this is the full phone screen, i didn't cut the screenshot):

I think Cesium should be updated to skip browser fullscreen support check on iOS and instead when options.useWebVR === true and orientation === horizontal --> activateVR, and maybe an explanation text about the single tab thing on the helper popup.

[OmarShehata]

So fullScreen "is working" on iOS

Your application is not going into full screen as defined by the Fullscreen API but I see what you mean.

I ran into a similar issue myself when building a demo and had to hardcode the Fullscreen.supportsFullscreen check to return true to allow CesiumJS to enter into VR mode iOS. I think I wouldn't enable this behavior by default, and let the developer of the app choose to enable it and they can handle explaining to their users that caveat. In any case, feel free to open a PR with that change and see if other maintainers agree.

[ivnnv]

So do you think a more feasible approach would be to create a "forceFullScreen" param when init Cesium and then check for it at the begging of cesium/Source/Core/Fullscreen.js->Fullscreen.supportsFullscreen to return true if the flag has been provided instead of creating a set of new conditions? If you think so I could create that PR by myself.

[OmarShehata]

I think that would be my approach yeah. If you can open that PR and provide some screenshots/instructions on testing it that can help elicit some feedback from others on this change.