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

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

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

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

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 

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

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

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/ 

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

HTML Λهड़͍ͯ͠Δײ֮Ͱ WebVR ίϯςϯπΛ؆୯ʹ։ൃग़དྷΔ A-Frame 360 Panorama h"ps:/ /aframe.io/aframe/examples/boilerplate/ panorama/ 

ίϛϡχςΟ͕׆ൃͰ֦ுϓϥάΠϯ͕๛෋ • 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 ) 

A-Frame Updates 

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/ 

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

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

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

Enjoy VR, especially WebVR !!