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

iOSではじめるWebAR 2021
2021-09-18 13:30~13:50 Track C iOSDC Japan 2021
株式会社ZOZOテクノロジーズ 
諸星一行 a.k.a @ikkou
Copyright © 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 がリリースされた場合
は資料をアップデートして公開します！
はじめに

View Slide

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

View Slide

© ZOZO Technologies, Inc.

View Slide

前回までのお話し
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 が発売される前のお話です！

View Slide

● WebARの推せるところ・惜しいところ
● Update 2020 to 2021
● WebAR コンテンツのつくりかた 2021
本日お話しすること

View Slide

● 過去の歴史的経緯
○ 当時影響の大きかった「モーションと画面の向きのアクセス」は iOS 14 系で
は既に設定項目が存在しないため 2021 年現在は触れる必要がない
● iOS 15 で変わる xxx
○ NDA に抵触する内容には触れられません
本日お話ししないこと

View Slide

● AR は現実世界にバーチャルなものを “重畳” する
● AR は Vision based AR と Location based AR に大別できる
○ Vision based AR はさらにマーカー型とマーカーレス型に大別できる
● iOS における AR は ARKit が担っている
● ブラウザを通した AR を WebAR と定義する
○ iOS 標準の Safari または WebView で動作する AR
○ WebXR Device API の使用有無は問わない
おさらい
ちょうじょう

View Slide

百聞は“一体験”に如かず
顔認識型 WebAR
『Virtua Fighter esports』リリース記念！キャラクター顔チェック
アニメーション付き AR Quick Look の挙動
Quick Lookギャラリー - 拡張現実 - Apple Developer
お手元の iPhone で二次元バーコードからアクセスしてください

View Slide

WebARの推せるところ・惜しいところ
● 推せるところ
○ ブラウザでアクセスすれば動く = アプリのインストールが不要！
○ Web アプリなので iOS と Android の両方で動く！
○ Xcode を触らないで AR コンテンツが作れる！
● 惜しいところ
○ ARKit でできることのすべてを実現できるわけではない！
○ とっつきやすい反面、Web ならではの制限も多い！
○ Web フロントエンドエンジニアで興味を持っている人が少ない印象！

View Slide

Update 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 が加速するかもしれない！

View Slide

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

View Slide

LiDAR 搭載デバイスによるモノのオクルージョンの比較
Update
2020
to
2021
FIg.1 LiDAR 搭載デバイスの場合
AR オブジェクトが物陰に隠れる
Fig 2. LiDAR 非搭載デバイスの場合
AR オブジェクトが物陰に隠れない
Ref. https://developer.apple.com/jp/augmented-reality/quick-look/

View Slide

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

View Slide

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

View Slide

HTML element が登場！
● iOS 14.5 のアップデートで HTML element が登場
● に代わる USDZ ファイルの表示方法
● これまでの挙動
○ 初期状態はサムネイル表示、タップすると AR Quick Look で AR 表示
○ iOS/iPad OS 以外のブラウザでタップすると USDZ ファイルをダウンロード
○ USDZ ファイルをぐりぐり動かせない
● iOS 14.7.1 時点では USDZ ファイルは表示されない！
○ USDZ ファイルが読み込まれていることは確認できる
Update
2020
to
2021

View Slide

● 設定→Safari→詳細→Experimental Features→実験的なWebKitの機能
→HTML element を有効化
HTML element の書き方
Update
2020
to
2021
● a 要素ではなく model 要素を使用する

● HTMLModelElement が生成され、currentSrc に USDZ がセットされる
● iOS 14.7.1 時点では USDZ ファイルは表示されない！(再掲)

View Slide

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

View Slide

　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/#speciﬁcation-webxr

View Slide

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

View Slide

Update
2020
to
2021

View Slide

WebAR コンテンツのつくりかた 2021
● WebAR で表示する 3D モデルをつくりたい！
● はやりのノーコードでどうにかしたい！
● iOS だけでいいから AR Quick Look でなにかしたい！
● iOS/Android の両対応は絶対に必要！
● お金のかかる 8th Wall はなにがすごいのか？
● お金のかかる 8th Wall 以外の選択肢は？
W
ebARコ
ン
テ
ン
ツ
の
つ
く
り
か
た
2021

View Slide

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

View Slide

はやりのノーコードでどうにかしたい！
まずは無料ではじめられる palanAR をつかって WebAR でどんなものが
つくれるのか体験してみる
● AR マーカーあり
● AR マーカーなし
● 画像認識 (Natural Feature Tracking)
● 平面認識
● 顔認識
● フォトフレーム
● GPS ベース
palanAR | WebAR作成オンラインツール
W
ebARコ
ン
テ
ン
ツ
の
つ
く
り
か
た
2021

View Slide

iOS だけでいいから 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 へ連携
W
ebARコ
ン
テ
ン
ツ
の
つ
く
り
か
た
2021

View Slide

iOS/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/
W
ebARコ
ン
テ
ン
ツ
の
つ
く
り
か
た
2021

View Slide

お金のかかる 8th Wall はなにがすごいのか？
8th Wall は国内外でのプロモーション利用例も多い WebAR のための強
力な有償ソリューション
● 商用利用の場合はビュー数に応じて最低でも月額 $99 + $1,250 が発生
● SLAM、6 DoF の精度が高く、画像認識や顔認識にも対応している
● さまざまなサンプル込みのクラウドエディタが提供されている
● HTTPS 環境でのテストやデプロイが整備されている
● 日本国内では Mawari Inc. が多くの実績を持っている
Ref. https://modelviewer.dev/
W
ebARコ
ン
テ
ン
ツ
の
つ
く
り
か
た
2021

View Slide

お金のかかる 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

View Slide

まとめ
● WebARの推せるところと惜しいところを説明しました
● iOSDC2020 から iOSDC2021 の間にあった iOS における
WebAR に関連する特筆すべきアップデートを説明しました
● iOS 向け WebAR コンテンツのつくりかたをいくつか紹介しま
した

View Slide

30
iOS で良き WebAR ライフを！

View Slide

View Slide

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

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

ikkou

More Decks by ikkou

Other Decks in Technology

Featured

Transcript