The possibilities of WebVR

NaamloosThe first time I used Google Docs, a whole new world opened up for me. I had been using and building web applications at the time, but what Drive offered just blew my mind. I was writing a document, just like Microsoft Word, but in a browser! Not only that, but I could actually work in real-time with other people. I wouldn’t have to worry about sending a document with the other person having a newer or older application. The biggest pro that this offered was that I could easily reach my documents on any computer without requiring to install any software or make sure that my files were synced properly. And then I haven’t even started about the possibilities with mobile devices.

For me, it was pretty much a turning point and made me turn to web applications for work that I would normally do via a desktop application. Especially with the incredible progress that’s been made with frameworks like Angular2, you can pretty much code web pages to give the same user experience like a regular application would.

All of this is part of the reason why I’m seriously enthusiastic about the possibilities that WebVR is going to offer.

What is WebVR?

Basically, a VR experience run in your browser. While you would normally download and install an application to run it on your device, you access a WebVR application by navigating to a particular page with your browser.  After it has downloaded all the requested resources, you are good to go.

And in a nutshell, that’s pretty much it. In general, this has mostly been used with Google Cardboard apps, because it only requires the accelerometer to determine the headset’s rotation. However, WebVR also has a future for desktop HMDs(like the Oculus and the Vive) as well. At the time of this writing, the experimental builds for Chrome and Firefox already have support for WebVR, allowing developers to gain access to the hardware(including the Touch/Vive controllers) and use positional tracking to determine the camera’s position. It is expected that this support will be added to the official releases at the end of the year.

It’s fairly early in its development, but there are already some cool projects going on to facilitate with building.

WebGL, three.js, and AFrame: The WebVR trinity

Let’s start off with an explanation to what WebGL is. It is an API for Javascript to create and render 3D images on a canvas in the browsers. This allows for developers to create experiences much like you would expect from a standalone application or console games. Released in 2011 and available on pretty much any browers(desktop and mobile), developers have already managed to squeeze some powerful stuff out of it. If you’d like to see some examples, then I would recommend looking at the WebGL page at Chrome Experiments.

Granted, working with WebGL is pretty difficult, especially if you’re not too familiar with 3D engines overall. Luckily, Ricardo Cabello has an incredible amount of effort into creating the Javascript library three.js, which is essentially a wrapper for WebGL. With simple javascript code, you can easily create a 3D scene as follows…

var camera, scene, renderer;
var geometry, material, mesh;

init();
animation();

function init(){
  camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
  camera.position.z = 500;
  
  scene = new THREE.Scene();
  
  geometry = new THREE.IcosahedronGeometry(200, 1 );
  material =  new THREE.MeshBasicMaterial({
                                            color: 0xfff999fff,
                                            wireframe: true,  
                                            wireframelinewidth:8 })
  mesh = new THREE.Mesh(geometry, material);
  scene.add( mesh );
  
  renderer = new THREE.CanvasRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight ) ;
  
  document.body.appendChild( renderer.domElement ) ;
  
}  

function animation(){
  window.requestAnimationFrame( animation );
  
  mesh.rotation.x = Date.now() * 0.00005;
  mesh.rotation.y = Date.now() * 0.0001; 
  mesh.position.y += 0.0005;
  mesh.position.z += 0.05;  
  
  renderer.render( scene, camera);
}

With the use of the accelerometer(which a browser can access) it is possible to create Google Cardboard applications. Check out this tutorial for a cool example.

Even with this wrapper, it still requires a lot of effort to make things work properly. Expect to press the refresh button a lot to get it working. Putting a scene together is simply a lot of trial and effort. However, things are a lot easier if you use start to look into AFrame.

AFrame is a wrapper for Three.JS (Yes, another wrapper. Going full inception here) that allows the user to put a scene together using HTML elements and attributes. For me, AFrame is the answer on how WebVR is going to be an accepted platform for generating content. It allows developers to easily put a scene together and create easily reusable components to drive the logic of the application, much like how Unity and Unreal do it.

Here’s an example on how a simple scene can be generated…

<a-scene>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-box position="-1 0.5 -3" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

I’ve also found AFrame to be a perfect platform for teaching developers with some interest in VR during our workshops. Most have done something with HTML or Javascript at some point in their careers, and being able to quickly experience results on their Android, iOS or Windows device drives their enthusiasm. Plus, it’s a good stepping stone to developing in Unity or Unreal.

In closing

In my opinion: WebVR is huge and has some incredible potential. It’s not something that is going to replace desktop experiences, but something that can exist right along it, for some particular projects. Think, for example, of VR experiences that are generally one-shot experiences. If you are handing out cardboards and want to give your customers a demonstration of your products, I expect that many won’t download the app to showcase this. But if you tell them to navigate to a certain page, they would likely not have a problem with that.

Or how about for additional functionality to an existing website? For example, for giving users a virtual preview of the product they are about to buy at your online store? Awhile back, I had to order a tripod and would have loved to be able to view it on a Vive to get an idea about its height.

Frankly, I’m seeing a wealth of possibilities here, and I can’t wait to see where we’re going to take it.

 

Leave a reply

Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>