Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web vr creative_vr


Published on

Short introduction to WebVR and AFrame

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Web vr creative_vr

  1. 1. WebVR A short introduction @oscarmarinmiro
  2. 2. What’s WebVR? “WebVR is an experimental JavaScript API that provides access to Virtual Reality devices, such as the Oculus Rift, HTC Vive, Samsung Gear VR, or Google Cardboard, in your browser.”
  3. 3. Why WebVR? • From an “Internet of Information” to an “Internet of experiences” (Kevin Kelly) • Web interoperability • Device agnostic • Tailored for Web Developers
  4. 4. What’s really WebVR? WebVR enabled-browser + AFrame / three.js
  5. 5. AFrame stack WebVR API three.js WebVR Boilerplate AFrame DOM JS YOU
  6. 6. Beyond that… var ring = document.createElement("a-ring"); ring.setAttribute(“radius-inner", 1.1); ring.setAttribute(“radius-outer", 1.2); ring.setAttribute("material", “color: #FFF”); ring.setAttribute("visible", true); var scene = document.querySelector(“a-scene”); scene.appendChild(ring); ring.addEventListener(“click”, function(event){ …. });
  7. 7. Some other features • Ray caster + Gaze-based click/fuse • Vive-controls • Loads .obj, blend, collada models • Can be embedded • Sound component • Animation • Link traversal
  8. 8. three.js or AFrame? • Low-level vs High-level • More structure • Performance (DOM)
  9. 9. More goodies
  10. 10. More goodies
  11. 11. References AFrame examples AFrame docs Awesome AFrame Github Entity-Component System MagicaVoxel WebVR spec MozillaVR Boris Smus Github