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)
   

   View Slide

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

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. Short History Of VR
   

   View Slide

7. View Master
   ~1939
   https://flic.kr/p/hkLi6g
   

   View Slide

8. Project Headsight
   1961
   

   View Slide

9. https://www.youtube.com/watch?v=ISJWZpFIAlQ
   

   View Slide

10. Sensorama
    ~1962
    https://upload.wikimedia.org/wikipedia/commons/d/dc/Sensorama-morton-heilig-virtual-reality-headset.jpg
    

    View Slide

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
    

    View Slide

12. Sega VR
    1991
    

    View Slide

13. Virtual Boy
    1995
    https://flic.kr/p/6Vn8WN
    

    View Slide

14. Pop-Cultural
    References
    Tron (1982), Star Trek (1987), Matrix (1999)
    

    View Slide

15. VR Today
    

    View Slide

16. Oculus Rift
    DK1: 2013
    DK2: 2014
    Consumer Version: 2016
    Image by Oculus VR, LLC
    

    View Slide

17. Google Cardboard
    2014
    By Evan-Amos https://commons.wikimedia.org/w/index.php?curid=45580283
    

    View Slide

18. HTC Vive
    2016
    Image © by HTC Corporation
    

    View Slide

19. Playstation VR
    Oct. 2016
    Image © by Sony Computer Entertainment Inc.
    

    View Slide

20. Microsoft Hololens
    More AR, not really VR
    DevKit: 2016
    

    View Slide

21. VR In A Nutshell
    

    View Slide

22. https://twitter.com/guystufff/status/713075541738393600/video/1
    

    View Slide

23. View Slide

24. Mobile Based Setup
    https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts
    

    View Slide

25. Computer Based Setup
    https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts
    

    View Slide

26. Sensors
    https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts
    

    View Slide

27. Field Of View
    https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts
    

    View Slide

28. Concepts For VR Apps
    https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_concepts
    

    View Slide

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
    

    View Slide

30. Friction of VR Ecosystems
    Gatekeeper Installs Closed
    

    View Slide

31. WebVR - open VR platform
    Open Connected Instant
    

    View Slide

32. What Is WebVR?
    

    View Slide

33. –https://w3c.github.io/webvr/
    „Browser APIs that enable WebGL rendering to
    headsets and access to VR sensors“
    

    View Slide

34. Available APIs
    • Navigator.getVRDevices
    • VRDevice/HMDVRDevice
    • PositionSensorVRDevice
    • VRPositionState
    • VREyeParameters
    • VRFieldOfView/VRFieldOfViewReadOnly
    

    View Slide

35. Get VR Devices
    navigator.getVRDevices().then(function(devices) {
    // Handle found Devices here...
    });
    

    View Slide

36. (HMD) VR Device
    for (var i = 0; i < devices.length; ++i) {
    if (devices[i] instanceof HMDVRDevice) {
    gHMD = devices[i];
    break;
    }
    }
    

    View Slide

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;
    }
    }
    }
    

    View Slide

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);
    }
    

    View Slide

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

    View Slide

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);
    }
    

    View Slide

41. „Learn WebGL And Start Creating VR …“
    

    View Slide

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);
    }
    

    View Slide

43. „… or use a Boilerplate or Frameworks!“
    

    View Slide

44. three.js WebVR Renderer
    
    
    
    <br/>...<br/>var effect = new THREE.VREffect( renderer );<br/>...<br/>effect.render( scene, camera );<br/>
    

    View Slide

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
    

    View Slide

46. Mozilla A-Frame
    Building blocks for the virtual reality web
    

    View Slide

47. – https://aframe.io/
    „Use markup to create VR experiences that work
    across desktop, iOS, Android, and the Oculus Rift.“
    

    View Slide

48. Hello World
    
    
    
    
    Hello, World!
    
    
    
    
    depth="1" position="1 1 1" rotation="0 0 0" scale="1 1 1">
    
    
    
    
    
    

    View Slide

49. View Slide

50. Animated Box
    
    
    . . .
    
    
    depth="1" position="1 1 1" rotation="0 0 0" scale="1 1 1">
    
    
    
    
    
    

    View Slide

51. View Slide

52. Pointer
    
    
    . . .
    
    
    depth="1" position="1 1 1" rotation="0 0 0" scale="1 1 1">
    
    
    
    
    
    
    
    
    

    View Slide

53. View Slide

54. Add Events
    
    
    . . .
    
    
    depth="1" position="1 1 -5" rotation="0 0 0" scale="1 1 1">
    
    
    
    
    
    
    
    
    
    
    
    

    View Slide

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'});
    });
    

    View Slide

56. View Slide

57. Entity Component
    System
    

    View Slide

58. Composing an Entity
    geometry="primitive: sphere; radius: 1.5"
    material="color: #343434; roughness: 0.4; sphericalEnvMap: #texture">
    

    View Slide

59. Composing an 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">
    

    View Slide

60. Composing an 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">
    

    View Slide

61. 
    

    View Slide

62. Input Devices?
    

    View Slide

63. Image © 2015 Microsoft
    

    View Slide

64. Image by Oculus VR, LLC
    

    View Slide

65. Image © by HTC Corporation
    

    View Slide

66. View Slide

67. By Evan-Amos - Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=18936731
    

    View Slide

68. By Evan-Amos - Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=18936731
    

    View Slide

69. Use cases for
    WebVR?
    

    View Slide

70. –Internet
    „VR is just for Gaming!“
    

    View Slide

71. –Internet
    „Using WebGL is complicated.“
    

    View Slide

72. Some use cases
    • Immersive reportages
    • 3D Handbooks/Instructions
    • Panorama view without stupid plugins
    • Marketing instrument. (Supplements in magazines)
    • simple Games
    

    View Slide

73. Some great examples
    

    View Slide

74. http://www.360syria.com/
    

    View Slide

75. https://aframe.io/examples/showcase/city-builder/
    

    View Slide

76. http://vrviewer.istaging.co/#!/684173
    

    View Slide

77. https://aframe.io/a-painter/
    

    View Slide

78. https://s3.amazonaws.com/vr-asset-repo/heart_demo_slack.html
    

    View Slide

79. http://inspirit.unboring.net/
    

    View Slide

80. https://aframe.io/examples/showcase/a-blast/
    

    View Slide

81. https://github.com/wmurphyrd/adit
    

    View Slide

82. Conclusion
    

    View Slide

83. VR is amazing
    

    View Slide

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!
    

    View Slide

85. WebVR is amazing
    Carsten Sandtner
    @casarock
    sandtner@mediaman.de
    

    View Slide