$30 off During Our Annual Pro Sale. View Details »

Introducing WebVR API 1.0 & A-Frame Updates #gotandajs

ikkou
September 02, 2016

Introducing WebVR API 1.0 & A-Frame Updates #gotandajs

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

ikkou

September 02, 2016
Tweet

More Decks by ikkou

Other Decks in Technology

Transcript

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

    View Slide

  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 !! !

    View Slide

  3. Agenda
    • Whats WebVR API 1.0
    • How to Develop WebVR
    • Whats A-Frame
    • A-Frame Updates
    • Conclusion

    View Slide

  4. Whats WebVR API 1.0
    • published by the WebVR Community Group
    • Oculus Ri9, HTC Vive, OSVR ͳͲͷ HMD ͔Βɺ
    ޲͖ɾϙδγϣϯɾೖྗػث ( Vive controller ͳ
    Ͳ ) ͷ֤छ৘ใΛऔಘ͢Δ΋ͷ
    • ϒϥ΢βͰVRσόΠε͕࢖͑Δ API
    • ͜Εࣗମ͸ίϯςϯπͱͯ͠ͷWebVRͰ͸ͳ͍

    View Slide

  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

    View Slide

  6. WebVR API 1.0 ඇରԠϒϥ΢βͰͲ͏ʹ͔͢Δ
    • Chrome ֦ுΛ࢖͏͜ͱͰɺWebVR API 1.0 ඇର
    Ԡϒϥ΢βͰ΋ද͕ࣔग़དྷΔ
    • DevTools Ͱ VR σόΠεͷΤϛϡϨʔτ΋ग़དྷΔ
    • Check WebVR API Emula=on

    View Slide

  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 ௒͑Λૂ͏ଘࡏ

    View Slide

  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/

    View Slide

  9. A-Frame ͸͍͢͝΍ͭ
    • Mozilla ൃͷΦʔϓϯιʔε WebVR framework
    • HTML Λهड़͍ͯ͠Δײ֮Ͱ WebVR ίϯςϯπ
    Λ؆୯ʹ։ൃग़དྷΔ
    • PC ΍ Oculus Ri<, HTC Vive ͷΑ͏ͳ HMD ʹݶΒ
    ͣ iOS, Android Ͱ΋͍͍ײ͡ʹಈ࡞͢Δʂ
    • ίϛϡχςΟ͕׆ൃͰ֦ுϓϥάΠϯ͕๛෋

    View Slide

  10. HTML Λهड़͍ͯ͠Δײ֮Ͱ WebVR ίϯςϯπΛ؆୯ʹ։ൃग़དྷΔ




    A-Frame 360 Panorama
    <br/>







    h"ps:/
    /aframe.io/aframe/examples/boilerplate/
    panorama/

    View Slide

  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 )

    View Slide

  12. A-Frame Updates

    View Slide

  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/

    View Slide

  14. A-Frame v0.3.0 released !
    Ҏલ͔Β Oculus Ri) Λ࢖͏͜ͱ͸ग़དྷ͕ͨɺHTC Vive ʹ׬શʹରԠͨ͠
    ref. h'ps:/
    /aframe.io/blog/aframe-v0.3.0/

    View Slide

  15. HTC Vive ͱͷ૊Έ߹ΘͰग़དྷΔΑ͏ʹͳͬͨ͜ͱ
    • ϧʔϜεέʔϧτϥοΩϯά ( HMD )
    • ϒϥ΢βΛհͨ͠ VR ۭؒ಺Ͱɺา͘ɾ૸Δɾ͠Ό͕Ήɾ௓Ϳ͜ͱ
    ͕ग़དྷΔ
    • Vive ίϯτϩʔϥʔʹΑΔૢ࡞
    • σΟεϓϨΠΛϛϥʔϦϯά͢ΔͷͰ͸ͳ͘ɺ௚઀ HMD ʹදࣔ͢Δ
    ͜ͱͰ 90fps Λୡ੒
    • A-Frame Inspector
    • DevTools ͷ A-Frame ൛ͷΑ͏ͳ΋ͷ
    • Mac ͷγϣʔτΧοτ͸ control + option + i

    View Slide

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

    View Slide

  17. Enjoy VR, especially WebVR !!

    View Slide