WebVR - Virtual Reality in your browsers

My Slides for my talk at GFU Cyrus in Cologne.

Transcript

1. WebVR Virtual Reality in your browsers Carsten Sandtner (@casarock) mediaman// GmbH
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. „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
9. Virtual Boy 1995 https://flic.kr/p/6Vn8WN
10. VR Today
11. Oculus Rift DK1: 2013 DK2: 2014 Consumer Version: 2016 Image by Oculus VR, LLC
12. Google Cardboard 2014 By Evan-Amos https://commons.wikimedia.org/w/index.php?curid=45580283
13. HTC Vive 2016 Image © by HTC Corporation
14. Playstation VR Oct. 2016 Image © by Sony Computer Entertainment Inc.
15. Microsoft Hololens AR, not VR DevKit: 2016
16. VR In A Nutshell
17. https://twitter.com/guystufff/status/713075541738393600/video/1
19. Mobile Based Setup https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts
20. Computer Based Setup https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts
21. Sensors https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts
22. Field Of View https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts
23. Concepts For VR Apps https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts
24. 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
25. Friction of VR Ecosystems Gatekeeper Installs Closed
26. WebVR - open VR platform Open Connected Instant
27. What Is WebVR?
28. –https://w3c.github.io/webvr/ „Browser APIs that enable WebGL rendering to headsets and access to VR sensors“
29. Available APIs • VRDisplay • VRDisplayCapabilities • VRDisplayEvent • VRFrameData • VRPose • VREyeParameters • VRFieldOfView • VRLayerInit • VRStageParameters
30. Get VR Displays navigator.getVRDisplays().then(function(devices) { // Handle found Devices here... });
31. VR Display // If a display is available, use it to present the scene if(displays.length > 0) { vrDisplay = displays[0]; // Now we have our VRDisplay // object and can do what we want with it }
32. Example var frameData = new VRFrameData(); var vrDisplay; navigator.getVRDisplays().then(function (displays) { vrDisplay = displays[0]; console.log('Display found'); // Starting the presentation when the button // is clicked: It can only be called in response to a user gesture btn.addEventListener('click', function () { vrDisplay.requestPresent([{ source: canvas }]).then(function () { drawVRScene(); }); }); });
33. Example cont. function drawVRScene() { // WebVR: Request the next frame of the animation vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene); // Populate frameData with the data of the next frame to display vrDisplay.getFrameData(frameData); // You can get the position, orientation, etc. // of the display from the current frame's pose curFramePose is a VRPose object var curFramePose = frameData.pose; var curPos = curFramePose.position; var curOrient = curFramePose.orientation; // Here happens some WebGL Stuff! // WebVR: Indicate that we are ready to present the rendered frame to the VR display vrDisplay.submitFrame(); }
34. „Learn WebGL And Start Creating VR …“
35. Stereoscopic Rendering in WebGL gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); var projectionMatrixLocation = gl.getUniformLocation(shaderProgram, "projMatrix"); var viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix"); // WebVR: Render the left eye‚ÀÙs view to the left half of the canvas gl.viewport(0, 0, canvas.width * 0.5, canvas.height); gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.leftProjectionMatrix); gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix); drawGeometry(); // WebVR: Render the right eye‚ÀÙs view to the right half of the canvas gl.viewport(canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height); gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.rightProjectionMatrix); gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix); drawGeometry(); function drawGeometry() { // draw the view for each eye }
36. „… or use a Boilerplate or Frameworks!“
37. 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
38. A-Frame Building blocks for the virtual reality web
39. – https://aframe.io/ „Use markup to create VR experiences that work across desktop, iOS, Android, and the Oculus Rift.“
40. 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>
42. 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>
44. 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>
46. 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>
47. 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'}); });
49. Entity Component System
50. Composing an Entity <a-entity geometry="primitive: sphere; radius: 1.5" material="color: #343434; roughness: 0.4; sphericalEnvMap: #texture">
51. 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">
52. 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">
53. <demo>
54. Input Devices?
55. Image © 2015 Microsoft
56. Image by Oculus VR, LLC
57. Image © by HTC Corporation
59. By Evan-Amos - Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=18936731
60. Use cases for WebVR?
61. –Internet „VR is just for Gaming!“
62. –Internet „Using WebGL is complicated.“
63. Some use cases • Immersive reportages • 3D Handbooks/Instructions • Panorama view without stupid plugins • Marketing instrument. (Supplements in magazines) • simple Games
64. Some great examples
65. http://www.360syria.com/
66. https://aframe.io/examples/showcase/city-builder/
67. https://pepsigoback.com/
68. https://aframe.io/a-painter/
69. https://s3.amazonaws.com/vr-asset-repo/heart_demo_slack.html
70. http://inspirit.unboring.net/
71. https://aframe.io/examples/showcase/a-blast/
72. https://github.com/wmurphyrd/adit
73. Bonus Level: Mixed Realities?
74. Marker based AR https://aframe.io/blog/arjs/
75. Mixed Realities ARKit/ARCore
76. –https://blog.mozilla.org/blog/2017/10/20/bringing-mixed-reality-web/ „Bringing Mixed Reality to the Web“
77. Conclusion
78. VR is amazing
79. WebVR is amazing… … but it’s not ready 
 (Editors Draft, Browser support) … HMD Devices are not cheap. 
 (Except: Google Cardboard) … and has high Hardware Requirements! … and it’s a pleasure to create content! … and WebXR is getting more amazing!
80. WebXR is amazing Carsten Sandtner @casarock sandtner@mediaman.de