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

WebVR - virtual reality in your browsers

WebVR - virtual reality in your browsers

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

Carsten Sandtner

September 15, 2016
Tweet

More Decks by Carsten Sandtner

Other Decks in Programming

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

    View Slide