Virtual reality is an umbrella term, really
But it's esentially a familiar concept to most people
3:47 in the afternoon
Bulky headsets
Laggy rigs
Lo-fi graphics
Dizziness
Expensive experience
Fragmented content
Unity and Unreal Engine 4
360 video
Immersive experiences
Gaming
Is WebVR just an idea?
Is it a collection of patterns describing
how to bring VR content to the web?
Is it a browser in VR with pages
flying around cyberspace?
A page using a stereo renderer and updating
the view with a DeviceOrientation event
Enables the web to be a platform for VR
using JavaScript and a browser.
Provides purpose-built interfaces to VR hardware to allow
developers to build compelling, comfortable VR experiences.
WebVR is different from VR:
no need to install content
can unify content from competing platforms
on many devices, universally
URLs enable connectivity
MDN: WebVR API on MDN
SPEC: WebVR Spec on GH
Vladimir Vukicevic from Mozilla (@vvuk)
Brandon Jones from Google (tojiro)
Browser builds with WebVR:
Firefox Nightly
Chromium
A WebVR app has to handle
I/O to dedicated hardware
navigator.getVRDevices().then( function( devices ) { /* ... */ } )We get an array of devices:
HMDVRDevice {}
deviceId: "1"
deviceName: "Oculus Rift DK2, Oculus VR"
hardwareUnitId: "1"PositionSensorVRDevice {}
deviceId: "2"
deviceName: "Oculus Rift DK2, Oculus VR"
hardwareUnitId: "1"There'll be a "Mockulus Rift" if there's no HMD attached
HMDVRDevice MDN
HMDVRDevice.getEyeParameters( 'left' | 'right' )Returns current parameters for the eye specified, as VREyeParameters
VRFieldOfView currentFieldOfView
VRFieldOfView minimumFieldOfView
VRFieldOfView maximumFieldOfView
VRFieldOfView recommendedFieldOfView
DOMPoint eyeTranslation
DOMRect renderRect
HMDVRDevice.setFieldOfView( leftFOV, rightFOV, zNear, zFar )Sets the field of view for both eyes
PositionSensorVRDevice MDN
Returns the current state of the position sensor, as VRPositionState
DOMPoint angularAcceleration
DOMPoint angularVelocity
DOMPoint linearAcceleration
DOMPoint linearVelocity
DOMPoint orientation
DOMPoint position (will be a DOMQuarternion)
timestampYou don't have to worry about most of this
Three.js has your back!
Code three.js
var renderer = new THREE.WebGLRenderer( { antialias: true } );
document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
var width = window.innerWidth, height = window.innerHeight;
var camera = new THREE.PerspectiveCamera( 75, width, height, 1, 10000 );
var controls = new THREE.OrbitControls( camera );
createWorld();
function render() {
controls.update();
renderer.render( scene, camera );
requestAnimationFrame( render );
}
render();Code WebVR with three.js
var renderer = new THREE.WebGLRenderer( { antialias: true } );
document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
var width = window.innerWidth, height = window.innerHeight;
var camera = new THREE.PerspectiveCamera( 75, width, height, 1, 10000 );
var controls = new THREE.VRControls( camera );
var effect = new THREE.VREffect( renderer );
effect.setSize( width, height );
createWorld();
function render() {
controls.update();
effect.render( scene, camera );
requestAnimationFrame( render );
}
render();
document.body.addEventListener( 'dblclick', function() {
effect.setFullScreen( true );
});In 3D, units are just a convention
In VR, they are THE LAW
Units are physically meaningful:
1 unit = 1 meter
Don't ever move the camera unless initiated by the user!
(Another reason why low latency is very important)
We want people to enjoy VR,
not having their breakfast revisited!
Or if you are a seasoned veteran...
Chrome Experiments for Virtual Reality
var renderer = new THREE.WebGLRenderer( { antialias: true } );
document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
var width = window.innerWidth, height = window.innerHeight;
var camera = new THREE.PerspectiveCamera( 75, width, height, 1, 10000 );
var controls = new THREE.DeviceOrientationControls( camera );
var effect = new THREE.StereoEffect( renderer );
effect.eyeSeparation = 10;
effect.setSize( width, height );
createWorld();
function render() {
controls.update();
effect.render( scene, camera );
requestAnimationFrame( render );
}
render();More accessible, more available.
Works with Nexus, iPhone, etc.
Limitations of the web and the browsers:
wake, touch, performance, lens distortion, sensors.
Responsive WebVR, headset optional - Boris Mus @borismus
Write once, run in any VR headset
"new starting point for building responsive web VR experiences
that work on popular VR headsets
and degrace gracefully on other platforms"
Works with three.js VRControl and VREffect.
CardboardHMDDevice
GyroPositionSensorVRDevice
MouseKeyboardPositionSensorVRDevice
Common UI elements, VR best practices and transitions to fullscreen.
Most of the devices for VR will be processed as PositionSensorVRDevice.
But there's many other options:
Keyboard and mouse
Leap Motion, Myo
gamepad controllers
scrolling (PowerMater) Physics I and Physics II
New patterns for click, select, link, etc.
Improve the "shake" detection in Gen1
Work around the limitations of Gen2
Computer vision
Voice recognition
WebRTC controls
(Most of this only applies to Android)
*sad trombone*
var width = window.innerWidth, height = window.innerHeight;
var camera = new THREE.PerspectiveCamera( 75, width, height, 1, 10000 );
var controls = new THREE.VRControls( camera );
var effect = new THREE.VREffect( renderer );
effect.setSize( width, height );To move the camera (the user) away from the origin:
var cameraDummy = new THREE.Object3D();
cameraDummy.add( camera );
scene.add( cameraDummy );
/* Move it around */
cameraDummy.position.set( 100, 0, 100 );
/* or use controls */
var dummyControls = new THREE.GamepadController( cameraDummy );We have Web Audio API!
Spatial audio and web VR - Boris Smus
Mixing Positional Audio and WebGL - Ilmari Heikkinen
Yes!
Even iOS!
Performance: 90Hz under 20ms latency is HARD
Do we need a declarative WebVR, with HTML/CSS?
We need tools and libraries for developers
We need to figure out best practices,
create bidirectional patterns of communication
Security concerns on an immersive VR-enabled web
Hardware is in flux, API is in flux, implementations are in flux
There are NO consumer headsets out there yet!
The hardware hasn't found a userbase yet
It's truly a new world to invent
It might induce nausea.
It might make you hallucinate.