WebVR & PhoneGap – Creating Immersive VR Experience Across Web Browsers

Virtual reality (VR) has been around for a while and it has captured the attention of the tech world for all the right reasons. It provides a realistic and highly immersive experience through VR devices that include almost all sensory inputs. It bridges the gap between the real and the imaginary. Several industries including gaming, entertainment, healthcare, business, and other are already leveraging the advantage of virtual reality to create applications for providing an immersive experience to customers.

While virtual reality attracts numerous businesses towards it, there are people out there continually exploring and contributing to the VR world. Until now, virtual reality experience was delivered through applications. But not long ago, Vladimir Vukićević, an American software engineer mostly known for his contributions to open-source graphic libraries used in Mozilla project, conceived WebVR.

WebVR (Web Virtual Reality) is an experimental JavaScript API providing support for VR devices like Oculus Rift, HTC Vive or Google Cardboard, in a web browser. It is designed to embed VR experiences in stereo at 60 frames per second within the browser, with support for head-mounted displays. However, currently, none of the browsers provide support for WebVR.

Furthermore, WebVR was recently refactored by Google and Mozilla to version 1.0 which supports new capabilities of VR devices specifically, HTC Vive and Oculus Rift, and a focus on WebGL (Web Graphic Libraries) content. Since support for WebVR is not yet baked into web browsers, there’s a JavaScript implementation of the WebVR spec, called WebVR Polyfill that works well with WebGL on browsers like Safari on iOS and Chrome on Android. Now that you understand what WebVR is, let’s see how it can be used while leveraging PhoneGap development services.

WebVR & PhoneGap

PhoneGap, being the most popular cross-development platform goes a level further when it comes to creating WebVR experiences. It provides a connection to device APIs when the WebVR content is wrapped for mobile apps through PhoneGap. You can embed WebVR experience across web browsers with PhoneGap for iOS and Android.

Both iOS and Android supports WebGL. The WebGL support is enabled in iOS version 8 and above, and Google in Chrome. Also, PhoneGap provides WebVR support in Android 7.0 and the versions above. For any Android version below 7.0 (and limited to Android 4.0 Ice Cream Sandwich) you will have to use Crosswalk Plugin. It lets you use the WebGL feature for embedding WebVR experience in PhoneGap application. 

Developing WebVR PhoneGap App:

For creating a WebVR PhoneGap app, use the below template based on WebVR Boilerplate:

phonegap create hello com.example.hello HelloWorld --template phonegap-template-webvr

Install a Crosswalk plugin beforehand, if you are building for Android version lower than 7.0 Nougat.

phonegap plugin add cordova-plugin-crosswalk-webview

Now, alter the index.html in the www folder for adding a reference to cordova.js to use PhoneGap plugins in your app. Create unique WebVR experiences across web browsers and do not forget to share your opinions through the comments.

PS: WebVR Boilerplate is a concept similar to that of responsive design. It is a starting point for developing responsive WebVR experiences for VR gadgets.