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

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

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 めぐるーまーで雛乃木神社氏子の観測者 積極採用中です……!!

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

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

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

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

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

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

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

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

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 を必ずしも 使うわけではない

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” 的な機能を “拡張” するモジュール 環境マッピングが可能になる！

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 を立てると動作

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

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” を使用

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 の両方に対応

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

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

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

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 リリース ) ● モーションデータ取得不可の憂き目にも遭っていない

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 を利用

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 )