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 full-size slide

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

    View full-size slide

  3. Short History Of VR

    View full-size slide

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

    View full-size slide

  5. Project Headsight
    1961

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. „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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. HTC Vive
    2016
    Image © by HTC Corporation

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. VR In A Nutshell

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. 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 full-size slide

  25. What Is WebVR?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. 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 full-size slide

  31. 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 full-size slide

  32. 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 full-size slide

  33. 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 full-size slide

  34. „Learn WebGL And Start Creating VR …“

    View full-size slide

  35. 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 full-size slide

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

    View full-size slide

  37. three.js WebVR Renderer



    <br/>...<br/>var effect = new THREE.VREffect( renderer );<br/>...<br/>effect.render( scene, camera );<br/>

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. Hello World




    Hello, World!




    depth="1" position="1 1 1" rotation="0 0 0" scale="1 1 1">





    View full-size slide

  43. Animated Box


    . . .


    depth="1" position="1 1 1" rotation="0 0 0" scale="1 1 1">





    View full-size slide

  44. Pointer


    . . .


    depth="1" position="1 1 1" rotation="0 0 0" scale="1 1 1">








    View full-size slide

  45. Add Events


    . . .


    depth="1" position="1 1 -5" rotation="0 0 0" scale="1 1 1">











    View full-size slide

  46. 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 full-size slide

  47. Input Devices?

    View full-size slide

  48. Image © 2015 Microsoft

    View full-size slide

  49. Image by Oculus VR, LLC

    View full-size slide

  50. Image © by HTC Corporation

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  54. –Internet
    „Using WebGL is complicated.“

    View full-size slide

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

    View full-size slide

  56. Some great examples

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  61. http://inspirit.unboring.net/

    View full-size slide

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

    View full-size slide

  63. VR is amazing

    View full-size slide

  64. 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 full-size slide

  65. WebVR is amazing
    Carsten Sandtner
    @casarock
    [email protected]

    View full-size slide