WebVR

Declarative Virtual Reality in your browsers with a-frame. My Slides from my presentation at Frontend Usergroup Rhein-Main

Transcript

1. WebVR
   Declarative Virtual Reality in your browsers with a-frame
   Carsten Sandtner (@casarock)
   

   View Slide

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

   View Slide

3. Short History Of VR
   

   View Slide

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

   View Slide

5. Project Headsight
   1961
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. VR Today
   

   View Slide

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

    View Slide

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

    View Slide

12. HTC Vive
    2016
    Image © by HTC Corporation
    

    View Slide

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

    View Slide

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

    View Slide

15. VR In A Nutshell
    

    View Slide

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

    View Slide

17. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

24. What Is WebVR?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

31. „Learn WebGL And Start Creating VR …“
    

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

37. But: „declarative“?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

41. View Slide

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

    View Slide

43. View Slide

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

    View Slide

45. View Slide

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

    View Slide

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

    View Slide

48. View Slide

49. View Slide

50. Input Devices?
    

    View Slide

51. Image © 2015 Microsoft
    

    View Slide

52. Image by Oculus VR, LLC
    

    View Slide

53. Image © by HTC Corporation
    

    View Slide

54. View Slide

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

    View Slide

56. Why WebVR?
    

    View Slide

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

    View Slide

58. –Internet
    „Using WebGL is complicated.“
    

    View Slide

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

    View Slide

60. Some great examples
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

64. APainter - https://aframe.io/a-painter/
    

    View Slide

65. Resources
    

    View Slide

66. • https://webvr.rocks/
    • https://aframe.io/
    • https://developer.mozilla.org/de/docs/Web/API/WebVR_API
    

    View Slide

67. Conclusion
    

    View Slide

68. VR is amazing
    

    View Slide

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

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

    View Slide