Getting Started With Web VR

Virtual Reality (VR) is the use of computer technology to create a simulated environment. Unlike traditional user interfaces, VR places the user inside an experience. Instead of viewing a screen in front of them, users are immersed and able to interact with 3D worlds. It's one of the heavily peaking technologies in the market at this point. These technologies are mostly used to make cognitive applications. Having a pretty dynamic coverage , the VR can be either on the Web - where the app can run on a browser -- or it can be used as package.

Let's start with a few JS libs we will be using.

1. A-Frame JS
   
   A-Frame is an open-source WebVR framework for creating virtual reality (VR) experiences with HTML. We can build VR scenes that work across smartphones, desktop, the Oculus Rift, and the room-scale HTC Vive.
   
   
2. Three.js
   
   Three.js is a cross-browser JavaScript library/API used to create and display animated 3D computer graphics in a web browser. Three.js uses WebGL.

Let's get rolling! You can start off forking and cloning this repo.

Once you are done, you can set it up in your system by going into the cloned directory. In my case, you need to change "sumantro93" to your username.

git clone https://github.com/sumantro93/aframe.git
cd aframe && npm install

Once you are good to go, you can create your own projects using the given asset demos.

I have taken up one called Videosphere and exactly what it does is - it will help you build "webVR" modules by giving any video in a sphere format being rendered on a browser. This is a stepping stone for building VR projects.

Getting Started with Projects

You can start off by deciding a host point. In my case, I will use github. I have created an Organization and within it, a repo with the same name appended with ".github.io" (webvrdemo.github.io). Once I have created the repo, I will go ahead and run "npm install aframe".

Here is how you can start with installing git. To make sure we are using the bleeding edge, I have used Fedora 25 Alpha 1.1 compose.



Once you are done, clone the destination where you would like to host your project. In my context, it will be github.com/webvrdemo. In your case, this repo should be empty in the beginning.



Then, you need to setup A-Frame for local deployment and development. It's simple and straight forward. Fork the aframe github repo inside your userspace and clone it.



Next, we will try to set up the development environment and then deploy it in localhost : 9000

The steps would be -

1. cd aframe
2. npm install
3. npm start

Once it's done correctly, you can get it in localhost :9000.



Now, if you hit localhost:9000, you will get something like this.



We will be taking up one of the boiler plates and running it to check if everything is working fine.



Here is a boilerplate demo up and running!

Now, I have taken one of the boilerplates and I have made some changes in the code. The demo is live here.

My demo is videosphere which can give you a VR feel when you run any video (2D). For the time being, I have hardcoded the video. The video license applies to the artist, not to me!

I hope this will have helped you understanding WebVR and given you a platform to start working with it!