Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The past and future of WebAR - The WebXR Device...

ikkou
December 12, 2019

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 公開

ikkou

December 12, 2019
Tweet

More Decks by ikkou

Other Decks in Technology

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 )