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

WebVRの現状確認@Japan VR Fest 開発者会 #JVRFest/WebVR-Now

ikkou
October 29, 2016

WebVRの現状確認@Japan VR Fest 開発者会 #JVRFest/WebVR-Now

2016/10/29 JapanVR Fest(旧オキュフェス)開発者会 皆の10分を繋げてVRの未来を作る で発表した資料です。

【PR】
11/10 VR Tech Tokyo #4
http://vrtokyo.connpass.com/event/40235/
11/23 WebとかVR文化祭
NOW PRINTING
11/29 TOKYO A-Framer Meetup
http://connpass.com/event/43707/

ikkou

October 29, 2016
Tweet

More Decks by ikkou

Other Decks in Programming

Transcript

  1. WebVRͷݱঢ়֬ೝ
    JapanVR Fest ։ൃऀձ #JVRFest
    2016/10/29 @ikkou ͍ͬ͜͏

    View Slide

  2. View Slide

  3. whoami
    • @ikkou ͍ͬ͜͏
    • WebVR ਪ͠
    • ͱ͋Δ໨ࠇͷήʔϜձࣾͰಇ͘ Web ԰
    • ࡢ೔ G-Tune ͷ i5530 Λ஫จͨ͠Α
    • ݁ࠗه೦೔ʹ3݄9೔ΛબͿఔ౓ͷϛΫ͞Μ޷͖
    • ࠷ۙ͸৔Λ࡞ΔΠϕϯτاը԰ײ͋Δ

    View Slide

  4. WebVRͷݱঢ়֬ೝ
    2016೥10݄ݱࡏ

    View Slide

  5. ϒϥ΢βͷਐԽ΋൐ͬͯ
    WebVRͷ੝Γ্͕Γ͕
    গͣͭ͠Ճ଎͍ͯ͠·͢

    View Slide

  6. Case 1: OC3 Ͱ WebVR ΁ͷऔΓ૊Έ͕ൃද(1/2)
    • ReactVR
    • React JS, React Native ʹଓ͘ UI ૚ͱγʔϯ
    Λ୲͏ React Family
    • React ͸ Oculus ͷޙΖʹ͍Δ Facebook ʹ
    ΑΔ JS ϑϨʔϜϫʔΫ
    • ͪͳΈʹ React JS ͱ Three.js Λ૊Έ߹Θͤ
    ͨ clayallsopp/react-vr ͸ผ෺

    View Slide

  7. Case 1: OC3 Ͱ WebVR ΁ͷऔΓ૊Έ͕ൃද(2/2)
    • VR ޲͚ϒϥ΢β Carmel ͷൃද
    • ݱ࣌఺Ͱ WebVR Ready ͳҰൠతͳϒϥ΢
    β͸ଘࡏ͠ͳ͍

    View Slide

  8. Ͱ͸ WebVR ʹରԠ͍ͯ͠Δϒϥ΢βͱ͸?
    WebVR ʹରԠ͍ͯ͠Δ = WebVR API ʹରԠ͍ͯ͠Δͱఆٛ
    • Firefox Nightly or Dev ൛
    • about:config ͔ΒϑϥάΛ࿔Δ
    • WebVR Plus ΞυΦϯΛར༻ ( ؆୯ )
    • Experimental Chromium Builds ( Windows Only )
    • chrome://flags ͔ΒϑϥάΛ࿔Δ
    • Chrome Beta or Chrome Dev ( Android Only )
    • chrome://flags ͔ΒϑϥάΛ࿔Δ
    • Samsung Internet Browser ( Gear VR Only )

    View Slide

  9. ͦ΋ͦ΋ WebVR API ͱ͸
    • Web ͷඪ४ԽஂମͰ͋Δ W3C ͷίϛϡχςΟάϧʔϓͷ1ͭ
    Ͱ͋Δ WebVR Community Group ͕ࡦఆʹ޲͚ͯಈ͍͍ͯΔ
    Web API
    • Our goal is to help bring high-performance Virtual Reality
    to the open Web.
    • 2016/09/20 ࣌఺Ͱ Editor’s Draft ͱͯ͠࢓༷͸ެ։͞Ε͍ͯΔ
    • Editor’s Draft / Working Draft -> Candidate Recommendation
    -> Proposed Recommendation Λܦͯ W3C ͱͯ͠ͷקࠂҊ
    W3C Recommendation ʹࢸΔ
    • ͪͳΈʹ HTML5 ͸קࠂ·Ͱ6೥9ϲ݄Λཁͨ͠

    View Slide

  10. Case 2: Microsoft Edge ͷ WebVR ରԠ
    લड़ͷ௨Γݱ࣌఺Ͱ͸ WebVR ରԠΛՌ͍ͨͯ͠
    ͳ͍ Microsoft ͕ɺMozilla, Google ʹ஗Εͳ͕Β
    ΋ WebVR ରԠΛද໌ɺ։ൃ͕࢝·͍ͬͯΔ
    W3C ͷקࠂʹ͸ϒϥ΢βϕϯμͷ࣮૷΋৚݅ͱ
    ͳΔͷͰɺMicrosoft ͕ಈ͖ग़ͨ͜͠ͱͰɺ
    WebVR API ͷࡦఆ͕ҰาਐΉ΋ͷͱࢥΘΕΔ

    View Slide

  11. Case 3: WebVR hackathon ͕࣮ࢪ͞ΕΔ
    • Virtuleap
    Stay tuned as we gear to launch the biggest online
    WebVR hackathon on November 1st
    • ύʔτφʔͱͯ͠લड़ͷ3େϒϥ΢βϕϯμʔ͕ڍ
    ͛ΒΕ͍ͯΔ
    • mozilla@Firefox
    • Microsoft@Edge
    • Google@Chrome

    View Slide

  12. Case 4: Mozilla VR ͔Β A-Painter ͕ొ৔
    • A-Painter
    • https://aframe.io/a-painter
    • Mozilla VR ͕ެ։͍ͯ͠Δ WebVR ίϯςϯπ
    ։ൃͷͨΊͷϑϨʔϜϫʔΫ A-Frame Ͱ࡞ΒΕ
    ͨϒϥ΢βͰಈ࡞͢Δ Tilt Brush ͷΑ͏ͳ΋ͷ
    • flag on ͷ Chromium ͱ HTC Vive Ͱಈ࡞
    • Mozilla ൃ͚ͩͲݱ࣌఺Ͱ Firefox ͸ະରԠ

    View Slide

  13. ͦ΋ͦ΋ A-Frame ͱ͸
    A web framework for building virtual reality experiences
    With HTML and Entity-Component ecosystem. Works on Vive,
    Rift, desktop, mobile platforms.
    https://aframe.io
    • HTML ϕʔεͰ WebVR ίϯςϯπΛ։ൃՄೳͳϑϨʔϜ
    ϫʔΫ
    • Web ൃͱ͍͏͜ͱͰΤίγεςϜ͕੔͍ͬͯΔ
    • A Week of A-Frame
    • e.g. Aframe-soccer -> 4 HTC Vive Controller ରԠ

    View Slide

  14. A-Frame ͕ग़དྷΔ͜ͱ
    • Oculus Rift, HTC Vive ͳͲͷ HMD ʹରԠ
    • v0.3.0 Ͱ WebVR 1.0 Λαϙʔτɺػೳ૿ڧ
    • HTC Vive Λ࢖ͬͯ΢ΣϒαΠτͷதͰϧʔ
    ϜεέʔϧΛ࣮ݱ
    • Vive Controller ʹରԠ
    • Unity ͷΑ͏ͳΠϯεϖΫλ͕࢖͑Δ

    View Slide

  15. ·ͱΊ
    • VR ݩ೥΋࢒Γ2ϲ݄ɺUE4/Unity ϕʔεͷ VR
    ίϯςϯπ͕Ճ଎͍ͯ͠ΔҰํͰɺ࣮͸ Web
    ٕज़ϕʔεͷ WebVR ΋࢓༷ࡦఆΛ͸͡Ίͱ͠
    ࣮ͯ֬ʹਐΜͰ͍Δ
    • ੡࡞/։ൃ͕ Web ԰ʹ޿͕Δ͜ͱͰ࡞Γख΋૿
    ͑ͯ VR ք۾͕ΑΓ׆ੑԽ͢Δͱࢥ͍ͬͯ·͢
    • A-Frame ͍͍Α A-Frame

    View Slide

  16. ৮Εͳ͔ͬͨ͜ͱ
    • A-Frame ͷ։ൃࣄྫɺख๏ɺTIPS
    • ஌Γ͍ͨํ͸ TOKYO A-Framer Meetup ΁
    • A-Frame Ҏ֎ͷ WebVR ϑϨʔϜϫʔΫ
    • ࿝ฮͷ Three.js, ৽ڵͷ Solfa, etc
    • ϞόΠϧ WebVR ͷಈ޲
    • ಛʹ Safari@Apple ͷಈ޲

    View Slide

  17. ͠͹Β͘ VR ։ൃͷओྲྀ͸
    UE4/Unity ͩͱࢥ͍·͕͢
    WebVR ʹ৮ΕͯΈΔਓ΋
    ૿͑Ε͹͍͍ͳͱࢥ͍·͢

    View Slide

  18. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View Slide