WebVR:

Virtual Reality

for Web Games

Game Industry Conference 2015

Andrzej Mazur — @end3r — Enclave Games
Game Industry Conference — Poznań, Poland — October 17th 2015

HTML5 Game Developer

Enclave Games studio
js13kGames competition
Gamedev.js meetups
Gamedev.js Weekly newsletter
Warsaw Open Device Lab
website: end3r.com
twitter: @end3r
github: end3r

Enclave Games

Caveman Grru

Wizard Quest

'Wow' effect

History of VR

View Master (1939)

History of VR

Project Headsight (1961)

VR in pop culture

Tron (1982), Star Trek (1987), Matrix (1999)

VR gaming history

Sega Genesis (1991)

VR gaming history

Virtua Racing (1993)

Today

Norvegian Army (2014)

Devices

Desktop

Oculus Rift

Console

Playstation VR (Project Morpheus)

Mobile

Gear VR, Google Cardboard

Browser support

Firefox Nightly, Chromium

Documentation status

Editors Draft

mozvr.github.io/webvr-spec/webvr.html

Vladimir Vukicevic (Mozilla)
Brandon Jones (Google)

Web: mozvr.com, webvr.info.

Web vs Native (again)

Install vs online, multiplatform, distribution through URLs

Input

Keyboard and mouse, Leap Motion, Gamepad API, Device Orientation, ...

VR API

HMDVRDevice and PositionSensorVRDevice

developer.mozilla.org/en-US/docs/Web/API/WebVR_API

Head Mounted Display

HMDVRDevice: getEyeParameters(), setFieldOfView().

Positional Tracker

PositionSensorVRDevice: getState(), resetSensor().

Get the devices

navigator.getVRDevices().then(function(devices) {
  for (var i = 0; i < devices.length; ++i) {
    if (devices[i] instanceof HMDVRDevice) {
      gHMD = devices[i];
      break;
    }
  }
  if (gHMD) {
    for (var i = 0; i < devices.length; ++i) {
      if (devices[i] instanceof PositionSensorVRDevice
      	 && devices[i].hardwareUnitId === gHMD.hardwareUnitId) {
        gPositionSensor = devices[i];
        break;
      }
    }
  }
});

WebGL + Three.js

VREffect ⁄ VRControls

var effect = new THREE.VREffect(renderer);
var manager = new WebVRManager(renderer, effect);

Stereoscopic rendering in WebVR

hacks.mozilla.org/2015/09/stereoscopic-rendering-in-webvr/

function init () {
  // using gl-matrix for linear algebra
  var viewMatrix = mat4.lookAt(mat4.create(), eye, center, up);
  var projectionMatrix = mat4.perspective(mat4.create(), fov, near, far);
  var mvpMatrix = mat4.multiply(mat4.create(), projectionMatrix, viewMatrix);
  gl.uniformMatrix4fv(uniforms.uMVPMatrixLocation, false, mvpMatrix);
};
function update (t) {
  gl.clear(flags);
  gl.drawElements(mode, count, type, offset);
  requestAnimationFrame(update);
};