Recently updated on June 5th, 2023 at 08:55 pm
 |
There might be a time where you will encounter a VR game that you can play on your browser like the popular Moon Rider. Have you ever wonder how they make the game to run on your slim browser? The answer is by using the magic of “WebVR” technology.
What is WebVR?
What is WebVR? Basically, it is an open specification using JavaScript API that introduce a way to experience virtual reality by using your browser. The main objective is to make everyone has the opportunity to have the VR experience regardless of the device they have. This noble initiative is started by Vladimir Vukicevic from Mozilla in 2014. Finally, the team released and announced the first version of WebVR API (version 1.0) on 1st March 2016.
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.
 |
You can also go here to view it straightaway. In Google, there is also experiment going on with the WebVR. You can take a look at many other samples they provide over there.
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 Application?
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 😉
<html> <head> <script src=”https://aframe.io/releases/0.7.0/aframe.min.js”></script> </head> <body> <a-scene> <a-sky color=”blue”></a-sky> <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> </a-scene> </body> </html> |
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.
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.
Lastly…
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.
About Author
