Close

WebVR is The Future Virtual Reality Content For Browser

What is WebVR?

According to WebVR.info, in simple terms, “WebVR is an open standard that makes it possible to experience VR (virtual reality) in your browser. The goal is to make it easier for everyone to get into VR experiences, no matter what device you have”.

It simply helps run your VR supported devices so that you get to experience VR easily. The WebVR has been made to provide help in uncovering Virtual reality equipment. Supposedly, if you own a pair of VR devices such as Oculus Rift or another head mount VR device, then WebVR acts as a medium for those devices to be able to get to display the Virtual Reality content on various VR apps. What WebVR does is that it helps enable the developers to translate the VR content in terms of its information movement, position and more so into real time 3D movement that lets you get a great experience of the VR content on the apps.

The best part about WebVR is that it does not restrict you to a certain application but has numerous very interesting uses. These application’s usages range from providing high-level interactive training apps for one person games and give virtual product tours as well.

The best part about WebVR is that it does not restrict you to a certain application but has numerous very interesting uses. These application’s usages range from providing high-level interactive training apps for one person games and give virtual product tours as well.

To start your VR experience, the WebVR interfaces are the first and foremost things that help create a connection between your VR headset device and your computer. Since it is a browser for helping run VR content, its interfaces such as VRDisplay, VRDisplayCapabilities, VRPose, VRFieldOFView and more help receive the necessary components of the data needed to run the VR content.

Once the VR device and computer are connected, it’s the WebVR interface called VRDisplay that helps represent the devices that are attached such as the Headset, the Position sensor camera etc. If one wishes to run WebVR for their VR content, firstly you need to check the latest browser support if your browser and device can be compatible with WebVR. Some examples of the devices WebVR can be used are – Mobile phones, Oculus Rift and HTC Vive. When using Oculus Rift, make sure is it not with Mac or Linux based operating system as Oculus does not support them both.

WebVR Samples

These samples are basically web pages that are, if supported by your web browser for WebVR, will run the VR to give you the VR experience without even the headsets, which is apparently the main aim of WebVR – to give you a VR experience without being bound to your VR headsets, get VR exposure and real time experience at any mobile device through any headset, with any compatible web browser.

Some of the WebVR examples are:

https://aframe.io/, this is the best version.

http://drawvr.com/

https://react.rocks/tag/WebVR

https://github.com/toji/WebVR-samples

These links shall directly take you to the best samples for viewing WebVR live in action, how WebVR actually works and the basic idea behind it. The samples can be polyfill or source. The github.com link shall also take you to the HTML concepts of these WebVR pages which might be of help for WebVR enthusiasts. The react.rocks link shall get you to 6 types of examples for WebVR. Whereas the drawvr.com link will be a direct view of a live action WebVR that you can experience in 3D just by scrolling your mouse pointer.


WebVR and Three JS

To represent your 3D graphics work on a web browser for easy access to users of VR, Three.js acts as a cross-browser. A cross browser that is made in JavaScript API, Three.js helps users create as well as display their 3D graphics work on web browsers. Where a cross browser is a browser type that helps websites, web apps, client side scripts and HTML concepts to be supported by all sorts of web browsers in order to help them run and be used by the layman user.

WebVR will help create a responsive platform for VR on the web and to bring it to reality, WebVR boilerplate is the answer. The WebVR boilerplate shall help work out VR content not just on VR headsets but also for other platforms. In basic terms, it will help people move beyond the usage of VR headsets to experience VR. Sounds interesting? Apparently, it is, as WebVR boilerplate is a Three.js based initiation point specifically made for cross-platform browsers where web-based VR is compatible. While the WebVR boilerplate is based on the Three.js project, it also relies heavily on polyfills for WebVR.

Polyfills are code standard or detectors for certain Javascript API that are expected to be present in the code for WebVR. Polyfills provide VR support if the WebVR API is not present. It uses WebVR UI to render the UI and let you get VR content on your screen. As a WebVR boilerplate by Three.js, visit https://github.com/borismus/webvr-boilerplate to learn more. To start the process, simply clone this repository. This boilerplate is available via NPM which is an easy install.

So basically it’s the WebVR boilerplate project, as initiated by Github, that will make using and easily making immense VR experiences that can be easily run on different types of VR hardware – be it a cardboard headsets, or the Oculus rift or more. The boilerplate project as divided into two parts starts with WebVR polyfill – which in simple terms is great for running VR content even without the use of VR headsets and it is easy to be installed.

As we told you polyfills are codes. They replace certain API that helps you view VR content even without the VR hardware. In order to use WebVR on 3 platforms that are –VR Headsets, Smart Phones and PCs. A different set of polyfill is to be used in the HTML concept when making a WebVR for these platforms.

Since you would be accessing VR experience on PC via keyboard and mouse, use the code or polyfill “MouseKeyboardPositionSensorVRDevice” to get an orientation to access.

Similarly, for mobile devices, it’s the device itself that we use for accessing the content, use code/polyfill “GyroPositionSensorVRDevice” to get run the WebVR. Last but not the least, for VR headset usage, to get a complete view of the VR as if you are in a real time field, use code “CardboardHMDDevice”.

So how are these connected to Three.js? Apparently, these are run on three.js plugins – VRControls.js and VREffect.js specifically build for WebVR API.

Moving on from polyfills, next comes the complete manager – the WebVR Manager. This takes care of the compatibility part of the WebVR. It manages iconography and the transition of content from in and out of VR mode.

The best feature we liked of the WebVR manager is the orientation lock system that allows the screen to be in landscape while the phone screen is on for the VR to play without obstruction.

To give one more clear aspect on how WebVR Boilerplate works, here are some links that shall direct you straight to the point of what we are talking about and how it is helping change the VR scenario in the Web.

https://mozvr.com/#showcase

http://borismus.github.io/sechelt/

With this link posted by an enthusiast for web browsers like Chrome, get prepared to be amazed by the stunning soothing view this VR is offering here. Click on the link, move your mouse pointer and see for yourself.

How Does WebVR work?

Since the WebVR, if talking honestly, is still in a stage of experimentation that does not mean that enthusiastic coders cannot work on this platform to develop their VR apps that have web compatibility.
For WebVR work, the first thing one needs is a VR headset and hardware that is compatible with your computer. Check compatibility with WebVR setup as well. Make sure there is a dedicated GPU as this helps ensure a smooth functioning.

Second important thing to work on WebVR is to get installed Firefox Nightly (developer edition) https://www.mozilla.org/en-US/firefox/channel/android/ with the WebVR enabler add-on which helps establish the basic requirements for a WebVR environment. Now visit the MozVR project to test out your setup.

The hardware includes and talks of a position sensor, as talked about earlier. In case you are missing that, do not worry as an inexpensive option which would be using your mobile smartphone for the VR headset. But the catch here is, one might have to use data orientation API instead to run the orientation data by faking it with the data orientation API.

The basic idea behind boilerplates is that it helps you judge if the content is worth wearing your VR headset. As the VR headsets are a hassle to put on and even if not that, most people do not own VR headsets hence these previews help judge the content and give a different experience.

For WebVR to check VR and headset compatibility are important. WebVR is supported by various browsers but you have to check whether these browsers supports VR headsets such as Oculus Rift and HTV Vive that work great with WebVR.


 

Facebook Comments
Share Button

Also published on Medium.

Sign Up Here