Introducing WebVR API 1.0 & A-Frame Updates #gotandajs

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

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