REALITYアバターの個性を引き出す！MediaPipeによる高品質フェイストラッキング実装術

by gree_tech

Slide 1

Slide 1 text

REALITYアバターの個性を引き出す！ MediaPipeによる高品質フェイストラッキング実装術 REALITY株式会社ソフトウェアエンジニア池谷駿弥

Slide 2

Slide 2 text

自己紹介池谷駿弥 / IKEP ソフトウェアエンジニア ● 所属 ○ REALITY株式会社 Platform & Avatar事業本部 ● 経歴 ○ 2022/04、グリー株式会社に新卒入社 & REALITYへ配属 ○ 2022/04〜2022/09、サーバエンジニア ○ 2022/10月〜、Unityエンジニア ● 主な担当領域 ○ Unityを用いたアバター機能の開発 ○ アバターアセット運用 ■ アバターアイテム制作効率化 ■ エンジニアリングサポート 2

Slide 3

Slide 3 text

● アプリ「REALITY」のご紹介 ● REALITYのフェイストラッキング機能の概要 ● MediaPipeの紹介と導入検討 ● MediaPipeを使ったフェイストラッキングシステムの開発 ○ MediaPipeの推論基盤の構築 ○ アバター表情への変換 ● MediaPipeの応用とハンドトラッキング機能の開発 ● まとめアジェンダ 3

Slide 4

Slide 4 text

アプリ「REALITY」 4

Slide 5

Slide 5 text

アプリ「REALITY」スマホひとつでアバター作成、ライブ配信などによる交流が楽しめる、スマホ向けメタバース 5 アバターライブ配信コミュニケーションルームワールド

Slide 6

Slide 6 text

2022年1月時点月間ユーザー数ユーザー分布 2020 Q3 2021 Q3 Q4 Q1 Q2 Q4 2022 Q1 日本 1 5 % 日本海外日本北米アジア太平洋欧州他 2022 2020 配信地域 63の国と地域 8割海外比率アプリ「REALITY」

Slide 7

Slide 7 text

2022年10月、1000万DL突破！

Slide 8

Slide 8 text

アプリ「REALITY」スマホひとつでアバター作成、ライブ配信による交流やゲームなどが楽しめる、スマホ向けメタバース 8 これら全てのシーンで利用されている機能が ... アバターライブ配信コミュニケーションルームワールド

Slide 9

Slide 9 text

フェイストラッキング機能 9

Slide 10

Slide 10 text

● スマホのフロントカメラ映像から顔の表情や姿勢を認識し、アバターの表情や姿勢に反映 ○ トラッキング後の情報のみをサーバに送信おり、カメラ映像の保存/送信は行われていません ● 以下の情報からアバターの表情や姿勢を表現 ○ 顔の位置 ○ 顔の向き ○ BlendShapeに適用する表情パラメータ ■ 目や口の開閉や向きの具合を表す値 REALITYのフェイストラッキング機能 10

Slide 11

Slide 11 text

REALITYのフェイストラッキング処理 1. 機種に応じた最適なフェイストラッキングシステムが動作 2. 顔の位置・向き、表情パラメータから、表情 /姿勢を計算/適用 ○ GREE Tech Conference 2020で発表された資料があるので、よければご覧ください ■ バーチャルライブ配信アプリ REALITYの3Dアバターシステムの全容について 11 フェイストラッキングシステム顔の位置顔の向き表情パラメータアバターに適用計算入力カメラ画像機種に応じて最適な手法を使い分け共通処理でREALITY固有のアバターの動かし方を行う

Slide 12

Slide 12 text

複数のフェイストラッキングシステム ● 複数のフェイストラッキング手法から機種に応じて最適な手法を採用 ● Facemojiを利用した手法を別手法に置き換える必要があり、代替手法を新規開発 12 OS フェイストラッキングライブラリ対象ユーザ iOS ARKit Face Tracking ARKit対応機種(iPhone X以降の全機種) Facemoji ARKit非対応機種 Android Facemoji NEXT REALITYの「新フェイストラッキング方式」がオンのユーザ Firebase ML Kit Face Detection ● Facemojiが対応していない一部機種のデフォルト設定 ● NEXT REALITYの「新フェイストラッキング方式」をオフにしたユーザ 2023年1月現在まで

