Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

ikkou
September 18, 2021

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

ikkou

September 18, 2021
Tweet

More Decks by ikkou

Other Decks in Technology

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.

    View Slide

  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 がリリースされた場合
    は資料をアップデートして公開します!
    はじめに

    View Slide

  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

    View Slide

  4. © ZOZO Technologies, Inc.

    View Slide

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

    View Slide

  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
    本日お話しすること

    View Slide

  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 に抵触する内容には触れられません
    本日お話ししないこと

    View Slide

  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 の使用有無は問わない
    おさらい
    ちょうじょう

    View Slide

  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 で二次元バーコードからアクセスしてください

    View Slide

  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 フロントエンドエンジニアで興味を持っている人が少ない印象!

    View Slide

  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 element が登場!
    ● [iOS 15] WebGL 2.0 と WebShare API Level 2 がくる!
    ● [iOS 15?] WebKit に WebXR Device API がくるかもしれない?
    ● Object Capture で WebAR が加速するかもしれない!

    View Slide

  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

    View Slide

  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/

    View Slide

  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

    View Slide

  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

    View Slide

  16. © 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

    View Slide

  17. © 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 ファイルは表示されない!(再掲)

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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 を起動

    ● USDZ ファイルを表示しながら Apple Pay ボタンなどを表示

    ● USDZ ファイルを表示しながらカスタムバナーを表示

    ● USDZ ファイルを表示しながらボタンやバナータップでイベント発火
    タップを検出して _apple_ar_quicklook_button_tapped を判定して Apple Pay JS API へ連携
    W
    ebARコ










    2021

    View Slide

  26. © 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

    View Slide

  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

    View Slide

  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

    View Slide

  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 コンテンツのつくりかたをいくつか紹介しま
    した

    View Slide

  30. 30
    iOS で良き WebAR ライフを!
    © ZOZO Technologies, Inc. iOSではじめるWebAR 2021 - 2021-09-18 13:30~13:50 iOSDC Japan 2021 @ikkou

    View Slide

  31. View Slide