The past and future of WebAR - The WebXR Device API was shipped in Chrome 79

2019/12/12 WebAR TOKYO #01 オープニングセッションで話した WebAR の発表資料です:D
https://webar-tokyo.connpass.com/event/156371/

2019-12-12 v1 公開

Transcript

1. 2019/12/12 WebAR TOKYO #01 #webartokyo
   The past and future of WebAR
   The WebXR Device API was shipped in Chrome 79
   2019/12/11 WebAR TOKYO #01 @ikkou
   

   View Slide

2. 2019/12/12 WebAR TOKYO #01 #webartokyo
   Use case of WebAR
   CITIZEN AR try⌚
   Source: https://ar-try.citizen.jp/
   

   View Slide

3. 2019/12/12 WebAR TOKYO #01 #webartokyo
   About Speaker
   諸星 一行 / IKKOU Morohoshi / @ikkou
   ZOZO Technologies, Inc. / ONE SHOT STAR
   2度目の #XR転職 を経て 2019/11 より現職
   xR 開発者コミュニティ “xR Tech Tokyo” 主宰
   国内最大級の XR カンファレンス “XR Kaigi 2019” 運営
   xR に関する旬な情報を届ける “xR.fm” Podcaster
   めぐるーまーで雛乃木神社氏子の観測者
   積極採用中です……!!
   

   View Slide

4. 2019/12/12 WebAR TOKYO #01 #webartokyo
   Disclaimer
   ● 本資料に掲載している情報は 2019/12/12 現在の情報を
   もとにしています。
   ● 本資料は発表後に Speaker Deck で公開予定です。
   ● 本資料に具体的な Code の書き方は出てきません。
   

   View Slide

5. 2019/12/12 WebAR TOKYO #01 #webartokyo
   About WebXR
   2019-09-06 CEDEC 2019 Day 3 WebXRの現状と実社会への応用事例 / Talk about WebXR at CEDEC 2019
   https://speakerdeck.com/ikkou/talk-about-webxr-at-cedec-2019
   

   View Slide

6. 2019/12/12 WebAR TOKYO #01 #webartokyo
   Do you know this “proposed” logo for WebXR?
   Source: https://twitter.com/tojiro/status/1149091423867695104 via Brandon Jones @ WebXR Spec Editor
   

   View Slide

7. 2019/12/12 WebAR TOKYO #01 #webartokyo
   The WebXR Device API was shipped in Chrome 79
   Source: https://youtu.be/L0OB0_bO5I0?t=59
   

   View Slide

8. 2019/12/12 WebAR TOKYO #01 #webartokyo
   The WebXR Device API was shipped in Chrome 79
   Source: https://youtu.be/L0OB0_bO5I0?t=68
   

   View Slide

9. 2019/12/12 WebAR TOKYO #01 #webartokyo
   Specification of WebXR Device API ( Working Draft )
   Source: https://www.w3.org/TR/webxr/
   

   View Slide

10. 2019/12/12 WebAR TOKYO #01 #webartokyo
    Specification of WebXR Device API ( Editors’ Draft )
    Source: https://immersive-web.github.io/webxr/
    

    View Slide

11. 2019/12/12 WebAR TOKYO #01 #webartokyo
    Support status of WebXR Device API
    Source: https://caniuse.com/#search=WebXR
    

    View Slide

12. 2019/12/12 WebAR TOKYO #01 #webartokyo
    WebXR Device API
    ● VR HMD のみを対象としていた WebVR API に対して、
    WebXR Device API は AR HMD ( e.g. 具体名は挙げられていな
    い) と MR HMD ( e.g. Magic Leap 1 ) も対象としている
    ● WebXR Device API はブラウザ経由で (VR|AR|MR) HMD
    を扱いたいときに使う API
    ● WebAR コンテンツの開発は WebXR Device API を必ずしも
    使うわけではない
    

    View Slide

13. 2019/12/12 WebAR TOKYO #01 #webartokyo
    Specification of WebXR Augmented Reality Module
    Source: https://www.w3.org/TR/webxr-ar-module-1/
    WebXR Augmented Reality Module は WebXR Device API に “AR” 的な機能を “拡張” するモジュール
    環境マッピングが可能になる！
    

    View Slide

14. 2019/12/12 WebAR TOKYO #01 #webartokyo
    You can try demo using WebXR AR Module now
    Source: https://www.w3.org/TR/webxr-ar-module-1/
    ARCore が実装されている Android Device の Chrome Canary for Android 80+ で flag を立てると動作
    

    View Slide

