Any recommended patterns for iOS devices?

[devasur]

Since iOS does not yet support HTML5 fullscreen API, VR applications do not look neat. Any recommended patterns for working around this limitation?

[borismus]

The main problem is the URL bar which appears when you tap near the top of the screen in landscape mode. Nothing can be done about this other than to pray to the Safari gods. On Wed, Jun 8, 2016 at 4:16 AM Boni Gopalan notifications@github.com wrote:

Since iOS does not yet support HTML5 fullscreen API, VR applications do not look neat. Any recommended patterns for working around this limitation?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/borismus/webvr-boilerplate/issues/144, or mute the thread https://github.com/notifications/unsubscribe/AAQ8gBSdX9pCB0XTq7yUz0yrIKCoNMvPks5qJqSigaJpZM4Iw2jt .

[devasur]

:) And pray we did! apparently some stupid twisting turning on iOS devices hide that top bar - magically! Btw, I just was able to use CanvasRenderer on the boiler plate for browsers not supporting webgl. May be worth it have it part of the boiler plate?

In case you are wondering what this is all about : http://walkinto.in/vr/g1OC0cM6hxxkxu0R9Gphg

Has tweeted to you the other day. We went live.

[pindiespace]

If you're doing 3D, the canvas renderer is really slow. I recommend instead using it one time to render an image, along with a message about the limitations of the user's platform. In fact, the best graceful decay would be:

1. Standard WebGL renderer with animation. Modern desktop and mobile, plus IE 11.
2. If no WebGL, fallback to CanvasRenderer, but used to generate a "still" from the scene by rendering only one time. Attach warning that the system can't render fast enough for WebVR. This is useful for IE9 and IE10, also old mobiles (e.g. iPods) with canvas but no 3d context.
3. If now 2D or 3D context, fallback where the tags are swapped with "no VR" images. Attach warning that WebVR is impossible on. Old mobile browsers (e.g. pre-iPhone) and ancient IE8.

This really belongs in a Ui helper library, which may be out of scope for webvr-boilerplate.

Here's a sample swapper I've used:

   /** 
     * @method replaceCanvasWithImage
     * @description replace <canvas> tags with images in 
     * browsers that can't support THREE or other libraries 
     * with a 3d canvas context.
     * @param String imgPath the path to the replacement image.
     */
    function replaceCanvasWithImage (imgPath) {
      var c = document.getElementsByTagName('canvas');
      // Replace each canvas with a default image.
      for(var i = 0; i < c.length; i++) {
        var img = document.createElement('img');
        img.src = imgPath;
        var parentNode = c[i].parentNode;
        parentNode.insertBefore(img, c[i]);
        parentNode.removeChild(c[i]);
      }
    };

[pindiespace]

devasur, how specifically did you hide the bar under iOS9? And how were conflicts avoided with iOS8 and 7?

[devasur]

We did not do any special handling for iOS / Safari. Not enough devices to test on iOS. On an iPhone 5S latest iOS (whatever is the version) with chrome and surprisingly safari full screen and VR works. Some sort of scroll setting is making the screen go full while on landscape mode. Not sure how it would work on other devices. Just went live yesterday. It's actively used product. So waiting for customer feedback.