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

バーチャル背景を実現しよう

22e056dcb79e14363e844f1e57986325?s=47 BOB
September 18, 2021

 バーチャル背景を実現しよう

22e056dcb79e14363e844f1e57986325?s=128

BOB

September 18, 2021
Tweet

Transcript

  1. バーチャル背景を実現しよう 2021 / 09 / 17 iOSDC Japan 2021 Arata

    Yokoyama / GitHub : ARATAYOKOYAMA Twitter : BOBG 1018 Vi
  2. About Me • Arata Yokoyama • 2020年サイバーエージェント新卒⼊社 • タップルのiOSエンジニア •

    北海道出⾝ • アイドル‧特撮‧ガンダムを 
 こよなく愛している 2
  3. 1 .背景 2 .ARKitを使った⽅法 3 .CoreMLを使った⽅法 4 .本番導⼊に向けて 5 .まとめ

  4. 背景

  5. 新しい⽣活様式 • ⽣活が変わった • アプリやサービスを通して⼈と会話する機会も増えた • カメラ越しに話すときに,背景を隠したい 5 1.背景

  6. バーチャル背景 会議や通話中に背景を画像や動画で隠す 6 1.背景

  7. タップルのバーチャル背景 2020年8⽉リリース 動作端末:A 1 1 以上 7 マッチングアプリ「タップル誕⽣」、すぐにオンラインデートができる 「ビデオチャット」に新たに「フィルター機能」を追加:https://www.cyberagent.co.jp/news/detail/id= 250

    83 1.背景
  8. ARKitを使った⽅法

  9. 1. バーチャル背景の実現⽅ 法

  10. People Occlusion 1 0 ⼈をARコンテンツの前に表⽰できるようにする仕組みです 動作要件:iOS 13 以上,A 1 2

    以上 *ARFaceTrackingは深度カメラが必要ARWorldTrackingCon fi gurationと ARFaceTrackingCon fi gurationのみで動作します frameSemanticsɿhttps://developer.apple.com/documentation/arkit/arconfiguration/3089121-framesemantics 2 .ARKit
  11. 実現イメージ 1 1 2 .ARKit 背景 ⼈ スマホ 下 上

    画⾓ 層
  12. 実現⽅法 1/2:Nodeの作成 1 2 2 .ARKit 画⾯いっぱいに広がるSCNPlaneを⽤意する 追加したnodeは別途保持しておく

  13. 実現⽅法 2/2:カメラに追従させる 1 3 2 .ARKit 都度実⾏する カメラの位置や⾓度に追従させる

  14. 2. パフォーマンスの向上

  15. 画質を最低にする • ⾼画質な順に先頭から⼊っているため,最後を選択する Max: 1440 * 1080 60 FPS Min:

    1280 * 720 30 FPS 1 5 ARKitʹ͓͚ΔΧϝϥͷղ૾౓ͱϑϨʔϜϨʔτɿhttps://qiita.com/shu223/items/86ef45b4b5c0bba0276f 2 .ARKit
  16. デモ動画 1 6 2 .ARKit

  17. 3. 副次的に得られそうなメ リット

  18. ARコンテンツを⽤いたスタンプ • UIImageなどを顔の任意の場所に,配 置できる 任意の場所の種類 = 1220箇所 Enumなどではなく,数値指定なので注意 ex. ⿐なら9,

    右頬の中⼼なら600 1 8 2 .ARKit
  19. スタンプの実装⽅法 1 9 顔のアンカーかどうかをハンドリング fi rstMaterialにImageを配置した SCNPlaneを作る 顔,スタンプの順に追加したnodeを sceneViewに追加する 顔が再検出されたときのケアをする

    1 2 3 4 2 .ARKit
  20. 4 . ARKitを⽤いた場合のメ リット‧デメリット

  21. メリット 導⼊が後述するCoreMLより⽐較的楽だと感じてます ARコンテンツを⽤いたスタンプなど,今後の展望もあります デメリット 動作条件が厳しい • iOS 13 以上,A 12

    以上 *ARFaceTrackingは深度カメラが必要 iPhoneXS系統,XR, 11 系統,12系統,SE 2 st(iOS 1 4 ) メリット‧デメリット 2 1 動作OK iPhoneX, iPhone 8 系統, それ以前の端末 動作NG 2 .ARKit
  22. CoreMLを使った⽅法

  23. 1. 実現⽅針

  24. 背景分離 • 概要 - 前景らしい領域を与えて,分離させる • 実現⼿段の1つ:GrabCut - 古くから使われている⼿法 -

    iOSで実現しようとすると,フルスクラッ チ or OpenCVが必要かもしれない - YOLOと組み合わせる⽅法もあるがお⾒送り 2 4 3 .CoreML OpenCV Grabcut: http://labs.eecs.tottori-u.ac.jp/sd/Member/oyamada/OpenCV/html/py_tutorials/py_imgproc/py_grabcut/py_grabcut.html GrabCut, C. Rother, V. Kolmogorov, and A. Blake, ””Grabcut” - interactive foreground ex-traction using iterated graph cuts.” ACM Transactions on Graphics, Vol.23, No.2,pp.309–314, 2004.
  25. セグメンテーション • 概要(weblioより) - 区分,分割 - 市場細分化 • 具体的なイメージ -

    ある画像のうち,ここは⽝ここは⼈のように,領域を分割して意味合い をもたせることができます - ⼤きく分けて⼆種類存在します 2 5 3 .CoreML segmentation:https://ejje.weblio.jp/content/segmentation
  26. セグメンテーション セマンティックセグメンテーション 2 6 インスタンスセグメンテーション • ピクセル単位で分類 • 空や道路など不定形も分割しやすい •

    物体らしい領域を検出し,その中でピクセル単位で分割 • セマンティックより⾼速 • 同⼀カテゴリ,異なるオブジェクトも分割できる 3 .CoreML
  27. セグメンテーション セマンティックセグメンテーション 2 7 インスタンスセグメンテーション • ピクセル単位で分類 • 空や道路など不定形も抽出しやすい •

    物体らしい領域を検出し,その中でピクセル単位で分類 • セマンティックより⾼速 • 同⼀カテゴリ,異なるオブジェクトも分割できる リアルタイムインスタンスセグメンテーション + マスク処理 3 .CoreML
  28. 2. 使⽤モデル

  29. 求められる条件 1 . 商⽤利⽤可能であること 2 . ⼈間をリアルタイムにインスタンスセグメンテーションできる こと 3 .

    1と2を満たす中で,fpsが⾼いもの 
 *今回は精度よりスピードを優先したため,IOU等は指標に置いておりません 2 9 3 .CoreML
  30. 候補 3 0 ީิҰཡ Ϟσϧ໊ -JDFODF (JUIVC .BTL3$// .*5-JDFOTF IUUQTHJUIVCDPNNBUUFSQPSU

    .BTL@3$// %FFQ-BC7 "QBDIF-JDFOTF IUUQTHJUIVCDPNUFOTPS fl PX %FFQ-BC71MVT "QBDIF-JDFOTF IUUQTHJUIVCDPNUFOTPS fl PX &TQ/FU "QBDIF-JDFOTF IUUQTHJUIVCDPNFTQOFU FTQOFU #J4F/FU .*5-JDFOTF IUUQTHJUIVCDPN$PJO$IFVOH #J4F/FU 3 .CoreML
  31. 論⽂上でのパフォーマンス 3 1 3 .CoreML DeepLabV3ͷϕϯνϚʔΫ[1] Ϟσϧ໊ 94 9 %FFQ-BC7

    GQT GQT %FFQ-BC7'1 GQT GQT %FFQ-BC7*OU-65 GQT GQT DeepLabV3 PlusͷϕϯνϚʔΫ[2] Ϟσϧ໊  9 94 %FFQ-BC71MVT GQT GQT GQT • V 3 PLusはモバイル端末での動作を想定して改良 • 実装⽅法によって変化するので,参考程度にしました [2] Searching for MobileNetV3 : https://arxiv.org/pdf/1905.02244.pdf [1] Performance Test : https://github.com/tucan9389/SemanticSegmentation-CoreML/issues/2
  32. 今回の発表で使⽤するモデル • Deeplab V 3 FP 16 Appleのdeveloperサイトでも紹介されている 精度 <

    速度を重視 Apache License 2 . 0 3 2 Core MLϞσϧɿhttps://developer.apple.com/jp/machine-learning/models/ DeepLab: Deep Labelling for Semantic Image Segmentationɿhttps://github.com/tensorflow/models/tree/master/research/deeplab DeepLab: Semantic Image Segmentation with Deep Convolutional Nets, Atrous Convolution, and Fully Connected CRFsɿhttps://arxiv.org/abs/1606.00915 3 .CoreML
  33. 3. 推論⼿段

  34. CoreML 3 4 • 代表的なmlmodelを使う⼿段 • 基本的には,インスタンスを作って予測するだけでOK 3 .CoreML

  35. MLModelCon fi guration:MLComuteUnits 3 5 • mlmodelをinitするときにMLModelCon fi gurationを渡す 


    (con fi gを渡さないと警告が出ます) • MLComuteUnitsは3種類存在する 3 .CoreML
  36. MLComuteUnits:cpuOnly • 推論をCPUのみで⾏う • 他2つに⽐べて,パフォーマンスが低下する場合が多い • 何らかの理由でGPUを使⽤できない or 使⽤を回避するべきと判 断したときに選択すると良い

    • モデルのネットワーク構造によっては,CPUのみの⽅が早いこ ともあるかもしれない 3 6 MLComputeUnits.cpuOnlyɿhttps://developer.apple.com/documentation/coreml/mlcomputeunits/cpuonly 3 .CoreML
  37. MLComuteUnits:cpuAndGPU • 推論にCPUもGPUも使う • 状況に応じてCPUとGPUを使い分けている 3 7 MLComputeUnits.cpuAndGPUɿhttps://developer.apple.com/documentation/coreml/mlcomputeunits/cpuandgpu 3 .CoreML

  38. MLComuteUnits:all • CPU‧GPUに加えて,ANE(apple neural engine)も使⽤して 推論する ANE:A 11 以降に組み込まれている機械学習専⽤のチップ 3

    8 MLComputeUnits.allɿhttps://developer.apple.com/documentation/coreml/mlcomputeunits/all ಛू εϚʔτϑΥϯ্࢙࠷ڧͷ৺ଁ෦ʮA12 Bionicʯνοϓͷ͢͝͞ɿhttps://book.mynavi.jp/macfan/detail_summary/id=98905 ৽iPhoneͷʮA12 Bionicʯ͸Կ͕ੌ͍ͷ͔ɿhttps://japanese.engadget.com/jp-2018-09-13-iphone-a12-bionic.html " " ౥ࡌݸ਺ʢݸʣ   ॲཧೳྗ ʢ014ʣ ໿ԯ ໿ஹ 3 .CoreML A 12 はA 11 の約8倍
  39. MLComuteUnits:all • ANEを開発者が扱えるのは,A 12 以降? A 11 の1個はFaceIDに使⽤しているかもしれないと議論されていた InstrumentsでもA 11

    では確認できず 3 9 Does iPhone 8 is possible to run models on ANE? #667 apple/coremltoolsɿhttps://github.com/apple/coremltools/issues/667 "Ͱ$PSF.-Λ࢖༻ "Ͱ$PSF.-Λ࢖༻ "ͷ݁ՌΛҰ෦֦େ 3 .CoreML
  40. MLModelCon fi guration:その他 4 0 MLModelConfigurationɿhttps://developer.apple.com/documentation/coreml/mlmodelconfiguration 精度より速度を優先するために,可能な限りGPUに任せる 3 .CoreML

  41. ベンチマーク • 使⽤モデル:公式配布のDeepLab v 3 fp 16 • FPSの計測⽅法:FPSCounter •

    計測タイミング:推論を始めてから推論結果が返ってくるまで 4 1 ϕϯνϚʔΫ݁Ռ J1IPOF9 J1IPOF94 $16࢖༻཰ ʢʣ   '14   Semantic segmentation demoɿhttps://github.com/hollance/SemanticSegmentationMetalDemo/blob/master/Shadow/FPSCounter.swift 3 .CoreML
  42. メリット‧デメリット メリット 1ピクセル単位の情報を扱うことができる デメリット 画像のサイズに⽐例して,リアルタイムに⾏う処理が増加する 4 2 3 .CoreML

  43. Vision 4 3 3 .CoreML • inputとoutputが画像であれば,mlmodelを扱える

  44. Vision 4 4 3 .CoreML CoreMLと同じoption

  45. Vision 4 5 3 .CoreML modelとrequestを⽤意

  46. Vision 4 6 3 .CoreML 画像をリサイズして予測

  47. Vision 4 7 3 .CoreML 予測結果を処理

  48. CoreMLと⽐較したメリット‧デメリット メリット Outputを画像として扱える 画像をそのまま使う⽤途ならば,リアルタイムに適している デメリット mlmodelのinputとoutputが画像である必要がある 4 8 3 .CoreML

  49. 今回使⽤するDeepLabV 3 は? Outputが配列で返ってくるため,そのままでは使えない CoreML Toolsを使⽤して変換する 4 9 MLModel Overviewɿhttps://coremltools.readme.io/docs/mlmodel

    3 .CoreML
  50. CoreML Tools • Python製のライブラリ - Tensor fl ow製やKeras製のモデルをmlmodelへ変換できる - mlmodelのinputとoutputを変換できる

    - mlmodelの半精度化もできる • 今回の動作環境 Python 3 . 8 5 0 3 .CoreML MLModel Overviewɿhttps://coremltools.readme.io/docs/mlmodel
  51. CoreML Tools: Outputを変換する 5 1 グレースケールを選択 横と縦を指定 3 .CoreML

  52. CoreML Tools: 変換後 Outputを画像に変換できた Visionで使⽤することが可能になった 5 2 3 .CoreML

  53. CoreML Tools: Q&A Q. Visionで扱いたいし,とりあえず変換してもOK? A. No.⼤本のモデルのネットワーク構造に依存. 
 サイズやカラーコードを適当に変更すると,精度の低下等に繋がる 


    Q. 画像系のmlmodelならVisionで扱うのがベスト? A. NO. 予測結果をどう扱いたいかによる. 
 画像にすると,ピクセル単位の情報が失われてしまう 5 3 3 .CoreML
  54. 4. ハイパフォーマンスに描 画するためには

  55. CIImage • UIImageやCGImageよりもハイパフォーマンス CIImageはGPUも使って描画する • 次に⽰す例は,⼈と背景画像を合成する関数です 5 5 3 .CoreML

  56. 5 6 6**NBHFΛ࢖ͬͨ߹੒ྫ 縦横をあわせる 描画する 3 .CoreML

  57. $**NBHFΛ࢖ͬͨ߹੒ྫ 5 7 縦横をあわせる 合成する 3 .CoreML

  58. CIImage:ベンチマーク • 使⽤モデル:公式配布のDeepLab v 3 fp 16 • FPSの計測⽅法:FPSCounter •

    計測タイミング:推論を始めてから推論結果が返ってくるまで 5 8 ϕϯνϚʔΫ݁Ռ J1IPOF9 J1IPOF94 '14 6**NBHF   '14 $**NBHF   Semantic segmentation demoɿhttps://github.com/hollance/SemanticSegmentationMetalDemo/blob/master/Shadow/FPSCounter.swift 3 .CoreML
  59. Metal • CIColorKernelのカーネルとして使⽤ Outputの画像から⾼速に⼆値画像を作成する 5 9 3 .CoreML

  60. マスク画像 • ブラーをかけてマスク画像をぼかす 境界線がなめらかになるので,⾒栄えの向上が⾒込めます 6 0 ΦϦδφϧͷϚεΫը૾ ΅͔ͨ͠ϚεΫը૾ 3 .CoreML

  61. デモ動画 6 1 3 .CoreML

  62. 5 . CoreMLを⽤いた場合の メリット‧デメリット

  63. メリット 動作そのものに制限はない デメリット 実装コストが⾼い 旧端末ほどガクッとパフォーマンスが落ちるので,思った以上に恩恵が少 ない メリット‧デメリット 6 3 3

    .CoreML
  64. 本番導⼊に向けて

  65. 開発中のtips • 複数端末で検証する A 11 , A 12 など世代によって,パフォーマンスが⼤きく異なる •

    動作端末を決めておく A 10 (iPhone 7 など)は正直厳しいです • If Debugでくくるなど,本番に含まれないようにする リジェクト要因になります 6 5 4.本番導⼊に向けて
  66. 申請時のtips • 申請の備考欄に,どこで何のために使うのか + 使う画⾯までの 導線を明記する レビュアーにとって親切 不⽤意なリジェクトを減らせるかもしれない 6 6

    4.本番導⼊に向けて
  67. 申請時のtips • プライバシーポリシーに追記する ⽬的,取得する情報,取得した情報の扱い⽅を明記する 6 7 4.本番導⼊に向けて tapple ϓϥΠόγʔϙϦγʔɿhttps://static.tapple.me/policy/privacy.html

  68. まとめ

  69. まとめ 6 9 ߲໨ ಺༰ എܠ όʔνϟϧഎܠͷधཁ͕͕͋ͬͨ λοϓϧͰ͸೥݄ʹϦϦʔε "3,JU 1FPQMF0DDMVTJPOΛ࢖࣮ͬͯݱ

    ಈ࡞୺຤͸"Ҏ্ $PSF.- ϦΞϧλΠϜηάϝϯςʔγϣϯͱϚεΫॲཧʹΑ࣮ͬͯݱ ಈ࡞ਪ঑୺຤͸"Ҏ্ ։ൃਃ੥࣌ͷUJQT ։ൃத͸ຊ൪ίʔυʹ"3ཁૉΛࠞͥͳ͍ ϓϥΠόγʔϙϦγʔͳͲͷ௥ՃΛ๨Εͳ͍