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

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 .BTL
    3$// .*5
    -JDFOTF IUUQTHJUIVCDPNNBUUFSQPSU

    .BTL@3$// %FFQ-BC7 "QBDIF
    -JDFOTF IUUQTHJUIVCDPNUFOTPS fl PX %FFQ-BC7
    1MVT "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-BC7
    1MVT 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 1FPQMF
    0DDMVTJPOΛ࢖࣮ͬͯݱ
    

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