Slide 13

Slide 13 text

新フェイストラッキングシステムに向けて 13

Slide 14

Slide 14 text

ライブラリとしてMediaPipeを採用 ● MediaPipe ○ Googleがオープンソースで開発 ○ 機械学習を使い映像から様々な情報を推論可能 ○ 顔の特徴点を推論可能な MediaPipe Face Meshが存在 ● 採用理由 ○ 推論精度が、Facemojiと同等以上であり十分に利用可能 ○ iOS, Androidの両OSに対応している ○ コンピュータビジョン分野でも知名度が高く、オープンソースの動きも活発であるため、継続性や保守性が高い ○ MediaPipe(*)は機械学習のための低レベルライブラリであるため、カスタマイズ性が高い ○ MediaPipe Face Mesh以外にもPoseやHandも存在し、REALITYでの今後の利用の幅も期待できる 14 *現在は、MeidaPipe SolutionsとMediaPipe Frameworkが存在。当時はMediaPipe Frameworkのみだった。

Slide 15

Slide 15 text

REALITYへの導入方法の検討 ● REALITYのアバターシステムはUnityで開発されているため、MediaPipeの推論結果をUnityで取得する必要がある。 ● MediaPipeのサポートにUnity(C#)が存在しない 15 iOS/Androidレイヤーへのネイティブプラグインを実装する必要性

Slide 16

Slide 16 text

● C#からネイティブプラグインの形でMediaPipeの各APIを呼び出すことができるサードパーティライブラリMediaPipe Unity Pluginを利用 ● ネイティブプラグインの繋ぎこみを意識することなく、基本的にUnityエンジニアのみで開発が可能になる「MediaPipe Unity Plugin」の利用 16 MediaPipe本来のパフォーマンス(負荷、速度、精度)を引き出しつつ、アバター表現の開発に集中できるため、MediaPipe Unity Pluginを採用

Slide 17

Slide 17 text

MediaPipeを使ったフェイストラッキングシステムの開発 17

Slide 18

Slide 18 text

MediaPipeを使ったフェイストラッキングシステムの開発 ● MediaPipeの推論基盤の構築 ● 表情パラメータへの変換 18

Slide 19

Slide 19 text

MediaPipeのビルドと組み込み ● MediaPipeはBazelによるビルドが可能。 MediaPipeUnityPluginでは、Pythonのビルドスクリプトが公開。 ● MediaPipeUnityPluginのビルドスクリプトを基本に、Bazelでのビルドオプションを必要に応じて追加し、REALITY向けに最適化 19

Slide 20

Slide 20 text

ビルドと組み込みで陥った事例と工夫(1) 20 Unity as a Library (UaaL) ならではの問題 ● REALITYのUnity部分はUaaL構成により、iOS/Androidの1ライブラリとして開発されている ● Unity部分にビルドしたMediaPipeライブラリを組み込んでビルド => ライブラリロードエラー => ビルドしたMediaPipeライブラリもiOS/Androidのライブラリとして組み込むことで解決 Unityライブラリ MediaPipe ライブラリ … … MediaPipe ライブラリ … … Unityライブラリ

Slide 21

Slide 21 text

ビルドと組み込みで陥った事例と工夫(2) MediaPipe FaceMesh以外のソリューションも含めてビルドすると、アプリサイズが肥大化 ● MediaPipe FaceMeshのみをターゲットとしてビルド ● Bazelのビルドオプションを調査 /必要に応じて適用/最適化を行うことで、ライブラリサイズを大幅に圧縮 21

Slide 22

Slide 22 text

推論処理の実装 ● 推論グラフの定義 ● 推論グラフを読み込んで初期化 ● カメラ映像を入力し、推論結果を取得 22

Slide 23

Slide 23 text

● MediaPipeは各処理(Calculator)を繋げて推論グラフ(Graph)を定義することで、画像処理パイプラインを構築できる、低レベルライブラリ ● MediaPipe visualizerにより、グラフを確認しながら定義が可能推論グラフとは 23

Slide 24

Slide 24 text

推論グラフの実装と工夫 MediaPipe FaceMeshの既存実装をベースに一部カスタマイズすることで、画像処理をUnityレイヤーの実装から排除 ● スマホ端末のカメラ回転角度で取得したカメラ画像を逆回転し、端末ごとのカメラ回転角度の差異を吸収 ● アバターを鏡のように動かすため、画像の左右反転を行い、右目を左目のように認識させる =>「推論結果の左目をアバターの左目に適用」のように直感的な実装が可能に ● UnityとMediaPipe画像でy軸が逆向きのため、画像の上下反転処理を追加 24 カメラ画像 Unity 推論情報の取得 Unity MediaPipe

Slide 25

Slide 25 text

負荷検証 ● MediaPipeの推論が可能で、簡易的にアバターを動かせる状態で端末負荷の検証を実施 ● iOS, Androidそれぞれの低スペック、通常スペック、ハイスペックと、複数台の機種で検証 ● iOS, AndroidのCPU/GPU負荷を調査 ○ iOSでは、MediaPipe製とFacemoji製を比較 ○ Androidでは、MediaPipe製、Facemoji製、Firebase ML Kit Face Detection製を比較 ● REALITYにおいて負荷がかかるであろう状態ごとに負荷計測 (下表) 25 Unity動作アバター表示フェイストラッキング動作アバター以外の 3D表示 ①ホーム画面 × × × × ②1人配信視聴 ○ 1 × × ③アバターホーム ○ 1 ○ × ④1人配信 ○ 1 ○ × ⑤4人コラボ配信 ○ 4 ○ × ⑥4人コラボ配信 + ギフト表示 ○ 4 ○ ○

Slide 26

Slide 26 text

● CPU負荷は、約10~20%、既存フェイストラッキングよりも優れている ● GPU負荷は、既存フェイストラッキングよりもやや劣る ● 今までREALITYではGPUよりCPUの計算に時間を要しており、 MediaPipeの実装ではGPU計算リソースを活用してCPU負荷をできるだけ増加させないようにしたため、意図通り。負荷検証 26 iPhone 6s Google Pixel 4 facemoji MediaPipe ML Kit facemoji MediaPipe GPU使用率 38% 38% 22% 21% 28%

Slide 27

Slide 27 text

MediaPipeを使ったフェイストラッキングシステムの開発 ● MediaPipeの推論基盤の構築 ● 表情パラメータへの変換 27

Slide 28

Slide 28 text

アバター表情への変換 ● MediaPipe FaceMeshでは、468点の3次元的な顔の特徴点を取得可能 ● ARKit FaceTrackingなどとは異なり、BlendShape適用のための値を直接取得できない ○ 口の開き具合、目の閉じ具合など 28 顔の特徴点から計算する必要性フェイストラッキングシステム顔の位置顔の向き表情パラメータカメラ画像 MediaPipe 変換処理

Slide 29

Slide 29 text

目の上下幅で計算で目を瞬きさせるアバター表情への変換の例 29 ● スマホと顔が近い / 遠い ● 目がぱっちり / そうでない ● メガネをかけている / かけていない ● etc… 個人差はどうする？

Slide 30

Slide 30 text

スマホと顔が近い / 遠い個人差をどう吸収する？ 30 「目の開き具合 = 目の上下幅 / 目の左右幅」のように、基準を設けてあげれば比率は一定であるため差分を吸収できる！顔が近い => 基準幅も大きくなる顔が遠い => 基準幅も小さくなる

Slide 31

Slide 31 text

● ユーザごとに目の全開 /全閉の閾値を設ける ● 「閾値幅に対する目の開き具合」により個人差を吸収 ○ 制御工学で言うところのヒステリシス制御や、オートゲインコントロールなどの概念を利用目がぱっちり / そうでない個人差をどう吸収する？ 31 全閉全開時間ユーザの目の開き具合全閉全開時間ユーザの目の開き具合ユーザごとに閾値幅を設ける目ぱっちり目細い

Slide 32

Slide 32 text

事例: メガネをしているとアバターが半目になる ... 個人差をどう吸収する？ 32 過去の目の開き具合を元に閾値を動的に変化させることで、目開き/目閉じをくっきりと！！全開時間ユーザの目の開き具合半目時間経過で修正され全開半目だとあまり可愛くないよね ... ずっと目を開いていると...

Slide 33

Slide 33 text

アバター表情への変換 33 ● MediaPipeの顔特徴展推論がいかに精度高くとも、アバターの特性を考慮して試行錯誤する必要がある ○ 眉や口、顔全体の位置 /向きなどについても様々な工夫をこらすことで、アバター表情のパラメータを算出 ● 開発中に社内のさまざまな人に試してもらいながら、感性評価をしつつパラメータチューニング社内感性評価のコメント例

Slide 34

Slide 34 text

ということで... 34

Slide 35

Slide 35 text

実際に完成したのがこちら！ REALITYで最も精度が高いとされる iOS ARKitとの比較 35 MediaPipe ARKit

Slide 36

Slide 36 text

さらなる挑戦 36

Slide 37

Slide 37 text

REALITYにハンドトラッキングを！エイプリルフールに3日間限定でハンドトラッキング機能を公開 37

Slide 38

Slide 38 text

MediaPipe Holisticを利用 ● Face, Pose, Handの推論を同時に可能なHolisticを利用 ● フェイストラッキングシステムの開発と同様に、 ○ MediaPipe Holisticを加えて、ライブラリをビルド ○ REALITYにMediaPipeライブラリを組み込み ○ 推論処理の実装 38

Slide 39

Slide 39 text

推論グラフの工夫 MediaPipe Holisticの既存実装をみてみる 39 Poseの推論結果 Handの推論結果 Faceの推論結果 HolisticLandmarkCpu

Slide 40

Slide 40 text

推論グラフの工夫 REALITYのフェイストラッキングのグラフと比較すると... 40 Pose, Hand以外に、 FaceRectの出力が足りていない REALITYのフェイストラッキング品質低下のおそれ ... HolisticLandmarkCpu

Slide 41

Slide 41 text

推論グラフの工夫直前のCalculatorに着目し、内部詳細を追うと... 41 HolisticLandmarkCpu

Slide 42

Slide 42 text

推論グラフの工夫直前のCalculatorに着目し、内部詳細を追うと... 42 FaceLandmarksFromPoseCpu FaceLandmarkFrontCpu 同じCalculatorを使っている Landmarks => FaceRectに変換している

Slide 43

Slide 43 text

推論グラフの工夫変換のCalculatorを使えばいいことがわかったので... 43 FaceLandmarksFromPoseCpu FaceLandmarkFrontCpu

Slide 44

Slide 44 text

推論グラフの工夫 REALITYで定義するグラフに変換 Calculatorを追加し、 Pose, Handの推論結果を取得しつつ REALITYフェイストラッキングの品質を保証可能に！ 44

Slide 45

Slide 45 text

● 指はFKベースで実装 ● 指の関節1つ1つに対して回転角度の制限を設け、見た目が破綻しないように ● カメラから見えなくなったら、補正を強める / 弱める ○ EX: 「パー」<=>「グー」移行で補正を強める / 弱めるアバター適用時の指の制御 45

Slide 46

Slide 46 text

その他にもいろいろ... ● 腕を滑らかにどうやって動かすか？ ● 配信時の通信量増大をどのようにして抑えるか？ ● etc… 46 フェイストラッキングの開発は、約3ヶ月の工数。一方、ハンドトラッキングはMediaPipe推論基盤を構築済みのため約3週間で開発！

Slide 47

Slide 47 text

一方、見えてきた課題も... ● 顔に比べ、腕/体は画角内に映りにくいが、ユーザにはそれがわからない ● 機種によっては重たい ● ARKitのような他手法との組み合わせをどうするか ● etc… 47 ユーザアンケートの結果

Slide 48

Slide 48 text

● REALITYでは、一部フェイストラッキング手法を新しい手法に置き換え ● 新フェイストラッキングシステムにMediaPipeを導入 ● REALITYアバターの特性を考慮しつつ、試行錯誤を繰り返すことにより、表情豊かなアバター表現を実現 ● MediaPipeを活用してハンドトラッキング機能の開発も行い、多くのユーザに楽しんでいただけたが、様々な課題もまとめ 48