A-Frame -

virtual reality

for web developers

Code Europe

Andrzej Mazur@end3rEnclave Games
Code Europe, Warsaw, Poland, December 7th 2016

History of VR

View Master

View Master (1939)

History of VR

Project Headsight

Project Headsight (1961)

VR in pop culture

Star Trek - Holodeck

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

VR gaming history

Sega VR

Sega Genesis (1991)

VR gaming history

Virtua racing

Virtua Racing (1993)

Today

Military use of Oculus

Norvegian Army (2014)

Devices

VR Devices

Desktop

Oculus Rift

Oculus Rift

Console

PS VR

PlayStation VR

Mobile

Gear VR

Gear VR, Google Cardboard

Input

Oculus Touch

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

WebVR browser support

MozVR

Firefox Nightly, Chromium

Documentation status

Editor's Draft

w3c.github.io/webvr

 

  • Vladimir Vukicevic (Mozilla)
  • Brandon Jones (Google)

 

Web: mozvr.com, webvr.info.

Is WebVR Ready?

iswebvrready.org

VR API

HMDVRDevice and PositionSensorVRDevice

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

Head Mounted Display

Headset

HMDVRDevice: getEyeParameters(), setFieldOfView().

Positional Tracker

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

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);
};

A-Frame to the rescue!

A-Frame

Cube example

A-Frame cube

Cube example

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>A-Frame demo - cube</title>
  <script src="aframe.min.js"></script>
</head>
<body>
  <a-scene>
    <a-cube color="#0095DD" position="0 1 0" rotation="20 40 0"></a-cube>
  </a-scene>
</body>
</html>

Components

  • <a-camera>
  • <a-light>
  • <a-cylinder>
  • <a-entity>
  • ...

Attributes

<a-entity
  geometry="primitive: torus; radiusTubular: 0.1; segmentsTubular: 12;"
  material="color: #EAEFF2; roughness: 0.1; metalness: 0.5;"
  rotation="10 0 0"
  position="-3 1 0">
</a-entity>

It's just JavaScript

var scene = document.querySelector('a-scene');
var cylinder = document.createElement('a-cylinder');
cylinder.setAttribute('color', '#FF9500');
cylinder.setAttribute('height', '2');
cylinder.setAttribute('radius', '0.75');
cylinder.setAttribute('position', '3 1 0');
scene.appendChild(cylinder);

Shapes

A-Frame shapes

Animations

<a-cube color="#0095DD" rotation="20 40 0" position="0 1 0">
  <a-animation
    attribute="rotation"
    from="20 0 0"
    to="20 360 0"
    direction="alternate"
    dur="4000"
    repeat="indefinite"
    easing="ease">
  </a-animation>
</a-cube>

Animations

var t = 0;
function render() {
  t += 0.01;
  requestAnimationFrame(render);
  cylinder.setAttribute('position', '3 '+(Math.sin(t*2)+1)+' 0');
}
render();

Animations demo

end3r.github.io/MDN-Games-3D/A-Frame/shapes.html

A-Painter

A-Painter

It's happening

Consumer devices: 2016.

There's already an API for that!

The future

Stable specification

WebVR W3C specification

Totally new UX and UI

Minority Report

Better hardware (90 FPS x2)

Gif

More tools and libraries

Tools

Lessons learned

Motion sickness may be a problem

Motion sickness

Keep high framerate, no camera movement, keep horizon level, show... nose?

New 360 view

Polar Sea

Give reasons to look around.

Immersion over gameplay and⁄or graphics

Rainbow Membrane

You have to be "inside".

Technical challenges

Links

Go and build the future of the Web!

Find out how millions of people will use it.

Thanks! Questions?

 

 

end3r.com/slides/ce-aframe

 

 

Andrzej Mazur@end3rEnclave Games

Ender Efka @end3r