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

  2. about:me
    Carsten Sandtner
    @casarock
    Technical Director
    //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. Virtual Boy
    1995
    https://flic.kr/p/6Vn8WN

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. HTC Vive
    2016
    Image © by HTC Corporation

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. VR In A Nutshell

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

  24. Friction of VR Ecosystems
    Gatekeeper Installs Closed

    View full-size slide

  25. WebVR - open VR platform
    Open Connected Instant

    View full-size slide

  26. What Is WebVR?

    View full-size slide

  27. –https://w3c.github.io/webvr/
    „Browser APIs that enable WebGL rendering to
    headsets and access to VR sensors“

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

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

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

  35. „Learn WebGL And Start Creating VR …“

    View full-size slide

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

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

    View full-size slide

  38. three.js WebVR Renderer



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

    View full-size slide

  39. 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 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. Entity Component
    System

    View full-size slide

  48. Composing an Entity
    geometry="primitive: sphere; radius: 1.5"
    material="color: #343434; roughness: 0.4; sphericalEnvMap: #texture">

    View full-size slide

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

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

  51. Input Devices?

    View full-size slide

  52. Image © 2015 Microsoft

    View full-size slide

  53. Image by Oculus VR, LLC

    View full-size slide

  54. Image © by HTC Corporation

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  57. Use cases for
    WebVR?

    View full-size slide

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

    View full-size slide

  59. –Internet
    „Using WebGL is complicated.“

    View full-size slide

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

    View full-size slide

  61. Some great examples

    View full-size slide

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

    View full-size slide

  63. https://aframe.io/examples/showcase/city-builder/

    View full-size slide

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

    View full-size slide

  65. https://aframe.io/a-painter/

    View full-size slide

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

    View full-size slide

  67. http://inspirit.unboring.net/

    View full-size slide

  68. https://aframe.io/examples/showcase/a-blast/

    View full-size slide

  69. https://github.com/wmurphyrd/adit

    View full-size slide

  70. VR is amazing

    View full-size slide

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

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

    View full-size slide