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

WebVR for the rest of us @ SRCCON 2016

WebVR for the rest of us @ SRCCON 2016

Tools for VR generation on the open web

Dan Zajdband

July 29, 2016
Tweet

More Decks by Dan Zajdband

Other Decks in Technology

Transcript

  1. (Web)VR for the rest of us
    Muggle-friendly Virtual Reality generation tools
    Dan Zajdband - @impronunciable

    View full-size slide

  2. About me
    ● Web developer
    ● Knight-Mozilla fellow @ The Coral Project
    ● Hacks/Hackers Buenos Aires
    ● Hackdash.org
    ● JSConf Argentina / BAFrontend

    View full-size slide

  3. Schedule
    ● Introduction to WebVR
    ● Taking “VR-friendly” pictures
    ● WebVR Starter Kit
    ● A-Frame
    ● GuriVR
    ● Create your own world
    ● ?
    ● Profit

    View full-size slide

  4. WebVR
    ● Open standard: WebVR.info
    ● JavaScript API for different devices (Browser, Oculus, etc.)
    ● Works in Chrome and Firefox, more browsers coming soon
    ● ~Progressive Enhancement

    View full-size slide

  5. Let’s make some content
    ● Use your phone
    ○ Android: Your camera is probably fine
    ○ iOS: Google Street Map app
    ● Go around, take some pictures
    ● In case you are lazy the flickr equirectangular group can help you

    View full-size slide

  6. WebVR Starter Kit
    ● JS library (you can insert a script tag in your site and use it)
    ● Comes with cool textures and objects
    ● Well documented

    View full-size slide

  7. A-Frame
    ● ~HTML entity-component system
    ● Developed by MozVR (Mozilla)
    ● Pretty much every WebVR piece you saw was made using A-Frame
    ● Under heavy development
    ● Plays amazingly well with the web ecosystem (d3, jQuery, React, etc)
    ● Super exciting features coming up
    ○ Links to other scenes without leaving vr-mode
    ○ Component lazy-loading

    View full-size slide

  8. GuriVR
    ● Create VR stories without coding (not event html)
    ● Natural language processing approach (ugly regexp by now)
    ● Text editor
    ● Twitter and slack integrations
    ● Outputs A-Frame
    ● Under development (by me)

    View full-size slide

  9. Play around
    ● Choose one of the tools we just explored
    ● Play around
    ● Create your own experience
    ● Share it on the session etherpad :)

    View full-size slide

  10. Drop me a line
    [email protected]
    ● @impronunciable
    (twitter/github)

    View full-size slide