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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. HTC Vive
    2016
    Image © by HTC Corporation

    View full-size slide

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

    View full-size slide

  11. Microsoft Hololens
    AR, not VR
    DevKit: 2016

    View full-size slide

  12. VR In A Nutshell

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

  20. Friction of VR Ecosystems
    Gatekeeper Installs Closed

    View full-size slide

  21. WebVR - open VR platform
    Open Connected Instant

    View full-size slide

  22. What Is WebVR?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

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

  29. „Learn WebGL And Start Creating VR …“

    View full-size slide

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

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

    View full-size slide

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

  33. A-Frame
    Building blocks for the virtual reality web

    View full-size slide

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

    View full-size slide

  35. Hello World




    Hello, World!




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





    View full-size slide

  36. Animated Box


    . . .


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





    View full-size slide

  37. Pointer


    . . .


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








    View full-size slide

  38. Add Events


    . . .


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











    View full-size slide

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

  40. Entity Component
    System

    View full-size slide

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

    View full-size slide

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

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

  44. Input Devices?

    View full-size slide

  45. Image © 2015 Microsoft

    View full-size slide

  46. Image by Oculus VR, LLC

    View full-size slide

  47. Image © by HTC Corporation

    View full-size slide

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

    View full-size slide

  49. Use cases for
    WebVR?

    View full-size slide

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

    View full-size slide

  51. –Internet
    „Using WebGL is complicated.“

    View full-size slide

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

    View full-size slide

  53. Some great examples

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  56. https://pepsigoback.com/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  59. http://inspirit.unboring.net/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  62. Bonus Level:
    Mixed Realities?

    View full-size slide

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

    View full-size slide

  64. Mixed Realities
    ARKit/ARCore

    View full-size slide

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

    View full-size slide

  66. VR is amazing

    View full-size slide

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

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

    View full-size slide