Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Web vr creative_vr

351 visualizaciones

Publicado el

Short introduction to WebVR and AFrame

Publicado en: Internet
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

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