iOSではじめるWebAR 2021 2021-09-18 13:30~13:50 Track C iOSDC Japan 2021 株式会社ZOZOテクノロジーズ
 諸星 一行 a.k.a @ikkou Copyright © ZOZO Technologies, Inc.

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

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

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

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

© 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

© 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

© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou 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

© 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 の書き方 Update 2020 to 2021 ● 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 @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

© 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

© 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

© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou Update 2020 to 2021

© 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

© 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

© 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

© 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 を起動 ● USDZ ファイルを表示しながら Apple Pay ボタンなどを表示 ● USDZ ファイルを表示しながらカスタムバナーを表示 ● USDZ ファイルを表示しながらボタンやバナータップでイベント発火 タップを検出して _apple_ar_quicklook_button_tapped を判定して Apple Pay JS API へ連携 W ebARコ ン テ ン ツ の つ く り か た 2021

© ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou 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

© 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

© 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

© 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 iOS で良き WebAR ライフを！ © ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou

No content