This document provides an overview of WebVR and its history. It discusses early VR devices from the 1960s, popular VR headsets today like Oculus Rift and HTC Vive, and frameworks for building VR experiences on the web like A-Frame. It also summarizes the WebVR API and how it allows accessing VR sensors and rendering to head-mounted displays from web content. While WebVR shows promise, the document notes it is still an editors draft and has limitations in browser support and requiring expensive hardware.

1. WebVR
Virtual Reality in your browsers…
Carsten Sandtner (@casarock)

2. about:me
Carsten Sandtner
@casarock
Head of Software Development
//mediaman GmbH

5. Short History Of VR

6. View Master
~1939
https://flic.kr/p/hkLi6g

7. Project Headsight
1961

8. https://www.youtube.com/watch?v=ISJWZpFIAlQ

9. Sensorama
~1962
https://upload.wikimedia.org/wikipedia/commons/d/dc/Sensorama-morton-heilig-virtual-reality-headset.jpg

10. „The ultimate display would, of course, be a room
within which the computer can control the existence
of matter. A chair displayed in such a room would be
good enough to sit in. Handcuffs displayed in such a
room would be confining, and a bullet displayed in
such a room would be fatal. With appropriate
programming such a display could literally be the
Wonderland into which Alice walked.“
—Ivan Sutherland

11. Sega VR
1991

12. Virtua Racer
1992
CCBY-SA3.0,https://commons.wikimedia.org/w/index.php?curid=14111884

13. Virtual Boy
1995
https://flic.kr/p/6Vn8WN

14. Pop-Cultural
References
Tron (1982), Star Trek (1987), Matrix (1999)

15. VR Today

16. Oculus Rift
DK1: 2013
DK2: 2014
Consumer Version: 2016
ImagebyOculusVR,LLC

17. Google Cardboard
2014
ByEvan-Amoshttps://commons.wikimedia.org/w/index.php?curid=45580283

18. HTC Vive
2016
Image©byHTCCorporation

19. Playstation VR
Oct. 2016
Image©bySonyComputerEntertainmentInc.

20. Microsoft Hololens
More AR, not really VR
DevKit: 2016

21. VR In A Nutshell

22. https://twitter.com/guystufff/status/713075541738393600/video/1

24. Mobile Based Setup
https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts

25. Computer Based Setup
https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts

26. Sensors
https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts

27. Field Of View
https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts

28. Concepts For VR Apps
https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts

29. Concepts For VR Apps
• Eye strain
• Motion Sickness
• Latency
• FPS
• Degrees of Freedom ( DoF )
• Cone of focus
• 3D Positional Audio -> Web Audio API!
https://media.giphy.com/media/3o6gaVAxUrXlEFYpWw/giphy.gif

30. What Is WebVR?

31. Disclaimer
Currently an Editors Draft! (V1.0 since September, 1st 2016)
https://mozvr.github.io/webvr-spec/

32. Available APIs
• Navigator.getVRDevices
• VRDevice/HMDVRDevice
• PositionSensorVRDevice
• VRPositionState
• VREyeParameters
• VRFieldOfView/VRFieldOfViewReadOnly

33. Get VR Devices
navigator.getVRDevices().then(function(devices) {
// Handle found Devices here...
});

34. (HMD) VR Device
for (var i = 0; i < devices.length; ++i) {
if (devices[i] instanceof HMDVRDevice) {
gHMD = devices[i];
break;
}
}

35. Position Sensor
// If device found, get Position Sensor.
if (gHMD) {
for (var i = 0; i < devices.length; ++i) {
if (devices[i] instanceof PositionSensorVRDevice
&& devices[i].hardwareUnitId === gHMD.hardwareUnitId)
{
gPositionSensor = devices[i];
break;
}
}
}

36. Position State
var posState = gPositionSensor.getState();
if (posState.hasPosition) {
posPara.textContent = 'Position: x' + (posState.position.x) +
' y' + (posState.position.y) +
' z' + (posState.position.z);
}
if (posState.hasOrientation) {
orientPara.textContent = 'Orientation: x' + (posState.orientation.x) +
' y' + (posState.orientation.y) +
' z' + (posState.orientation.z);
}

37. Eye Parameters
if (gHMD.getEyeParameters !== undefined) {
var eyeParamsL = gHMD.getEyeParameters('left');
var eyeParamsR = gHMD.getEyeParameters('right');
eyeTranslationL = eyeParamsL.eyeTranslation;
eyeTranslationR = eyeParamsR.eyeTranslation;
eyeFOVL = eyeParamsL.recommendedFieldOfView;
eyeFOVR = eyeParamsR.recommendedFieldOfView;
} else {
...
}

38. Field Of View
function setCustomFOV(up, right, down, left) {
var testFOV = new VRFieldOfView(up, right, down, left);
gHMD.setFieldOfView(testFOV, testFOV, 0.01, 10000.0);
var lEye = gHMD.getEyeParameters('left');
var rEye = gHMD.getEyeParameters('right');
console.log(lEye.currentFieldOfView);
console.log(rEye.currentFieldOfView);
}

39. „Learn WebGL And Start Creating VR …“

