Browsers -in the-
Third
Dimension

2004

<canvas>

getContext('2d')

'2d'

'3d' ?

'webgl'

WebGL

WebGL

WebGL

Three.js

Three.js

A-Frame

A-Frame

<a-scene>
  <a-cube position="0 2 0" color="#4CC3D9"
          width="2" height="2" depth="2">
    <a-animation attribute="rotation"
                 to="360 1080 0"
                 dur="10000"
                 easing="linear"
                 repeat="indefinite">
    </a-animation>
  </a-cube>
  <a-sky color="#888888"></a-sky>
</a-scene>

Web Components

Custom Elements

<a-scene>new THREE.Scene()
<a-cube>THREE.BoxGeometry THREE.MeshLambertMaterial THREE.Mesh
A-Frame
Custom Elements
Three.js
WebGL
WebVR

WebVR

Double Vision

Double Vision

Binocular Vision

🎥

🎥 🎥

navigator.getVRDevices()

👁← PD →👁

HMDVRDevice

var eyeParamsL = vrHMD.getEyeParameters('left');
var eyeParamsR = vrHMD.getEyeParameters('right');

LeftCamera.position.x = eyeParamsL.eyeTranslation;
RightCamera.position.x = eyeParamsR.eyeTranslation;

PositionSensorVRDevice

var state = positionSensor.getState();

state.position // 3d vector
state.orientation // Quaternion

THREE.VREffect

Primitives

Primitives

<a-camera>   <a-cube>   <a-curvedimage>   <a-cylinder>   <a-image>   <a-light>   <a-model>   <a-plane>   <a-sky>   <a-sphere>   <a-video>   <a-videosphere>

<a-entity>

<a-sphere radius="4" color="#FC0"><a-sphere>

<a-entity geometry="primitive: sphere;
                    radius: 4;"
          material="color: #FC0;"></a-entity>
      
<a-sphere radius="4" color="#FC0"><a-sphere>

<a-entity geometry="primitive: sphere;
                    radius: 4;"
          material="color: #FC0;"></a-entity>
      

Resources

These Links and More! http://bit.ly/vr-pad
A-Frame Docs https://aframe.io/docs/
Example CodePen http://bit.ly/aframe-sample
Mozilla VR http://mozvr.com/
Made With A-Frame https://aframevr.tumblr.com/