WebVR - Virtual Realities in your Browsers

My Slides for my Talk about WebVR at code.talks 2017 in Hamburg.

Create immersive expiriences without getting deep into WebGL and 3D-Mathematics.

Demos: https://github.com/casarock/webvr_demos

Transcript

1. WebVR Virtual Reality in your browsers… Carsten Sandtner (@casarock)
2. about:me Carsten Sandtner @casarock Technical Director //mediaman GmbH
6. Short History Of VR
7. View Master ~1939 https://flic.kr/p/hkLi6g
8. Project Headsight 1961
9. https://www.youtube.com/watch?v=ISJWZpFIAlQ
10. Sensorama ~1962 https://upload.wikimedia.org/wikipedia/commons/d/dc/Sensorama-morton-heilig-virtual-reality-headset.jpg
11. „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
12. Sega VR 1991
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 Image by Oculus VR, LLC
17. Google Cardboard 2014 By Evan-Amos https://commons.wikimedia.org/w/index.php?curid=45580283
18. HTC Vive 2016 Image © by HTC Corporation
19. Playstation VR Oct. 2016 Image © by Sony Computer Entertainment Inc.
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. Friction of VR Ecosystems Gatekeeper Installs Closed
31. WebVR - open VR platform Open Connected Instant
32. What Is WebVR?
33. –https://w3c.github.io/webvr/ „Browser APIs that enable WebGL rendering to headsets and access to VR sensors“
34. Available APIs • Navigator.getVRDevices • VRDevice/HMDVRDevice • PositionSensorVRDevice • VRPositionState • VREyeParameters • VRFieldOfView/VRFieldOfViewReadOnly
35. Get VR Devices navigator.getVRDevices().then(function(devices) { // Handle found Devices here... });
36. (HMD) VR Device for (var i = 0; i < devices.length; ++i) { if (devices[i] instanceof HMDVRDevice) { gHMD = devices[i]; break; } }
37. 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; } } }
38. 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); }
39. 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 { ... }
40. 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); }
41. „Learn WebGL And Start Creating VR …“
42. 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); }
43. „… or use a Boilerplate or Frameworks!“
44. 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>
45. Import WebVR polyfill Set up camera Initialize scene Set up lights Declare and pass canvas Install VREffect Listen to window resize Create render loop Instantiate renderer Figure out responsiveness Preload assets Deal with metatags and mobile
46. Mozilla A-Frame Building blocks for the virtual reality web
47. – https://aframe.io/ „Use markup to create VR experiences that work across desktop, iOS, Android, and the Oculus Rift.“
48. Hello World <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello, World!</title> <script src=“/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>
50. 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>
52. 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>
54. 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>
55. 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. Entity Component System
58. Composing an Entity <a-entity geometry="primitive: sphere; radius: 1.5" material="color: #343434; roughness: 0.4; sphericalEnvMap: #texture">
59. Composing an Entity <a-entity geometry="primitive: sphere; radius: 1.5" material="color: #343434; roughness: 0.4; sphericalEnvMap: #texture" position="-1 2 4" rotation="45 0 90" scale="2 2 2">
60. Composing an Entity <a-entity geometry="primitive: sphere; radius: 1.5" material="color: #343434; roughness: 0.4; sphericalEnvMap: #texture" position="-1 2 4" rotation="45 0 90" scale="2 2 2" animation="property: rotation; loop: true; to: 0 360 0" movement-pattern="type: spline; speed: 4">
61. <demo>
62. Input Devices?
63. Image © 2015 Microsoft
64. Image by Oculus VR, LLC
65. Image © by HTC Corporation
67. By Evan-Amos - Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=18936731
68. By Evan-Amos - Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=18936731
69. Use cases for WebVR?
70. –Internet „VR is just for Gaming!“
71. –Internet „Using WebGL is complicated.“
72. Some use cases • Immersive reportages • 3D Handbooks/Instructions • Panorama view without stupid plugins • Marketing instrument. (Supplements in magazines) • simple Games
73. Some great examples
74. http://www.360syria.com/
75. https://aframe.io/examples/showcase/city-builder/
76. http://vrviewer.istaging.co/#!/684173
77. https://aframe.io/a-painter/
78. https://s3.amazonaws.com/vr-asset-repo/heart_demo_slack.html
79. http://inspirit.unboring.net/
80. https://aframe.io/examples/showcase/a-blast/
81. https://github.com/wmurphyrd/adit
82. Conclusion
83. VR is amazing
84. 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!
85. WebVR is amazing Carsten Sandtner @casarock sandtner@mediaman.de