My slides about WebVR and aframe.io shown at MobileTechCon in Berlin 2016.

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