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
  2. About me • Web developer • Knight-Mozilla fellow @ The

    Coral Project • Hacks/Hackers Buenos Aires • Hackdash.org • JSConf Argentina / BAFrontend
  3. None
  4. Schedule • Introduction to WebVR • Taking “VR-friendly” pictures •

    WebVR Starter Kit • A-Frame • GuriVR • Create your own world • ? • Profit
  5. WebVR • Open standard: WebVR.info • JavaScript API for different

    devices (Browser, Oculus, etc.) • Works in Chrome and Firefox, more browsers coming soon • ~Progressive Enhancement
  6. WebVR

  7. 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
  8. 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
  9. None
  10. 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
  11. None
  12. 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)
  13. Play around • Choose one of the tools we just

    explored • Play around • Create your own experience • Share it on the session etherpad :)
  14. Drop me a line • [email protected] • @impronunciable (twitter/github)