iOSではじめるWebAR 2021 - iOSDC Japan 2021 / webar-in-ios-2021

#iOSDC Japan 2021 で登壇した資料です:)

iOSではじめるWebAR 2021
https://fortee.jp/iosdc-japan-2021/proposal/bd8ac829-bad0-4640-aea2-94597d594bb0

Transcript

1. iOSではじめるWebAR 2021 2021-09-18 13:30~13:50 Track C iOSDC Japan 2021 株式会社ZOZOテクノロジーズ
 諸星 一行 a.k.a @ikkou Copyright © ZOZO Technologies, Inc.
2. © 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 がリリースされた場合 は資料をアップデートして公開します！ はじめに
3. ZOZO Technologies, Inc. Software Engineer 諸星 一行 a.k.a @ikkou XR(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
4. © ZOZO Technologies, Inc.
5. © 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 が発売される前のお話です！
6. © ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou • WebARの推せるところ・惜しいところ • Update 2020 to 2021 • WebAR コンテンツのつくりかた 2021 本日お話しすること
7. © ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou • 過去の歴史的経緯 ◦ 当時影響の大きかった「モーションと画面の向きのアクセス」は iOS 14 系で は既に設定項目が存在しないため 2021 年現在は触れる必要がない • iOS 15 で変わる xxx ◦ NDA に抵触する内容には触れられません 本日お話ししないこと
8. © 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 の使用有無は問わない おさらい ちょうじょう
9. © 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 で二次元バーコードからアクセスしてください
10. © ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou WebARの推せるところ・惜しいところ • 推せるところ ◦ ブラウザでアクセスすれば動く = アプリのインストールが不要！ ◦ Web アプリなので iOS と Android の両方で動く！ ◦ Xcode を触らないで AR コンテンツが作れる！ • 惜しいところ ◦ ARKit でできることのすべてを実現できるわけではない！ ◦ とっつきやすい反面、Web ならではの制限も多い！ ◦ Web フロントエンドエンジニアで興味を持っている人が少ない印象！
11. © ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou Update 2020 to 2021 • LiDAR 対応デバイスが増えた！ • [iOS 14.3] WKWebView が getUserMedia に対応！ • [iOS 14.3] WKWebView が MediaRecorder に対応！ • [iOS 14.5] HTML <model> element が登場！ • [iOS 15] WebGL 2.0 と WebShare API Level 2 がくる！ • [iOS 15?] WebKit に WebXR Device API がくるかもしれない？ • Object Capture で WebAR が加速するかもしれない！
12. © ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou LiDAR 対応デバイスが増えた！ • 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 はヒューマンセグメンテーションに対応 Update 2020 to 2021
13. © ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou LiDAR 搭載デバイスによるモノのオクルージョンの比較 Update 2020 to 2021 FIg.1 LiDAR 搭載デバイスの場合 AR オブジェクトが物陰に隠れる Fig 2. LiDAR 非搭載デバイスの場合 AR オブジェクトが物陰に隠れない Ref. https://developer.apple.com/jp/augmented-reality/quick-look/
14. © ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou WKWebView が getUserMedia に対応！ • iOS 14.3 のアップデートで WKWebView が getUserMedia に対応！ • WKWebView はアプリ内ブラウザのエンジン • getUserMedia は WebAR に重要なカメラを操作するメソッド • iOS 14.2 以前はアプリ内ブラウザで WebAR が動作しなかった ◦ つまり Twitter や Facebook などでシェアされた導線から動作しなかった ◦ iOS 版 Chrome や Firefox でも動作しなかった ◦ 何らかの手段で改めて Safari で開いてもらう必要があった • 縛りがなくなって WebAR コンテンツの利便性が大きく向上！ Update 2020 to 2021
15. © ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou WKWebView が MediaRecorder に対応！ • iOS 14.3 のアップデートで WKWebView が MediaRecorder にも対応！ • MediaRecorder API は getUserMedia で取得した MediaStream つまり WebAR で表示しているものをキャプチャして動画として保存できる ◦ 保存される動画には映像だけではなく音声も含められる ◦ mimeType には video/mp4 や video/webm を指定できる • iOS 14.2 以前は独自の対応が必要だった • 動く WebAR コンテンツを動画としてシェアしてもらいやすくなった！ Update 2020 to 2021
16. © ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou HTML <model> element が登場！ • iOS 14.5 のアップデートで HTML <model> element が登場 • <a href=”iosdc.usdz” rel=”ar”> に代わる USDZ ファイルの表示方法 • これまでの挙動 ◦ 初期状態はサムネイル表示、タップすると AR Quick Look で AR 表示 ◦ iOS/iPad OS 以外のブラウザでタップすると USDZ ファイルをダウンロード ◦ USDZ ファイルをぐりぐり動かせない • iOS 14.7.1 時点では USDZ ファイルは表示されない！ ◦ USDZ ファイルが読み込まれていることは確認できる Update 2020 to 2021
17. © ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou • 設定→Safari→詳細→Experimental Features→実験的なWebKitの機能 →HTML <model> element を有効化 HTML <model> element の書き方 Update 2020 to 2021 • a 要素ではなく model 要素を使用する <model> <source src="./iosdc.usdz"> </model> • HTMLModelElement が生成され、currentSrc に USDZ がセットされる • iOS 14.7.1 時点では USDZ ファイルは表示されない！(再掲)
18. © ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou WebGL 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 for better performance. > Added support for Web Share level 2 enhancements to Web Share that enable sharing 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 の後継で画像のシェアが可能になる Update 2020 to 2021
19. © 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 にも設定項目はない Update 2020 to 2021 Ref. https://webkit.org/status/#specification-webxr
20. © ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou Object Capture で WebAR が加速するかもしれない！ • Object Capture は WWDC21 で発表された macOS Monterey で使えるように なるフォトグラメトリ用の新しい API • フォトグラメトリは 2D の写真から 3D モデルを生成する技術 • 有償アプリケーションの RealityCapture や 3DF Zephyr と異なり、諸条件さえ 満たせれば無償で 3D モデル (USDZ) を生成できる • 生成される USDZ は iOS/iPadOS の AR 標準フォーマット • 3D モデルの生成が容易になることで、WebAR が加速するかもしれない！ Update 2020 to 2021
21. © ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou Update 2020 to 2021
22. © ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou WebAR コンテンツのつくりかた 2021 • WebAR で表示する 3D モデルをつくりたい！ • はやりのノーコードでどうにかしたい！ • iOS だけでいいから AR Quick Look でなにかしたい！ • iOS/Android の両対応は絶対に必要！ • お金のかかる 8th Wall はなにがすごいのか？ • お金のかかる 8th Wall 以外の選択肢は？ W ebARコ ン テ ン ツ の つ く り か た 2021
23. © ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou WebAR で表示する 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. W ebARコ ン テ ン ツ の つ く り か た 2021
24. © 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作成オンラインツール W ebARコ ン テ ン ツ の つ く り か た 2021
25. © ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou iOS だけでいいから AR Quick Look でなにかしたい！ AR Quick Look は Apple が提供する iOS/iPadOS を対象とした仕組み • 画像をタップして USDZ ファイルを表示する WebAR を起動 <a href="./iosdc.usdz" rel="ar"><img src="./thumbnail.png" rel="ar"></a> • USDZ ファイルを表示しながら Apple Pay ボタンなどを表示 <a href="./iosdc.usdz#applePayButtonType=plain&checkoutTitle=foo&checkoutSubtitle=bar &price=¥10,000" rel="ar"><img src="./thumbnail.png" rel="ar"></a> • USDZ ファイルを表示しながらカスタムバナーを表示 <a href="./iosdc.usdz#custom=https://example.com/customBanner.html &customHeight=large rel="ar"><img src="./thumbnail.png" rel="ar"></a> • USDZ ファイルを表示しながらボタンやバナータップでイベント発火 タップを検出して _apple_ar_quicklook_button_tapped を判定して Apple Pay JS API へ連携 W ebARコ ン テ ン ツ の つ く り か た 2021
26. © ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou iOS/Android の両対応は絶対に必要！ Google が提供している iOS/Android 両対応の <model-viewer> を使う • <model-viewer> なら 1 ソースで iOS/Android の両対応が可能 • v1.6.0 までは iOS 向けに USDZ、Android 向けに GLB が必要だった • v1.7.0 で GLB から USDZ への変換機能が実装された！ ◦ 変換が不十分な場合は従来の ios-src も引き続き使える <!-- 必要な script の読み込み --> <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script> <!-- USDZ ファイルは用意せずに WebAR で表示させる 3D モデルの指定 --> <model-viewer src="/path/to/iosdc.glb" ar ar-modes="webxr scene-viewer quick-look"></model-viewer> Ref. https://modelviewer.dev/ W ebARコ ン テ ン ツ の つ く り か た 2021
27. © 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/ W ebARコ ン テ ン ツ の つ く り か た 2021
28. © 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. W ebARコ ン テ ン ツ の つ く り か た 2021
29. © ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou まとめ • WebARの推せるところと惜しいところを説明しました • iOSDC2020 から iOSDC2021 の間にあった iOS における WebAR に関連する特筆すべきアップデートを説明しました • iOS 向け WebAR コンテンツのつくりかたをいくつか紹介しま した
30. 30 iOS で良き WebAR ライフを！ © ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou