WebVR - virtual reality in your browsers

Slides for my Talk about WebVR. Presented at BED-Con in Berlin 2016 (http://bed-con.org/2016/)

Transcript

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

   View Slide

2. about:me
   Carsten Sandtner
   @casarock
   Head of Software Development
   //mediaman GmbH
   

   View Slide

3. View Slide

4. View Slide

5. Short History Of VR
   

   View Slide

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

   View Slide

7. Project Headsight
   1961
   

   View Slide

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

   View Slide

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

   View Slide

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

11. Sega VR
    1991
    

    View Slide

12. Virtua Racer
    1992
    CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=14111884
    

    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. What Is WebVR?
    

    View Slide

31. Disclaimer
    Currently an Editors Draft! (V1.0 since Sptember, 1st 2016)
    https://mozvr.github.io/webvr-spec/
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

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

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

39. „Learn WebGL And Start Creating VR …“
    

    View Slide

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

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

    View Slide

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

    View Slide

43. „Don’t reinvent the squared wheel!“
    

    View Slide

44. WebVR Boilerplate
    three.js + webVRControls
    https://github.com/borismus/webvr-boilerplate
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

48. View Slide

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

    View Slide

50. View Slide

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

    View Slide

52. View Slide

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

    View Slide

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

55. View Slide

56. View Slide

57. Input Devices?
    

    View Slide

58. Image © 2015 Microsoft
    

    View Slide

59. Image by Oculus VR, LLC
    

    View Slide

60. Image © by HTC Corporation
    

    View Slide

61. View Slide

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

    View Slide

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

    View Slide

64. Why WebVR?
    

    View Slide

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

    View Slide

66. –Internet
    „Using WebGL is complicated.“
    

    View Slide

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

    View Slide

68. Some great examples
    

    View Slide

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

    View Slide

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

    View Slide

71. https://www.washingtonpost.com/video/mars/public/
    

    View Slide

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

    View Slide

73. http://inspirit.unboring.net/
    

    View Slide

74. http://a-way-to-go.com/
    

    View Slide

75. Conclusion
    

    View Slide

76. VR is amazing
    

    View Slide

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

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

    View Slide