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

WebVR - Virtual Reality in your browsers

WebVR - Virtual Reality in your browsers

My Slides for my talk at GFU Cyrus in Cologne.

Carsten Sandtner

April 24, 2018
Tweet

More Decks by Carsten Sandtner

Other Decks in Technology

Transcript

  1. WebVR
    Virtual Reality in your browsers
    Carsten Sandtner (@casarock)
    mediaman// GmbH

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

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

    View Slide

  10. VR Today

    View Slide

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

    View Slide

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

    View Slide

  13. HTC Vive
    2016
    Image © by HTC Corporation

    View Slide

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

    View Slide

  15. Microsoft Hololens
    AR, not VR
    DevKit: 2016

    View Slide

  16. VR In A Nutshell

    View Slide

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

    View Slide

  18. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

  25. Friction of VR Ecosystems
    Gatekeeper Installs Closed

    View Slide

  26. WebVR - open VR platform
    Open Connected Instant

    View Slide

  27. What Is WebVR?

    View Slide

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

    View Slide

  29. Available APIs
    • VRDisplay
    • VRDisplayCapabilities
    • VRDisplayEvent
    • VRFrameData
    • VRPose
    • VREyeParameters
    • VRFieldOfView
    • VRLayerInit
    • VRStageParameters

    View Slide

  30. Get VR Displays
    navigator.getVRDisplays().then(function(devices) {
    // Handle found Devices here...
    });

    View Slide

  31. VR Display
    // If a display is available, use it to present the
    scene
    if(displays.length > 0) {
    vrDisplay = displays[0];
    // Now we have our VRDisplay
    // object and can do what we want with it
    }

    View Slide

  32. Example
    var frameData = new VRFrameData();
    var vrDisplay;
    navigator.getVRDisplays().then(function (displays) {
    vrDisplay = displays[0];
    console.log('Display found');
    // Starting the presentation when the button
    // is clicked: It can only be called in response to a user gesture
    btn.addEventListener('click', function () {
    vrDisplay.requestPresent([{ source: canvas }]).then(function () {
    drawVRScene();
    });
    });
    });

    View Slide

  33. Example cont.
    function drawVRScene() {
    // WebVR: Request the next frame of the animation
    vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene);
    // Populate frameData with the data of the next frame to display
    vrDisplay.getFrameData(frameData);
    // You can get the position, orientation, etc.
    // of the display from the current frame's pose curFramePose is a VRPose object
    var curFramePose = frameData.pose;
    var curPos = curFramePose.position;
    var curOrient = curFramePose.orientation;
    // Here happens some WebGL Stuff!
    // WebVR: Indicate that we are ready to present the rendered frame to the VR display
    vrDisplay.submitFrame();
    }

    View Slide

  34. „Learn WebGL And Start Creating VR …“

    View Slide

  35. Stereoscopic Rendering in WebGL
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    var projectionMatrixLocation = gl.getUniformLocation(shaderProgram, "projMatrix");
    var viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix");
    // WebVR: Render the left eye‚ÀÙs view to the left half of the canvas
    gl.viewport(0, 0, canvas.width * 0.5, canvas.height);
    gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.leftProjectionMatrix);
    gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
    drawGeometry();
    // WebVR: Render the right eye‚ÀÙs view to the right half of the canvas
    gl.viewport(canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height);
    gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.rightProjectionMatrix);
    gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix);
    drawGeometry();
    function drawGeometry() {
    // draw the view for each eye
    }

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

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


  53. View Slide

  54. Input Devices?

    View Slide

  55. Image © 2015 Microsoft

    View Slide

  56. Image by Oculus VR, LLC

    View Slide

  57. Image © by HTC Corporation

    View Slide

  58. View Slide

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

    View Slide

  60. Use cases for
    WebVR?

    View Slide

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

    View Slide

  62. –Internet
    „Using WebGL is complicated.“

    View Slide

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

    View Slide

  64. Some great examples

    View Slide

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

    View Slide

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

    View Slide

  67. https://pepsigoback.com/

    View Slide

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

    View Slide

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

    View Slide

  70. http://inspirit.unboring.net/

    View Slide

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

    View Slide

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

    View Slide

  73. Bonus Level:
    Mixed Realities?

    View Slide

  74. Marker based AR
    https://aframe.io/blog/arjs/

    View Slide

  75. Mixed Realities
    ARKit/ARCore

    View Slide

  76. –https://blog.mozilla.org/blog/2017/10/20/bringing-mixed-reality-web/
    „Bringing Mixed Reality to the Web“

    View Slide

  77. Conclusion

    View Slide

  78. VR is amazing

    View Slide

  79. WebVR is amazing…
    … but it’s not ready 

    (Editors Draft, Browser support)
    … HMD Devices are not cheap. 

    (Except: Google Cardboard)
    … and has high Hardware Requirements!
    … and it’s a pleasure to create
    content!
    … and WebXR is getting more
    amazing!

    View Slide

  80. WebXR is amazing
    Carsten Sandtner
    @casarock
    [email protected]

    View Slide