40. Stereoscopic Rendering in WebGL
/*
https://hacks.mozilla.org/2015/09/stereoscopic-rendering-in-webvr/
*/
function update() {
// ... other stuff happens here ...
// left eye
gl.viewport(0, 0, canvas.width / 2, canvas.height);
mat4.multiply(mvpMatrix, leftEyeProjectionMatrix, leftEyeViewMatrix);
gl.uniformMatrix4fv(uniforms.uMVPMatrixLocation, false, mvpMatrix);
gl.drawElements(mode, count, type, offset);
// right eye
gl.viewport(canvas.width / 2, 0, canvas.width / 2, canvas.height);
mat4.multiply(mvpMatrix, rightEyeProjectionMatrix, rightEyeViewMatrix);
gl.uniformMatrix4fv(uniforms.uMVPMatrixLocation, false, mvpMatrix);
gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_SHORT, 0);
requestAnimationFrame(update);
}

41. „… or use a Boilerplate or Frameworks!“

42. three.js WebVR Renderer
<script src="js/three.min.js"></script>
<script src="js/effects/VREffect.js"></script>
<script src="js/controls/VRControls.js"></script>
<script>
...
var effect = new THREE.VREffect( renderer );
...
effect.render( scene, camera );
</script>

43. „Don’t reinvent the squared wheel!“

44. WebVR Boilerplate
three.js + webVRControls
https://github.com/borismus/webvr-boilerplate

45. Mozilla A-Frame
Building blocks for the virtual reality web

46. – https://aframe.io/
„Use markup to create VR experiences that work
across desktop, iOS, Android, and the Oculus Rift.“

47. Hello World
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, World!</title>
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box id="mybox" color="#6173F4" width="1" height="1"
depth="1" position="1 1 1" rotation="0 0 0" scale="1 1 1">
</a-box>
<a-sky color="#bbb"></a-sky>
</a-scene>
</body>
</html>

49. Animated Box
<!DOCTYPE html>
<html>
<head>. . .</head>
<body>
<a-scene>
<a-box id="mybox" color="#6173F4" width="1" height="1"
depth="1" position="1 1 1" rotation="0 0 0" scale="1 1 1">
<a-animation attribute="rotation" repeat="indefinite" to="0 180 0"></a-animation>
</a-box>
</a-scene>
</body>
</html>

51. Pointer
<!DOCTYPE html>
<html>
<head>. . .</head>
<body>
<a-scene>
<a-box id="mybox" color="#6173F4" width="1" height="1"
depth="1" position="1 1 1" rotation="0 0 0" scale="1 1 1">
<a-animation attribute="rotation" repeat="indefinite" to="0 180 0"></a-animation>
</a-box>
<a-camera position="0 0 0">
<a-cursor color="#0000ff">
</a-camera>
</a-scene>
</body>
</html>

53. Add Events
<!DOCTYPE html>
<html>
<head>. . .</head>
<body>
<a-scene>
<a-box id="mybox" color="#6173F4" width="1" height="1"
depth="1" position="1 1 -5" rotation="0 0 0" scale="1 1 1">
<a-animation attribute="rotation" repeat="indefinite" to="0 180 0"></a-animation>
<a-event name="mouseenter" color="#ff0000"></a-event>
<a-event name="mouseleave" color="#6173F4"></a-event>
</a-box>
<a-camera position="0 0 0">
<a-cursor color="#0000ff">
</a-camera>
<a-sky color="#bbb"></a-sky>
</a-scene>
</body>
</html>

54. Add Events (Pure JS)
var box = document.querySelector('#mybox');
box.addEventListener('mouseenter', function () {
box.setAttribute('material', {color: '#ff0000'});
});
box.addEventListener('mouseleave', function() {
box.setAttribute('material', {color: '#6173F4'});
});

57. Input Devices?

58. Image©2015Microsoft

59. ImagebyOculusVR,LLC

60. Image©byHTCCorporation

62. ByEvan-Amos-Ownwork,CCBY-SA3.0,https://commons.wikimedia.org/w/index.php?curid=18936731

63. ByEvan-Amos-Ownwork,CCBY-SA3.0,https://commons.wikimedia.org/w/index.php?curid=18936731

64. Why WebVR?

65. –Internet
„VR is just for Gaming!“

66. –Internet
„Using WebGL is complicated.“

67. Some use cases
• Immersive reportages
• 3D Handbooks/Instructions
• Panorama view without stupid plugins
• Marketing instrument. (Supplements in magazines)

68. Some great examples

69. http://www.360syria.com/

70. http://vrviewer.istaging.co/#!/684173

71. https://www.washingtonpost.com/video/mars/public/

72. https://s3.amazonaws.com/vr-asset-repo/heart_demo_slack.html

73. http://inspirit.unboring.net/

74. http://a-way-to-go.com/

75. Conclusion

76. VR is amazing

77. WebVR is amazing…
… but it’s not ready
(Editors Draft, Browser support)
… and has high Hardware Requirements!
… HMD Devices are not cheap.
(Except: Google Cardboard)
… and it’s a pleasure to create content!

78. WebVR is amazing
Carsten Sandtner
@casarock
sandtner@mediaman.de