#iOSDC Japan 2021 で登壇した資料です:)
iOSではじめるWebAR 2021 https://fortee.jp/iosdc-japan-2021/proposal/bd8ac829-bad0-4640-aea2-94597d594bb0
iOSではじめるWebAR 20212021-09-18 13:30~13:50 Track C iOSDC Japan 2021株式会社ZOZOテクノロジーズ 諸星 一行 a.k.a @ikkouCopyright © ZOZO Technologies, Inc.
View Slide
© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou● 本資料は Speaker Deck に公開済みです!● URL はハッシュタグ #iOSDC つきでツイート済みです!● 20 分枠なのでサクサク進めるために飛ばす箇所もあります!● 録画映像は 2021-09-01 現在の情報に基づいています!○ 2021-09-01 から 2021-09-18 の間に iOS 15 がリリースされた場合は資料をアップデートして公開します!はじめに
ZOZO Technologies, Inc.Software Engineer諸星 一行 a.k.a @ikkouXR(VR/AR/MR) × Fashion という軸で試行錯誤中。● 2021-2022 Microsoft MVP for Windows Development● 日本バーチャルリアリティ学会 VR 技術者● XRKaigi 2021 運営 / WebXR Tech Tokyo 主催🎤 09/18 17:25〜 LT『あなたの知らないSafariのExperimental Featuresの世界』Twitter では HEAVEN ちゃんとして生きていますが VTuber ではありません:)https://twitter.com/ikkou© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou
© ZOZO Technologies, Inc.
© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou前回までのお話しhttps://fortee.jp/iosdc-japan-2020/proposal/2e3d39d3-8cf3-4b7b-b449-519ec7c2ecef https://youtu.be/WGE1pv5MQFA https://speakerdeck.com/ikkou/webar-in-ios昨年の iOSDC Japan 2020 では、iOS (iPadOS含む) における WebAR について、iOS 10.3 まで遡った歴史的経緯を踏まえ、仕様面の現況や、目的別 WebAR コンテンツのつくりかたをお話ししました!まだ LiDAR 搭載 iPhone が発売される前のお話です!
© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou● WebARの推せるところ・惜しいところ● Update 2020 to 2021● WebAR コンテンツのつくりかた 2021本日お話しすること
© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou● 過去の歴史的経緯○ 当時影響の大きかった「モーションと画面の向きのアクセス」は iOS 14 系では既に設定項目が存在しないため 2021 年現在は触れる必要がない● iOS 15 で変わる xxx○ NDA に抵触する内容には触れられません本日お話ししないこと
© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou● AR は現実世界にバーチャルなものを “重畳” する● AR は Vision based AR と Location based AR に大別できる○ Vision based AR はさらにマーカー型とマーカーレス型に大別できる● iOS における AR は ARKit が担っている● ブラウザを通した AR を WebAR と定義する○ iOS 標準の Safari または WebView で動作する AR○ WebXR Device API の使用有無は問わないおさらいちょうじょう
© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou百聞は“一体験”に如かず顔認識型 WebAR『Virtua Fighter esports』リリース記念!キャラクター顔チェックアニメーション付き AR Quick Look の挙動Quick Lookギャラリー - 拡張現実 - Apple Developerお手元の iPhone で二次元バーコードからアクセスしてください
© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkouWebARの推せるところ・惜しいところ● 推せるところ○ ブラウザでアクセスすれば動く = アプリのインストールが不要!○ Web アプリなので iOS と Android の両方で動く!○ Xcode を触らないで AR コンテンツが作れる!● 惜しいところ○ ARKit でできることのすべてを実現できるわけではない!○ とっつきやすい反面、Web ならではの制限も多い!○ Web フロントエンドエンジニアで興味を持っている人が少ない印象!
© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkouUpdate 2020 to 2021● LiDAR 対応デバイスが増えた!● [iOS 14.3] WKWebView が getUserMedia に対応!● [iOS 14.3] WKWebView が MediaRecorder に対応!● [iOS 14.5] HTML element が登場!● [iOS 15] WebGL 2.0 と WebShare API Level 2 がくる!● [iOS 15?] WebKit に WebXR Device API がくるかもしれない?● Object Capture で WebAR が加速するかもしれない!
© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkouLiDAR 対応デバイスが増えた!● LiDAR は高精度の平面検出を実現する技術、ハードウェアが必要● iPad Pro に加え、iPhone 12 Pro と iPhone 12 Pro Max が対応○ iPad Pro 12.9 インチ (第 4 世代、第 5 世代)○ iPad Pro 11 インチ (第 2 世代、第 3 世代)○ iPhone 12 Pro○ iPhone 12 Pro Max● LiDAR 搭載 iPhone/iPad であればモノのオクルージョンに対応できる○ LiDAR 非搭載 iPhone/iPad はヒューマンセグメンテーションに対応Update2020to2021
© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkouLiDAR 搭載デバイスによるモノのオクルージョンの比較Update2020to2021FIg.1 LiDAR 搭載デバイスの場合AR オブジェクトが物陰に隠れるFig 2. LiDAR 非搭載デバイスの場合AR オブジェクトが物陰に隠れないRef. https://developer.apple.com/jp/augmented-reality/quick-look/
© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkouWKWebView が getUserMedia に対応!● iOS 14.3 のアップデートで WKWebView が getUserMedia に対応!● WKWebView はアプリ内ブラウザのエンジン● getUserMedia は WebAR に重要なカメラを操作するメソッド● iOS 14.2 以前はアプリ内ブラウザで WebAR が動作しなかった○ つまり Twitter や Facebook などでシェアされた導線から動作しなかった○ iOS 版 Chrome や Firefox でも動作しなかった○ 何らかの手段で改めて Safari で開いてもらう必要があった● 縛りがなくなって WebAR コンテンツの利便性が大きく向上!Update2020to2021
© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkouWKWebView が MediaRecorder に対応!● iOS 14.3 のアップデートで WKWebView が MediaRecorder にも対応!● MediaRecorder API は getUserMedia で取得した MediaStream つまりWebAR で表示しているものをキャプチャして動画として保存できる○ 保存される動画には映像だけではなく音声も含められる○ mimeType には video/mp4 や video/webm を指定できる● iOS 14.2 以前は独自の対応が必要だった● 動く WebAR コンテンツを動画としてシェアしてもらいやすくなった!Update2020to2021
© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkouHTML element が登場!● iOS 14.5 のアップデートで HTML element が登場● に代わる USDZ ファイルの表示方法● これまでの挙動○ 初期状態はサムネイル表示、タップすると AR Quick Look で AR 表示○ iOS/iPad OS 以外のブラウザでタップすると USDZ ファイルをダウンロード○ USDZ ファイルをぐりぐり動かせない● iOS 14.7.1 時点では USDZ ファイルは表示されない!○ USDZ ファイルが読み込まれていることは確認できるUpdate2020to2021
© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou● 設定→Safari→詳細→Experimental Features→実験的なWebKitの機能→HTML element を有効化HTML element の書き方Update2020to2021● a 要素ではなく model 要素を使用する● HTMLModelElement が生成され、currentSrc に USDZ がセットされる● iOS 14.7.1 時点では USDZ ファイルは表示されない!(再掲)
© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkouWebGL 2.0 と WebShare API Level 2 がくる!● iOS 14.7.1 時点では使えない WebGL 2 と WebShare API Level 2○ Experimental Features からフラグを On にすれば iOS 14.7.1 でも試せる● リリースノート通りにリリースされれば両方とも iOS 15 から使える○ Safari 15 Beta Release Notes> Added support for WebGL 2. The implementation of WebGL runs on top of Metal forbetter performance.> Added support for Web Share level 2 enhancements to Web Share that enablesharing files from a web page to an app. See Web Share API for more information.● WebGL 2.0 は WebGL 1.0 の後継にあたるグラフィック系 API● WebShare API Level 2 は同 Level 1 の後継で画像のシェアが可能になるUpdate2020to2021
© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou WebKit に WebXR Device API がくるかもしれない?● WebXR Device API は XR (VR/AR/MR) デバイスの状態を取得する API● Safari (WebKit) は長らく対応の兆しが見えなかった● 2021/02 WebKit Feature Status に In Development として登場!● iOS 14.7.1 時点では Experimental Features にも設定項目はないUpdate2020to2021Ref. https://webkit.org/status/#specification-webxr
© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkouObject Capture で WebAR が加速するかもしれない!● Object Capture は WWDC21 で発表された macOS Monterey で使えるようになるフォトグラメトリ用の新しい API● フォトグラメトリは 2D の写真から 3D モデルを生成する技術● 有償アプリケーションの RealityCapture や 3DF Zephyr と異なり、諸条件さえ満たせれば無償で 3D モデル (USDZ) を生成できる● 生成される USDZ は iOS/iPadOS の AR 標準フォーマット● 3D モデルの生成が容易になることで、WebAR が加速するかもしれない!Update2020to2021
© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkouUpdate2020to2021
© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkouWebAR コンテンツのつくりかた 2021● WebAR で表示する 3D モデルをつくりたい!● はやりのノーコードでどうにかしたい!● iOS だけでいいから AR Quick Look でなにかしたい!● iOS/Android の両対応は絶対に必要!● お金のかかる 8th Wall はなにがすごいのか?● お金のかかる 8th Wall 以外の選択肢は?WebARコンテンツのつくりかた2021
© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkouWebAR で表示する 3D モデルをつくりたい!● Reality Converter で USDZ に変換する○ Maya などの DCC ツールで 3D モデルを制作して USDZ に変換する○ RealityCapture などでフォトグラメトリして USDZ に変換する○ VRM の拡張子 .vrm を .glb に変更して USDZ に変換する (Tポーズ)● Sketchfab にアップロードして USDZ でダウンロードする● Cinema 4D で制作して USDZ で書き出す● Reality Composer で作成して USDZ で書き出す● Object Capture でフォトグラメトリして USDZ で書き出す etc.WebARコンテンツのつくりかた2021
© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkouはやりのノーコードでどうにかしたい!まずは無料ではじめられる palanAR をつかって WebAR でどんなものがつくれるのか体験してみる● AR マーカーあり● AR マーカーなし● 画像認識 (Natural Feature Tracking)● 平面認識● 顔認識● フォトフレーム● GPS ベースpalanAR | WebAR作成オンラインツールWebARコンテンツのつくりかた2021
© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkouiOS だけでいいから AR Quick Look でなにかしたい!AR Quick Look は Apple が提供する iOS/iPadOS を対象とした仕組み● 画像をタップして USDZ ファイルを表示する WebAR を起動● USDZ ファイルを表示しながら Apple Pay ボタンなどを表示● USDZ ファイルを表示しながらカスタムバナーを表示● USDZ ファイルを表示しながらボタンやバナータップでイベント発火タップを検出して _apple_ar_quicklook_button_tapped を判定して Apple Pay JS API へ連携WebARコンテンツのつくりかた2021
© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkouiOS/Android の両対応は絶対に必要!Google が提供している iOS/Android 両対応の を使う● なら 1 ソースで iOS/Android の両対応が可能● v1.6.0 までは iOS 向けに USDZ、Android 向けに GLB が必要だった● v1.7.0 で GLB から USDZ への変換機能が実装された!○ 変換が不十分な場合は従来の ios-src も引き続き使えるRef. https://modelviewer.dev/WebARコンテンツのつくりかた2021
© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkouお金のかかる 8th Wall はなにがすごいのか?8th Wall は国内外でのプロモーション利用例も多い WebAR のための強力な有償ソリューション● 商用利用の場合はビュー数に応じて最低でも月額 $99 + $1,250 が発生● SLAM、6 DoF の精度が高く、画像認識や顔認識にも対応している● さまざまなサンプル込みのクラウドエディタが提供されている● HTTPS 環境でのテストやデプロイが整備されている● 日本国内では Mawari Inc. が多くの実績を持っているRef. https://modelviewer.dev/WebARコンテンツのつくりかた2021
© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkouお金のかかる 8th Wall 以外の選択肢は?原則としてやりたいことベースで選定する、まずは定番の AR.js から!● AR.js AR 系は JSARToolKit5、描画系は Three.js または A-Frame● Three.js AR.js と組み合わせない方法でも WebAR に対応可能● Babylon.js WebVR 向けだが WebXR Device API 準拠で WebAR に対応● MediaPipe Face Detection、Face Mesh、Hands などの複数機能が WebAR に対応● face-api.js TensorFlow.js を利用した顔検出と顔認識に特化した JS ライブラリ● jeelizFaceFilter 顔検出と顔認識に特化した JS ライブラリ● WebGL フルスクラッチ etc.WebARコンテンツのつくりかた2021
© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkouまとめ● WebARの推せるところと惜しいところを説明しました● iOSDC2020 から iOSDC2021 の間にあった iOS におけるWebAR に関連する特筆すべきアップデートを説明しました● iOS 向け WebAR コンテンツのつくりかたをいくつか紹介しました
30iOS で良き WebAR ライフを!© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou