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

WebVR: The Next Frontier

WebVR: The Next Frontier

As new virtual reality headsets are quickly becoming available to the consumer, WebVR is opening up new frontiers of interaction for the web. Beyond gaming and entertainment, WebVR is creating whole new classes of immersive applications for the Web Platform in communication, education, shopping, and more. Let’s see how easy it is to get started developing for virtual reality in a browser by building a virtual reality experience using A-Frame, React, an Oculus Rift, and a Leap Motion controller.

Andrew Cassell

September 16, 2016
Tweet

More Decks by Andrew Cassell

Other Decks in Programming

Transcript

  1. @alc277
    andrewcassell.com
    WebVR:

    The Next Frontier

    View full-size slide

  2. Graz University of Technology
    Institute of Computer Graphics and Knowledge Visualization

    View full-size slide

  3. freesoftwaremagazine.com

    View full-size slide

  4. Augmented
    Reality

    View full-size slide

  5. Frozen Sing-Along
    https://github.com/cassell/frozen-web-
    augmented-reality-demo

    View full-size slide

  6. Frozen Sing-Along
    https://github.com/cassell/frozen-web-
    augmented-reality-demo

    View full-size slide

  7. Virtual
    Reality

    View full-size slide

  8. Shopping Real Estate
    Education Medical

    View full-size slide

  9. https://www.superdataresearch.com/market-data/virtual-reality-industry-report/

    View full-size slide

  10. Virtual
    Reality
    Business
    Gaming &
    Entertainment

    View full-size slide

  11. http://mozvr.com/webvr-spec/

    View full-size slide

  12. WebVR
    No Installs
    Many Devices
    No Vendor Lock-in
    Many Browsers

    View full-size slide

  13. WebVR
    Breaking Changes
    Frame Rate
    Motion Sickness
    Mainstream Support

    View full-size slide

  14. DEAL WITH IT

    View full-size slide

  15. A-Frame
    VR + Mobile + Desktop
    Entity Component System
    Uses three.js and WebGL
    Open Source
    Animations
    Events

    View full-size slide

  16. IF YOU CAN WRITE HTML
    YOU CAN DEVELOP FOR VIRTUAL REALITY

    View full-size slide

  17. https://github.com/cassell/webvr-soccer-stadium-multiplex

    View full-size slide

  18. https://github.com/cassell/webvr-soccer-stadium-multiplex

    View full-size slide

  19. http://facebook.github.io/react

    View full-size slide

  20. https://github.com/cassell/aframe-react-leapmotion-slot-machine

    View full-size slide

  21. https://github.com/cassell/aframe-react-leapmotion-slot-machine

    View full-size slide

  22. The Walking Dead

    View full-size slide

  23. https://github.com/cassell/aframe-react-leapmotion-slot-machine

    View full-size slide

  24. A-Frame
    v0.3.0

    View full-size slide

  25. Device
    Device

    View full-size slide

  26. Device
    Device

    View full-size slide

  27. Device
    Device

    View full-size slide

  28. https://amzn.com/B01770MBN4

    View full-size slide

  29. We always overestimate the
    change that will occur in the
    next two years and
    underestimate the change
    that will occur in the next ten.
    Don't let yourself be lulled
    into inaction.

    View full-size slide

  30. Thank You!
    @alc277
    andrewcassell.com

    View full-size slide