Introducing WebVR API 1.0 & A-Frame Updates #gotandajs

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 ίϯςϯπΛ؆୯ʹ։ൃग़དྷΔ <!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/

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

Introducing WebVR API 1.0 & A-Frame Updates #gotandajs

Introducing WebVR API 1.0 & A-Frame Updates #gotandajs

ikkou

More Decks by ikkou

Other Decks in Technology

Featured

Transcript

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

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

Agenda • Whats WebVR API 1.0 • How to Develop

Whats WebVR API 1.0 • published by the WebVR Community

WebVR API 1.0 ͷϒϥ΢βαϙʔτঢ়گ • Firefox Nightly Builds with Mozilla

WebVR API 1.0 ඇରԠϒϥ΢βͰͲ͏ʹ͔͢Δ • Chrome ֦ுΛ࢖͏͜ͱͰɺWebVR API 1.0 ඇର

How to Develop WebVR • Three.js <- ࿝ฮͷ WebGL ϥΠϒϥϦ

Whats A-Frame A-Frame is an open-source WebVR framework for crea7ng

A-Frame ͸͍͢͝΍ͭ • Mozilla ൃͷΦʔϓϯιʔε WebVR framework • HTML Λهड़͍ͯ͠Δײ֮Ͱ

HTML Λهड़͍ͯ͠Δײ֮Ͱ WebVR ίϯςϯπΛ؆୯ʹ։ൃग़དྷΔ <!DOCTYPE html> <html> <head> <meta charset="utf-8">

ίϛϡχςΟ͕׆ൃͰ֦ுϓϥάΠϯ͕๛෋ • Leap Mo)on controls: openleap/aframe-leap-hands • Vive controls: richardanaya/aframe-webvr-

A-Frame Updates

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

A-Frame v0.3.0 released ! Ҏલ͔Β Oculus Ri) Λ࢖͏͜ͱ͸ग़དྷ͕ͨɺHTC Vive ʹ׬શʹରԠͨ͠

HTC Vive ͱͷ૊Έ߹ΘͰग़དྷΔΑ͏ʹͳͬͨ͜ͱ • ϧʔϜεέʔϧτϥοΩϯά ( HMD ) • ϒϥ΢βΛհͨ͠

Conclusion • WebVR API 1.0 ͸ VR σόΠεΛ Web ʹ࣋ͪࠐΉ

Enjoy VR, especially WebVR !!