4 Intro to WebVR

4.1 Questions

  • What is WebVR?
  • What are people using WebVR for?
  • How can I access WebVR content?
  • How do I create WebVR content?

4.2 Overview

Teaching: 5 min Exercises: 5 min

4.3 What is WebVR?

The home of WebVR is: https://www.webvr.rocks where it says

WebVR is a JavaScript API for creating immersive 3D, Virtual Reality experiences in your browser.

WebVR is a standard. If you make an experience that complies with this standard, it is guaranteed to work across a wide variety of devices including phones, VR headsets, and personal computer browsers.

This is an example of a WebVR experience:

http://graphics.latimes.com/mars-gale-crater-vr/

It is a guided tour of the area of Mars where the Curiosity rover landed. A fact relevant to this workshop is that it is a piece of scientific storytelling involving spatial data.

If you access it from your browser you will be guided to control the app with mouse and keyboard, if you access it from a phone, the gaze will controlled by the phone’s accelerometer. With a full VR rig you can use the hand controllers to pilot the ‘ship’.

4.4 Creating WebVR Applications

There are a number of ways to build WebVR applications. As you might guess to do it from scratch involves writing lots of JavaScript. To avoid writing too much JS, tools and frameworks have emerged to make WebVR easier to program.

The main contenders in this space are:

Mozilla’s A-Frame has the largest and most active group of users.

A-Frame shares features in common with an older framework called X3dom which is successor to VRML, the original declarative framework for VR on the web from the 90’s. However, an important architectural difference makes A-Frame more flexible.

4.5 Check out A-Frame

  1. On your laptop, Navigate your browser to https://aframe.io
  2. Try some of the ‘Examples’ from the left had list
  3. Try navigating to an example with your phone browser.

4.6 Why A-Frame is Awesome

Let us consider the A-Frame ‘Hello WebVR’ Example:

https://aframe.io/examples/showcase/helloworld/

A-Frame generalises the idea of a Web page to VR. Instead of a page, you construct a scene. The premise of the framework is that you define the static scaffolding of your scene using special HTML syntax. By static scaffolding, we mean all the geometric objects, 3D models, their positions, rotations, and colours etc. Dynamism is handled with JavaScript.

The twist is that rather than writing JS yourself, you can attach behaviours or properties to items in your scene implemented in JS by other people. Much like R’s library of packages there is a growing library of A-Frame components to add all kinds of behaviour into your scenes. Behaviours can be simple, like making things move on a pre-programmed path, and also complex, like making an object behave as if acted on by gravity.

This flexible approach is called ‘Entity-Component Architecture’. We’ll be discussing it further as we dive into A-Frame.

4.7 The A-Frame Stack

The A-Framework is built on top of a JS 3D visualisation framework called three.js. three.js itself builds on top of the WebGL API meaning the stack looks like this:

     ----------
    | A-Frame  |
    |          |
     -----------
    | three.js |
    |          |
     ----------
    | WebGL    |
    |          |
     ----------

The abstraction is leaky in the sense that there are some things that can only be achieved with knowledge of the lower level frameworks. When we place R on top of that stack the same thing remains true, that is why we are spending time building knowledge of A-Frame.