Introducing WebVR API 1.0 & A-Frame Updates #gotandajs

1ec68e792f99c958b8ffbd0aadaa182a?s=47 ikkou
September 02, 2016

Introducing WebVR API 1.0 & A-Frame Updates #gotandajs

Gotanda.js #5 で発表した資料です。

1ec68e792f99c958b8ffbd0aadaa182a?s=128

ikkou

September 02, 2016
Tweet

Transcript

  1. Introducing WebVR API 1.0 & A-Frame Updates 2016/09/01 Gotanda.js #5

    @TORETA
  2. who am i • @ikkou • working at Drecom Co.,Ltd.

    • We're Hiring !! • organizer Meguro.es • organizer VR Tech Tokyo • Love VR, especially WebVR • climb Mt.Fuji, Tomorrow !! !
  3. Agenda • Whats WebVR API 1.0 • How to Develop

    WebVR • Whats A-Frame • A-Frame Updates • Conclusion
  4. Whats WebVR API 1.0 • published by the WebVR Community

    Group • Oculus Ri9, HTC Vive, OSVR ͳͲͷ HMD ͔Βɺ ޲͖ɾϙδγϣϯɾೖྗػث ( Vive controller ͳ Ͳ ) ͷ֤छ৘ใΛऔಘ͢Δ΋ͷ • ϒϥ΢βͰVRσόΠε͕࢖͑Δ API • ͜Εࣗମ͸ίϯςϯπͱͯ͠ͷWebVRͰ͸ͳ͍
  5. WebVR API 1.0 ͷϒϥ΢βαϙʔτঢ়گ • Firefox Nightly Builds with Mozilla

    WebVR Plus • experimental builds of Chrome • Samsung Internet for Gear VR from Oculus Store • enable WebVR internet://webvr-enable/ WebVRͷऔΓ૊Έ͸ChromeͱFifefox͕ਪ͠ਐΊ͍ͯΔ ͕ɺ·ͩରԠϒϥ΢β͸গͳ͍ • Check Is WebVR Ready? • Check WebVR Samples
  6. WebVR API 1.0 ඇରԠϒϥ΢βͰͲ͏ʹ͔͢Δ • Chrome ֦ுΛ࢖͏͜ͱͰɺWebVR API 1.0 ඇର

    Ԡϒϥ΢βͰ΋ද͕ࣔग़དྷΔ • DevTools Ͱ VR σόΠεͷΤϛϡϨʔτ΋ग़དྷΔ • Check WebVR API Emula=on
  7. How to Develop WebVR • Three.js <- ࿝ฮͷ WebGL ϥΠϒϥϦ

    • Web VR Starter Kit <- ಺෦͸ Three.js • WebVR Boilerplate <- ಺෦͸ Three.js • A-Frame <- ΍͸Γ಺෦͸ Three.js • VR View <- طʹ Google VR ͔Βফ͍͑ͯΔ • Solufa <- Mithril ੡ͷ A-Frame ௒͑Λૂ͏ଘࡏ
  8. Whats A-Frame A-Frame is an open-source WebVR framework for crea7ng

    virtual reality (VR) experiences with HTML. We can build VR scenes that work across smartphones, desktop, the Oculus RiI, and the room- scale HTC Vive. ref. h'ps:/ /aframe.io/docs/0.3.0/introduc7on/
  9. A-Frame ͸͍͢͝΍ͭ • Mozilla ൃͷΦʔϓϯιʔε WebVR framework • HTML Λهड़͍ͯ͠Δײ֮Ͱ

    WebVR ίϯςϯπ Λ؆୯ʹ։ൃग़དྷΔ • PC ΍ Oculus Ri<, HTC Vive ͷΑ͏ͳ HMD ʹݶΒ ͣ iOS, Android Ͱ΋͍͍ײ͡ʹಈ࡞͢Δʂ • ίϛϡχςΟ͕׆ൃͰ֦ுϓϥάΠϯ͕๛෋
  10. HTML Λهड़͍ͯ͠Δײ֮Ͱ WebVR ίϯςϯπΛ؆୯ʹ։ൃग़དྷΔ <!DOCTYPE html> <html> <head> <meta charset="utf-8">

    <title>A-Frame 360 Panorama</title> <script src="https://aframe.io/releases/0.3.0/aframe.min.js"> </script> </head> <body> <a-scene> <a-sky src="360-photo.jpg" rotation="0 -130 0"></a-sky> </a-scene> </body> </html> h"ps:/ /aframe.io/aframe/examples/boilerplate/ panorama/
  11. ίϛϡχςΟ͕׆ൃͰ֦ுϓϥάΠϯ͕๛෋ • Leap Mo)on controls: openleap/aframe-leap-hands • Vive controls: richardanaya/aframe-webvr-

    controller • Augmented Reality: autonome/aframe-ar ि࣍Ͱ৽͍͠ίϯςϯπ͕ੜ·Ε͍ͯΔ • A Week of A-Frame XX ( latest )
  12. A-Frame Updates

  13. A-Frame v0.3.0 released ! With support for the new WebVR

    1.0 API, we aim higher towards state-of-the-art VR. ref. h'ps:/ /aframe.io/blog/aframe-v0.3.0/
  14. A-Frame v0.3.0 released ! Ҏલ͔Β Oculus Ri) Λ࢖͏͜ͱ͸ग़དྷ͕ͨɺHTC Vive ʹ׬શʹରԠͨ͠

    ref. h'ps:/ /aframe.io/blog/aframe-v0.3.0/
  15. HTC Vive ͱͷ૊Έ߹ΘͰग़དྷΔΑ͏ʹͳͬͨ͜ͱ • ϧʔϜεέʔϧτϥοΩϯά ( HMD ) • ϒϥ΢βΛհͨ͠

    VR ۭؒ಺Ͱɺา͘ɾ૸Δɾ͠Ό͕Ήɾ௓Ϳ͜ͱ ͕ग़དྷΔ • Vive ίϯτϩʔϥʔʹΑΔૢ࡞ • σΟεϓϨΠΛϛϥʔϦϯά͢ΔͷͰ͸ͳ͘ɺ௚઀ HMD ʹදࣔ͢Δ ͜ͱͰ 90fps Λୡ੒ • A-Frame Inspector • DevTools ͷ A-Frame ൛ͷΑ͏ͳ΋ͷ • Mac ͷγϣʔτΧοτ͸ control + option + i
  16. Conclusion • WebVR API 1.0 ͸ VR σόΠεΛ Web ʹ࣋ͪࠐΉ

    • A-Frame Λ࢖͑͹ Web ٕज़͚ͩͰ WebVR ίϯς ϯπΛ։ൃग़དྷΔ • ࠷৽ͷ A-Frame v0.3.0 Ͱ͸ WebVR API 1.0 ͱͷ਌ ࿨ੑ͕޲্͠ɺVR σόΠεΛࠓ·ͰҎ্ʹ؆୯ʹ Web ʹ࣋ͪࠐΉ͜ͱ͕ग़དྷΔ
  17. Enjoy VR, especially WebVR !!