What is WebVR & How Does It Work?
How to Experience WebVR?
You just need two things. First, of course is a browser. Second is the VR headset. The VR headset has its own type of browsers that work best. It is like the most optimized virtual reality web browser. For example, Google Cardboard works the best with Chrome browser on Android devices. And for Oculus Rift, it works with Mozilla Firefox Nightly on Windows. You can check the full list here. If you don’t have a headset, the most you can do is looking at the browser and move around in 360 degrees. But, there is no point because you can’t fully appreciate the VR experience.
At this moment, the WebVR API is available in Firefox Nightly, Chrome 56+ for Android, Microsoft Edge for Windows and Samsung Internet Browser for Samsung Gear VR.
You can go here to check the few samples and see how the image is displayed in your browser. For immediate test, you can choose ‘VR Presentation‘ under the ‘Presenting samples‘ topic and ‘360 Degree Panorama‘ under ‘Work-in-progress samples‘. By default, it will show a single 360 degrees image like below. You need to click on the headset icon that is located at the bottom of the page to display the VR mode.
Voila!! Here’s how it looks like inside the VR mode that shows the two stereoscopic images side-by-side.
How Does WebVR Work?
Well, basically the WebVR API will expose interfaces that allow web applications to display the content in VR format. It is done by using WebGL with some camera settings and device interactions.
So, How to Develop or Build Simple WebVR?
There are many resources on the internet that can teach you on how to build one. For beginner, you can start with the A-Frame site first. A-Frame is a web framework from Mozilla to build the VR stuffs. This is the good website and it is easy to understand.
We also have try it ourselves. What you just need is just a Notepad (yeap!) and a web server. The steps are:
1. Open the Notepad.
2. Copy this code below inside the Notepad. What we plan to do is to display a yellow box hovering a green field under the blue sky. Sounds nice, rite 😉
<a-plane position=”0 0 -4″ rotation=”-90 0 0″ width=”5″ height=”10″ color=”green”></a-plane>
<a-box position=”0 1.25 -5″ rotation=”0 45 0″ color=”yellow”></a-box>
Key highlights from the code above is, you must include the A-Frame in the “head” tag. And also use the “a-scene” tag in the HTML body.
3. Save the file as an HTML file. Below is the detail step.
- a) Click “File” menu.
- b) Click “Save As…”.
- c) At “File name:”, put any name with “.html” extension. In our case it is “SampleWebVR.html”.
- d) At Save as type:”, choose “All Files”.
- e) Click “Save” button.
4. Now is the time to view your work. You can right click on the file and open it with your browser. Or you can put in inside your localhost or upload the file to your web server. In our we case, we upload it at our hosting server.
5. You can see the sample that we did here. You should be able to see this image below:
When you click on the headset logo, you’ll see this:
In summary, you only need a plain HTML without installing anything to start enjoying the VR development. Since A-Frame is based on HTML, it is simple for everyone of us to start. Of course, this is just a basic and very primitive.
Actually, you can do a lot more than that since A-Frame aims to define full VR experience beyond the normal 360 degree content and making full use of controllers and positional tracking. When you are a bit advance, you’ll start to use Glitch, Mongoose, GitHub and other good developer tools. For more info, you can visit:
1) The WebVR site.
2) The A-Frame site.
3) Google’s WebVR Experiments site.