WebVR - Virtual Reality in your browsers

WebVR - Virtual Reality in your browsers

My Slides for my talk at GFU Cyrus in Cologne.

B1fa8b2208e7d7cc68da7fbb519dbc96?s=128

Carsten Sandtner

April 24, 2018
Tweet

Transcript

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

    GmbH
  2. about:me Carsten Sandtner @casarock Technical Director mediaman// GmbH

  3. None
  4. None
  5. None
  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

  18. None
  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>
  41. None
  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>
  43. None
  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>
  45. None
  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'}); });
  48. None
  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

  58. None
  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