WebVR - Virtual Realities in your Browsers

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

B1fa8b2208e7d7cc68da7fbb519dbc96?s=128

Carsten Sandtner

September 30, 2017
Tweet

Transcript

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

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

  23. None
  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>
  49. None
  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>
  51. None
  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>
  53. None
  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'}); });
  56. None
  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

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