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
2. 2019/12/12 WebAR TOKYO #01 #webartokyo Use case of WebAR CITIZEN AR try⌚ Source: https://ar-try.citizen.jp/
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 めぐるーまーで雛乃木神社氏子の観測者 積極採用中です……!!
4. 2019/12/12 WebAR TOKYO #01 #webartokyo Disclaimer • 本資料に掲載している情報は 2019/12/12 現在の情報を もとにしています。 • 本資料は発表後に Speaker Deck で公開予定です。 • 本資料に具体的な Code の書き方は出てきません。
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
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
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
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
9. 2019/12/12 WebAR TOKYO #01 #webartokyo Specification of WebXR Device API ( Working Draft ) Source: https://www.w3.org/TR/webxr/
10. 2019/12/12 WebAR TOKYO #01 #webartokyo Specification of WebXR Device API ( Editors’ Draft ) Source: https://immersive-web.github.io/webxr/
11. 2019/12/12 WebAR TOKYO #01 #webartokyo Support status of WebXR Device API Source: https://caniuse.com/#search=WebXR
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 を必ずしも 使うわけではない
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” 的な機能を “拡張” するモジュール 環境マッピングが可能になる！
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 を立てると動作
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 ><
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” を使用
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 の両方に対応
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
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
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
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 リリース ) • モーションデータ取得不可の憂き目にも遭っていない
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 を利用
23. 2019/12/12 WebAR TOKYO #01 #webartokyo Let’s start developing WebAR • AR Quick Look ( for iOS 12+ ) • <model-viewer> ( 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 )