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

iOSDC2021
https://fortee.jp/iosdc-japan-2021/proposal/b4807175-01a6-4583-9108-2450fe2575a7

Transcript

1. バーチャル背景を実現しよう
   2021
   /
   09
   /
   17
   iOSDC Japan
   2021
   
   Arata Yokoyama /
   GitHub : ARATAYOKOYAMA Twitter : BOBG
   1018
   Vi
   

   View Slide

2. About Me
   • Arata Yokoyama
   
   
   • 2020年サイバーエージェント新卒⼊社
   
   
   • タップルのiOSエンジニア
   
   
   • 北海道出⾝
   
   
   • アイドル‧特撮‧ガンダムを
   

   こよなく愛している
   2
   

   View Slide

3. 1
   .背景
   
   
   2
   .ARKitを使った⽅法
   
   
   3
   .CoreMLを使った⽅法
   
   
   4
   .本番導⼊に向けて
   
   
   5
   .まとめ
   

   View Slide

4. 背景
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. ARKitを使った⽅法
   

   View Slide

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

   View Slide

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
    

    View Slide

11. 実現イメージ
    1
    1
    2
    .ARKit
    背景 ⼈ スマホ
    下 上
    画⾓
    層
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. 画質を最低にする
    • ⾼画質な順に先頭から⼊っているため，最後を選択する
    
    
    Max:
    1440
    *
    1080 60
    FPS Min:
    1280
    *
    720 30
    FPS
    1
    5
    ARKitʹ͓͚ΔΧϝϥͷղ૾౓ͱϑϨʔϜϨʔτɿhttps://qiita.com/shu223/items/86ef45b4b5c0bba0276f
    2
    .ARKit
    

    View Slide

16. デモ動画
    1
    6
    2
    .ARKit
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

22. CoreMLを使った⽅法
    

    View Slide

23. 1. 実現⽅針
    

    View Slide

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.
    

    View Slide

25. セグメンテーション
    • 概要（weblioより）
    
    
    - 区分，分割
    
    
    - 市場細分化
    
    
    • 具体的なイメージ
    
    
    - ある画像のうち，ここは⽝ここは⼈のように，領域を分割して意味合い
    をもたせることができます
    
    
    - ⼤きく分けて⼆種類存在します
    2
    5
    3
    .CoreML
    segmentation：https://ejje.weblio.jp/content/segmentation
    

    View Slide

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

    View Slide

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

    View Slide

28. 2. 使⽤モデル
    

    View Slide

29. 求められる条件
    1
    . 商⽤利⽤可能であること
    
    
    2
    . ⼈間をリアルタイムにインスタンスセグメンテーションできる
    こと
    
    
    3
    . 1と2を満たす中で，fpsが⾼いもの
    
    
    

    *今回は精度よりスピードを優先したため，IOU等は指標に置いておりません
    2
    9
    3
    .CoreML
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

33. 3. 推論⼿段
    

    View Slide

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

    View Slide

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

    （con
    fi
    gを渡さないと警告が出ます）
    
    
    • MLComuteUnitsは3種類存在する
    3
    .CoreML
    

    View Slide

36. MLComuteUnits：cpuOnly
    • 推論をCPUのみで⾏う
    
    
    • 他2つに⽐べて，パフォーマンスが低下する場合が多い
    
    
    • 何らかの理由でGPUを使⽤できない or 使⽤を回避するべきと判
    断したときに選択すると良い
    
    
    • モデルのネットワーク構造によっては，CPUのみの⽅が早いこ
    ともあるかもしれない
    3
    6
    MLComputeUnits.cpuOnlyɿhttps://developer.apple.com/documentation/coreml/mlcomputeunits/cpuonly
    3
    .CoreML
    

    View Slide

37. MLComuteUnits：cpuAndGPU
    • 推論にCPUもGPUも使う
    
    
    • 状況に応じてCPUとGPUを使い分けている
    3
    7
    MLComputeUnits.cpuAndGPUɿhttps://developer.apple.com/documentation/coreml/mlcomputeunits/cpuandgpu
    3
    .CoreML
    

    View Slide

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倍
    

    View Slide

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
    

    View Slide

40. MLModelCon
    fi
    guration:その他
    4
    0
    MLModelConfigurationɿhttps://developer.apple.com/documentation/coreml/mlmodelconfiguration
    精度より速度を優先するために，可能な限りGPUに任せる
    3
    .CoreML
    

    View Slide

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
    

    View Slide

42. メリット‧デメリット
    メリット
    
    
    1ピクセル単位の情報を扱うことができる
    
    
    デメリット
    
    
    画像のサイズに⽐例して，リアルタイムに⾏う処理が増加する
    
    
    4
    2
    3
    .CoreML
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

51. CoreML Tools: Outputを変換する
    5
    1
    グレースケールを選択
    横と縦を指定
    3
    .CoreML
    

    View Slide

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

    View Slide

53. CoreML Tools: Q&A
    Q. Visionで扱いたいし，とりあえず変換してもOK？
    
    
    A. No．⼤本のモデルのネットワーク構造に依存．
    

    サイズやカラーコードを適当に変更すると，精度の低下等に繋がる
    

    Q. 画像系のmlmodelならVisionで扱うのがベスト？
    
    
    A. NO. 予測結果をどう扱いたいかによる．
    

    画像にすると，ピクセル単位の情報が失われてしまう
    5
    3
    3
    .CoreML
    

    View Slide

54. 4. ハイパフォーマンスに描
    画するためには
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

59. Metal
    • CIColorKernelのカーネルとして使⽤
    
    
    Outputの画像から⾼速に⼆値画像を作成する
    5
    9
    3
    .CoreML
    

    View Slide

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

    View Slide

61. デモ動画
    6
    1
    3
    .CoreML
    

    View Slide

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

    View Slide

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

    View Slide

64. 本番導⼊に向けて
    

    View Slide

65. 開発中のtips
    • 複数端末で検証する
    
    
    A
    11
    , A
    12
    など世代によって，パフォーマンスが⼤きく異なる
    
    
    • 動作端末を決めておく
    
    
    A
    10
    (iPhone
    7
    など)は正直厳しいです
    
    
    • If Debugでくくるなど，本番に含まれないようにする
    
    
    リジェクト要因になります
    6
    5
    4.本番導⼊に向けて
    

    View Slide

66. 申請時のtips
    • 申請の備考欄に，どこで何のために使うのか + 使う画⾯までの
    導線を明記する
    
    
    レビュアーにとって親切
    
    
    不⽤意なリジェクトを減らせるかもしれない
    6
    6
    4.本番導⼊に向けて
    

    View Slide

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

    View Slide

68. まとめ
    

    View Slide

69. まとめ
    6
    9
    ߲໨ ಺༰
    എܠ
    όʔνϟϧഎܠͷधཁ͕͕͋ͬͨ
    λοϓϧͰ͸೥݄ʹϦϦʔε
    "3,JU
    1FPQMF0DDMVTJPOΛ࢖࣮ͬͯݱ
    ಈ࡞୺຤͸"Ҏ্
    $PSF.-
    ϦΞϧλΠϜηάϝϯςʔγϣϯͱϚεΫॲཧʹΑ࣮ͬͯݱ
    ಈ࡞ਪ঑୺຤͸"Ҏ্
    ։ൃਃ੥࣌ͷUJQT
    ։ൃத͸ຊ൪ίʔυʹ"3ཁૉΛࠞͥͳ͍
    ϓϥΠόγʔϙϦγʔͳͲͷ௥ՃΛ๨Εͳ͍
    

    View Slide