Virtual Reality for the Web

Virtual reality (VR) is the new crazy after the release of Oculus Rift and HTC Vive as of last year. Being a web developer I was curious to know how virtual reality would impact the web and most importantly how can I bring the VR experience to some of my web applications. In this post I will give you a quick overview of the frameworks that are available for web developers to bring virtual reality experience to the web.

VR + Web:
We are still in the early adoption stage of VR headsets. Most of the content created for VR headset is in the realm of entertainment mainly gaming and videos. In order for VR headsets to go mainstream it needs to be adopted by a larger audience, which are the web users as mention in Oculus WebVR conference. Best way to integrate virtual reality experience into web is to extend existing or create new web applications with VR experience.

The current user experience for the web is by means of mouse and keyboard for input and 2D displays for output. With the advent of VR headsets web developers now have the ability to provide additional interactivity to their web applications by means of VR display and VR controls. For example, google hangout, skype and other video calling applications can benefit from 3D interaction captured through virtual office space. Most notably we can create a virtual society as demonstrated by Mark Zuckerberg and Facebook.

VR development for the Web:
Being a complete newbie to the VR development for the web I did a google search on “virtual reality and web development”. Within minutes two main frameworks stood out: A-frame and ReactVR. These two frameworks utilizes the new experimental WebVR API to interact with VR devices. At the very moment according to WebVR, WebVR is only supported by

“Firefox Nightly builds, in Chrome 56+ for Android and experimental builds of Chromium for Windows”.

A-frame:
A-frame is an open source framework that is built upon WebVR api. The frame uses HTML along with entity-component system pattern to create components for the virtual reality application. What does this all mean, let's start off by looking at a simple example and explore the inner working as we examine the code.

Lets create a simple pink sphere:

When we run the following code in the browser (latest release of Firefox Nightly) a pink sphere will be displayed. Just like that, we have a 3D image of a pink sphere! By combining components created by A-frame community we can create other cool applications, which can be found at their blog.

ReactVR:
React is a popular web framework to come out of Facebook engineering team. React is a component based framework which allows web developers to create web UI by composing multiple components together. ReactVR by no surprise, is also based on the same principles component based framework. ReactVR is used for creating virtual reality applications for the web. Just as we did with a-frame framework lets look at a simple example to get a better understanding of the framework.

Lets create a virtual paradise:

1) Head on over to reactVR get started tutorial and follow the steps.

2) After running the server we will be welcomed by a big heading which reads ‘hello’. Let’s make the environment a bit more fun by changing the panoramic image and the text.

3) First we need to get an image, head on over to flickr and search for equirectangularc. This is one of the format supported by reactVR for panoramic image. After having selected an image, download the photo at its highest resolution, since WebGL will resize to fit the screen.

4) Rename the downloaded image to ‘paradise’ and drag the image into the static_assests folder located in your project.

5) Find the following snippet of code:

and change it to the following:

6) Now we will change the text from ‘hello’ to ‘Welcome to Paradise!’. First find the following snippet of code:

and change it to the following:

7) Your final code base should look like the following:

And your web application should like the following (off course your image will vary):

Stay Tuned:
This post provided a simple and quick overview on the current status on virtual reality for the web. In the future I will be exploring each framework more in depth by creating a simple application, so stay tuned.

Further Resource:
-https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame

-https://www.youtube.com/watch?v=wXQQVMQO8y4&index=2&list=PLRtjMdoYXLf4inSULAHyCMqpIUj4cmBTr

-https://www.reddit.com/r/WebVR/

-https://www.pluralsight.com/guides/front-end-javascript/getting-started-with-react-vr