How To WebVR

 

How To WebVR

Last week I attended ‘The Open Metaverse’, a talk arranged by Skills Matter at CodeNode. The talk was delivered by Shaun Dunne and was an excellent introduction to WebVR. Since I enjoyed the talk so much (I ended up pestering Shaun with questions for at least 30 minutes after the talk finished) I thought I’d do a write-up on WebVR.

WebVR

VR has been steadily gaining popularity in the past years, one of the things driving its rising popularity is its availability. There is a selection of VR sets that are available to the consumer: Google Cardboard, Samsung Gear VR, Playstation VR, Oculus Rift, HTC Vive. Healthy competition is cool, it drives improvement and accessibility.

WebVR addresses two aspects of VR accessibility:

On the consumer side of the story, VR used to be mainly accessible to people with powerful PCs, with a specific console, a powerful enough phone or a specific model of a phone. WebVR makes it possible to run VR from a browser. Which means that it’s both easily accessible and platform-agnostic. WebVR is already supported in nightly builds of Firefox and somewhat supported in Samsung Internet Browser and special builds of Chrome. Microsoft is working on it. Samsung, Google, Mozilla and Microsoft are showing enthusiasm for WebVR so it’s not unreasonable to expect that sooner or later full support in their browsers will be provided. Not Apple or Opera though.

On the producer side of the story, WebVR also makes the whole field more accessible to developers. See, WebVR is a JavaScript API that uses WebGL, provides functionality for rendering on different hardware, sensor integration with VR devices and is more or less straightforward to use. Frameworks for it are open-source too.

Some more good news, there’s a WebVR w3c community group spec so it looks like it’s on its way to standardisation.

Creating Things

Here, in no particular order, are some WebVR development tools (for a bigger list check out this link):

Three.js

A lightweight 3D library, provides renderers for <svg>, <canvas>, CSS3D and WebGL. It is pretty straightforward to use, you include the three.js library and then through the magic of JavaScript create your scene. The sample provided on their git repository is easy to read and understand if you’ve played with 3D rendering before.

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

init();
animate();

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

function animate() {
    requestAnimationFrame( animate );
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;
    renderer.render( scene, camera );
}

And here is what it looks like. Now I know what you’re thinking, you’re thinking: ‘Aleks, don’t be silly it’s a 3D scene, yeah, but what does it have to do with VR?’

Well, my impatient reader, here are the modules that can make dreams - reality:

<script src="./js/StereoEffect.js"></script>
<script src="./js/DeviceOrientationControls.js"></script>
  • StereoEffect is used for splitting the normal display into two for that unmistakable VR experience.
  • DeviceOrientationControls is for the ability to tell where the device is facing and where it is moving to.

Since it makes use of WebGL, which is essentially a JavaScript wrapper of OpenGL, you get all the neat stuff, like scenes, cameras, effects, animation, lights, materials, shaders, etc.

This here is a pretty good article on using Three.js to create a 3D VR experience.

A-Frame

A-Frame is an open-source framework maintained by Mozilla and the WebVR community. It doesn’t require extensive knowledge of WebGL and, in fact, simplifies the process of creating 3D scenes by making it all about HTML tags.

Want to create a renderer, a render loop, lights, controls? Simple, use the tag <a-scene>. Here is an example of its usage (a ‘Hello World’ program). Here (if you’re too lazy to click the source button on that page) is what the code for it looks like:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello, World!</title>
    <script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-box position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1"  color="#4CC3D9"></a-box>
      <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
      <a-entity position="0 0 3.8">
        <a-camera></a-camera>
      </a-entity>
    </a-scene>
  </body>
</html>

It’s also compatible with React, AngularJS and D3. It really leaves no room for excuses to not make your own VR experience if you’re a VR enthusiast.

Primrose VR

Primrose is a free, open-source web development framework for prototyping VR applications. They also provide 3D chatroom functionality and collaborative editing. It is built on top of Three.js.

The code style is closer to Three.js than A-Frame, as in - it’s JavaScript rather than HTML tags. A typical Primrose application usually consists of four event listeners (ready for post-initialization setup, gazecomplete for when a user stares at an object for an extended amount of time, ponterend for responding to user clicking an object and update for frame updates) and, obviously, you can create helper functions.

For example, a ready event listener might look like this:

app.addEventListener("ready", function() {
  app.scene.add(subScene);
  editor = new Primrose.Text.Controls.TextBox({
    bounds: new Primrose.Text.Rectangle(0, 0, editorFrame.surfaceWidth, Math.floor(editorFrame.surfaceHeight)),
    tokenizer: Primrose.Text.Grammars.JavaScript,
    value: getSourceCode(isInIFrame),
    fontSize: 45
  });
  editorFrame.appendChild(editor);
  editorFrameMesh = textured(shell(1, 16, 16), editorFrame);
  editorFrameMesh.name = "MyWindow";
  editorFrameMesh.position.set(0, app.avatarHeight, 0);
  app.scene.add(editorFrameMesh);
  app.registerPickableObject(editorFrameMesh);
});

The snippet of code is taken from a really good introduction to Primrose, complete with a partial code walkthrough available on SitePoint.

Vizor.io

Vizor advertises itself as a platform for creating, sharing and exploring VR experiences. It’s open-source. Its focus is on visual programming, so really it’s more of a game engine than framework (think Unity).

Like I said, it is a visual programming editor (boxes representing objects linked to boxes for effects linked to other boxes representing the scene, the renderer, what have you), you can create VR scenes with it, you can use it to work on 360 degree photos too. Vizor has collaborative editing - you can share a URL with someone and they will be able to see your changes to the scene in real-time, as well as change things alongside you. It also has a pretty long list of available plugins.

Blend4Web

It’s an open-source framework for creating interactive 3D scenes for browsers. It makes use of Blender 3D creation suite. Essentially, you prepare a scene in Blender and export it either as a standalone HTML document or as a combination of JSON and binary files to run in a web application. The standalone HTML file option seems to be the easiest approach as it then can be embedded in a webpage as an iframe element.

The framework has a physics engine, a positional audio system, an animation system and an abstraction layer for game logic programming.

At which point, you’re probably like: ‘Neat, does it support VR?’. Yes, since the end of 2015 it supports VR.

Happy escaping from reality into a virtual world and neglecting all the every-day responsibilities!

  1. WebVR page
  2. Google Cardboard
  3. Samsung Gear VR
  4. Playstation VR
  5. Oculus Rift
  6. HTC Vive
  7. Is WebVR Ready?
  8. VR Focus: ‘WebVR Hackathon Launches November, Partners Include Google, Microsoft & Mozilla
  9. A talk: ‘WebVR: How to create virtual worlds with JavaScript
  10. WebVR w3c spec
  11. Wikipedia: ‘WebVR
  12. Blend4Web
  13. Windows Blog: ‘Bringing WebVR to Microsoft Edge
  14. Three.js
  15. Three.js: git repository
  16. Wizztjh: List of WebVR frameworks
  17. SitePoint: ‘Bringing VR to the Web with Google Cardboard and Three.js
  18. Primrose VR
  19. SitePoint: ‘Build Virtual Reality in VR with Primrose and WebVR
  20. Vizor
  21. VizorVR: ‘Vizor: Create and Share Virtual Reality on the Web
  22. vizor.io
  23. BlenderNation: ‘Blend4Web: First VR support