How to support cardboard view on all devices (Android + iOS)?

Questions
1

I’m searching for a solution to provide a simple cardboard view for all common browsers (at least Chrome/Firefox/Samsung Browser on Android and Safari on iOS).

What I understood so far (https://doc.babylonjs.com/how_to/introduction_to_webxr):

  • WebVR is deprecated in Chrome
  • WebXR is not supported by iOS (at least if you do not want to use the Mozilla WebXR viewer)
  • Polyfill is a fallback solution for browsers that do not support WebXR

From this threads I understood that it should be possible to use polyfill on iOS devices:
https://forum.babylonjs.com/t/webxr-polyfill-option-in-babylonjs-playground/11717

Nevertheless, I have not found any working playground example that has cardboard support on iOS.

Does anybody have such an example? No matter if it is based on WebVR or WebXR or anything else. Just a simple cardboard view is needed (no need for AR, no support for other HMDs than cardbard, no teleportation - just a simple cardboard view).

Thanks in advance!

2

Pinging @RaananW

3

Hi @evo, sorry for a late reply

I sadly have no working example for iOS. I don’t have an iphone, but some in the team have. I can create a simple demo for them to check, but it might take some time until we get a working example :slight_smile:

I do hope that WebXR support will arrive to iOS soon, but it is always hard to tell with apple.

4

Hi RaananW,
thanks for your feedback. A working example would be highly appreciated. Currently we cannot use BJS for these kind of projects as all our customers require a solution that works on Android and iOS. Again, a cardboard demo that works on iOS and Android would be great!

5

Hi @RaananW,

any updates on the cardboard example?

I’m still searching for a simple cardboard solution that works on most devices.
Here’s a little summary of what I tested so far:

None of the playground examples that I tested, works on iOS. Here are some examples:

https://www.babylonjs-playground.com/#F41V6N
https://www.babylonjs-playground.com/#JA1ND3#260

iOS 14.1 (iPhone 7), Safari:
WebXR/WebVR not working on iOS, so we need to use a fallback solution like createDefaultVRExperience(…) With a solution provided by @DerKarlos it basically works. (WebXR polyfill-option in babylonjs-playground - Feature requests - Babylon.js)
Open issue: The cardboard mode does not close when the user hits the Exit-Button

Android 8.1 (Motorola Moto G5S Plus), Chrome
Works with WebXR. It does not work with WebVR or its fallback solution. So we cannot use a generic solution for iOS and Android. Not nice, but at least there is a solution that works.

iPadOS, (iPad Pro 2020), Safari:
Babylon does not work on the latest iPad at all. Going to babylonjs.com and following the playground link just leads to a white screen…

Android 9 (Samsung Galaxy S8), Samsung Internet
When starting the cardboard mode, the app asks me to turn on my daydream controller. I do not have such a controller and just want to use a simple cardbard mode. Unfortunatelly there’s no option to skip this view, so the cardboard view does not start. After the deinstallation of the Daydream app (which was pre-installed on my device), a popup appears when starting the vr mode and tells that the daydream app needs to be installed… So no chance to use the vr mode on this device as well.

Another project, that is based on THREE.js, the simple cardboard mode works on all devices, so the devices, browsers or OS-versions should not be the issue.

So, any hint how to get the cardboard mode working on more devices is appreciated.

6

Hi Evo,

What features do you need in VR exactly? You are testing on many devices with many different properties that sadly are out of our control when using the provided standards. WebXR is not available on iOS, WebVR as well. The only camera type that will work on the iPhone is (ATM) the VR device orientation, which will also work on android or any other mobile device without needing neither WebXR not WebVR. You will need, however, to implement teleportation and other features on your own. This is why I am asking what feature you will need :slight_smile:

7

The BJS PG (playgrounds) are an advanced purpose feature. Apple iOS does have its limits and requests, a PG is and will not be adapted to. You may test with a plain HMTL/JS

A solution for iOS and Android should be possible as you may check for the browser name/properties and branch to the accroding code.

We could work out a solution together as I want to have Cardboard support for my OSM rendere to.