15. 2019/12/12 WebAR TOKYO #01 #webartokyo
    Also you can try on Desktop browser !!
    Source: https://threejs.org/examples/#webxr_ar_paint via @takahiro(John Smith)
    but you have to hack something ><
    

    View Slide

16. 2019/12/12 WebAR TOKYO #01 #webartokyo
    Today’s definition of WebAR
    ● Web Front-end = HTML, CSS, JavaScript を中心とした技術
    で AR を実現するものを WebAR と定義
    ● WebXR Device API の利用有無は問わない
    ● 表記としては “Web AR” ではなく “WebAR” を使用
    

    View Slide

17. 2019/12/12 WebAR TOKYO #01 #webartokyo
    What’s AR
    ● AR = Augmented Reality、日本語訳は「拡張現実感」
    ● おおまかな分類は以下の 3 種類
    ○ 位置情報に連動する Location based AR
    ■ e.g. セカイカメラ, 初期 Pokémon GO
    ○ Vision based AR
    ■ 二次元バーコード等のマーカーを認識するマーカー型
    ■ マーカーではなく空間/物体認識によるマーカーレス型
    ● e.g. Pokémon GO AR+
    ○ みんな大好き AR.js は v2.0.0 から Location based AR と Vision
    based AR の両方に対応
    

    View Slide

18. 2019/12/12 WebAR TOKYO #01 #webartokyo
    History of WebAR for iOS 1/3
    ● 2017/09 iOS 11 で MediaDevices.getUserMedia() が
    使用可能になった！
    ○ ブラウザ経由で前面/背面のカメラ画像を取得できるようにな
    り、Vision based な WebAR が実現可能に！
    ○ iOS 11 以前は iOS で Vision based AR を展開できなかった
    ○ Android はそれ以前から実現できた
    Source: https://caniuse.com/#search=MediaDevices
    

    View Slide

19. 2019/12/12 WebAR TOKYO #01 #webartokyo
    History of WebAR for iOS 2/3
    ● 2019/03 iOS 12.2 でモーションデータが取得不可になる
    ○ モーションデータが取得できなくなり、iOS 13 がリリースされる
    まで主に WebVR がしんだ
    ○ WebAR を実現する 8th Wall も影響を受けたが iOS 13 Beta
    の途中から追加された対応策を採っていた
    ○ iOS 12.2 の件は Qiita にまとめています:D
    ■ ref. iOS 12.2でWebVRとWebARが半ば終わった件につい
    て
    Source: https://developer.apple.com/documentation/ios_ipados_release_notes/ios_12_2_release_notes
    

    View Slide

20. 2019/12/12 WebAR TOKYO #01 #webartokyo
    History of WebAR for iOS 3/3
    ● 2019/09 iOS 13 からデフォルトでモーションデータが取得で
    きなくなった代わりに新しい API が追加された
    ○ DeviceMotionEvent と DeviecOrientationEvent を
    叩くことでこれまで通り WebAR が実現可能になった
    ○ これで万事解決かと言うとそうとは言い切れない
    ○ iOS 13 の件も Qiita にまとめています:D
    ■ ref. iOS 12.2で半ば終わったWebVRとWebARがiOS 13でど
    うなったか
    Source: https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes
    

    View Slide

21. 2019/12/12 WebAR TOKYO #01 #webartokyo
    History of WebAR for Android
    ● Android における MediaDevices.getUserMedia() は
    iOS よりも早いタイミングから使えた
    ○ Android 版 Firefox 36 以降 ( 2015/02 リリース )
    ○ Android 版 Chrome 52 以降 ( 2016/08 リリース )
    ● モーションデータ取得不可の憂き目にも遭っていない
    

    View Slide

22. 2019/12/12 WebAR TOKYO #01 #webartokyo
    History of WebAR for Library
    ● ARToolKit ( C / 日本人が開発!! )
    ○ NyARToolkit5 ( Java, Processing, C#, Unity )
    ■ FLARToolKit ( AS3 port of NyARToolkit )
    ● JSARToolkit ( JavaScript port of FLARToolKit )
    ○ JSARToolKit v5 ( Emscripten port of ARToolKit to JavaScript. )
    ■ AR.js は JSARToolKit v5 と three.js を利用
    

    View Slide

23. 2019/12/12 WebAR TOKYO #01 #webartokyo
    Let’s start developing WebAR
    ● AR Quick Look ( for iOS 12+ )
    ● ( for ARCore supported devices and also iOS, ML1 )
    ● JavaScript Library
    ○ AR.js ( w/ A-Frame, three.js )
    ○ BabylonAR ( w/Babylon.js )
    ● Web Services
    ○ PlayCanvas ( w/ 8th Wall )
    

    View Slide