Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Web vr creative_vr

326 Aufrufe

Veröffentlicht am

Short introduction to WebVR and AFrame

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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.” https://webvr.info/
  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

×