Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Carsten Sandtner

September 30, 2017
Tweet

More Decks by Carsten Sandtner

Other Decks in Technology

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
    [email protected]

    View Slide