Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
REALITYアバターの個性を引き出す!MediaPipeによる高品質フェイストラッキング実装術
Search
gree_tech
PRO
October 12, 2023
Technology
2
2.3k
REALITYアバターの個性を引き出す!MediaPipeによる高品質フェイストラッキング実装術
GREE Tech Conference 2023で発表された資料です。
https://techcon.gree.jp/2023/session/TrackC-6
gree_tech
PRO
October 12, 2023
Tweet
Share
More Decks by gree_tech
See All by gree_tech
REALITY株式会社における開発生産性向上の取り組み: 失敗と成功から学んだこと
gree_tech
PRO
2
130
『ヘブンバーンズレッド』におけるフィールドギミックの裏側
gree_tech
PRO
2
91
セキュリティインシデント対応の体制・運用の試行錯誤 / greetechcon2024-session-a1
gree_tech
PRO
1
97
『アナザーエデン 時空を超える猫』国内海外同時運営実現への道のり ~別々で開発されたアプリを安定して同時リリースするまでの取り組み~
gree_tech
PRO
1
79
『アサルトリリィ Last Bullet』におけるクラウドストリーミング技術を用いたブラウザゲーム化の紹介
gree_tech
PRO
1
90
UnityによるPCアプリの新しい選択肢。「PC版 Google Play Games」への対応について
gree_tech
PRO
1
110
実機ビルドのエラーによる検証ブロッカーを0に!『ヘブンバーンズレッド』のスモークテスト自動化の取り組み
gree_tech
PRO
1
110
"ゲームQA業界の技術向上を目指す! 会社を超えた研究会の取り組み"
gree_tech
PRO
1
140
Jamstack でリニューアルするグリーグループのメディア
gree_tech
PRO
2
300
Other Decks in Technology
See All in Technology
複雑なState管理からの脱却
sansantech
PRO
1
140
OCI Vault 概要
oracle4engineer
PRO
0
9.7k
【若手エンジニア応援LT会】ソフトウェアを学んできた私がインフラエンジニアを目指した理由
kazushi_ohata
0
150
Lambdaと地方とコミュニティ
miu_crescent
2
370
組織成長を加速させるオンボーディングの取り組み
sudoakiy
2
120
Introduction to Works of ML Engineer in LY Corporation
lycorp_recruit_jp
0
120
Amazon CloudWatch Network Monitor のススメ
yuki_ink
1
210
マルチモーダル / AI Agent / LLMOps 3つの技術トレンドで理解するLLMの今後の展望
hirosatogamo
37
12k
適材適所の技術選定 〜GraphQL・REST API・tRPC〜 / Optimal Technology Selection
kakehashi
1
400
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
470
Terraform CI/CD パイプラインにおける AWS CodeCommit の代替手段
hiyanger
1
240
CysharpのOSS群から見るModern C#の現在地
neuecc
2
3.3k
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Site-Speed That Sticks
csswizardry
0
25
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
4 Signs Your Business is Dying
shpigford
180
21k
KATA
mclloyd
29
14k
Designing the Hi-DPI Web
ddemaree
280
34k
Transcript
REALITYアバターの個性を引き出す! MediaPipeによる高品質 フェイストラッキング実装術 REALITY株式会社 ソフトウェアエンジニア 池谷 駿弥
自己紹介 池谷 駿弥 / IKEP ソフトウェアエンジニア • 所属 ◦ REALITY株式会社
Platform & Avatar事業本部 • 経歴 ◦ 2022/04、グリー株式会社に新卒入社 & REALITYへ配属 ◦ 2022/04〜2022/09、サーバエンジニア ◦ 2022/10月〜、Unityエンジニア • 主な担当領域 ◦ Unityを用いたアバター機能の開発 ◦ アバターアセット運用 ▪ アバターアイテム制作効率化 ▪ エンジニアリングサポート 2
• アプリ「REALITY」のご紹介 • REALITYのフェイストラッキング機能の概要 • MediaPipeの紹介と導入検討 • MediaPipeを使ったフェイストラッキングシステムの開発 ◦ MediaPipeの推論基盤の構築
◦ アバター表情への変換 • MediaPipeの応用とハンドトラッキング機能の開発 • まとめ アジェンダ 3
アプリ「REALITY」 4
アプリ「REALITY」 スマホひとつでアバター作成、ライブ配信などによる交流が楽しめる、スマホ向けメタバース 5 アバター ライブ配信 コミュニケーション ルーム ワールド
2022年1月時点 月間ユーザー数 ユーザー分布 2020 Q3 2021 Q3 Q4 Q1 Q2
Q4 2022 Q1 日 本 1 5 % 日本 海外 日本 北米 アジア 太平洋 欧州 他 2022 2020 配信地域 63の国と地域 8割 海外比率 アプリ「REALITY」
2022年10月、1000万DL突破!
アプリ「REALITY」 スマホひとつでアバター作成、ライブ配信による交流やゲームなどが楽しめる、スマホ向けメタバース 8 これら全てのシーンで利用されている機能が ... アバター ライブ配信 コミュニケーション ルーム ワールド
フェイストラッキング機能 9
• スマホのフロントカメラ映像から顔の表情や姿勢を認識し、 アバターの表情や姿勢に反映 ◦ トラッキング後の情報のみをサーバに送信おり、カメラ映像の 保存/送信は行われていません • 以下の情報からアバターの表情や姿勢を表現 ◦ 顔の位置
◦ 顔の向き ◦ BlendShapeに適用する表情パラメータ ▪ 目や口の開閉や向きの具合を表す値 REALITYのフェイストラッキング機能 10
REALITYのフェイストラッキング処理 1. 機種に応じた最適なフェイストラッキングシステムが動作 2. 顔の位置・向き、表情パラメータから、表情 /姿勢を計算/適用 ◦ GREE Tech Conference
2020で発表された資料があるので、よけ ればご覧ください ▪ バーチャルライブ配信アプリ REALITYの3Dアバターシステムの 全容について 11 フェイストラッキング システム 顔の位置 顔の向き 表情パラメータ アバターに適用 計算 入力 カメラ画像 機種に応じて最適な手法を使い分け 共通処理でREALITY固有の アバターの動かし方を行う
複数のフェイストラッキングシステム • 複数のフェイストラッキング手法から機種に応じて最適な手法を採用 • 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月現在まで
新フェイストラッキングシステムに向けて 13
ライブラリとしてMediaPipeを採用 • MediaPipe ◦ Googleがオープンソースで開発 ◦ 機械学習を使い映像から様々な情報を推論可能 ◦ 顔の特徴点を推論可能な MediaPipe
Face Meshが存在 • 採用理由 ◦ 推論精度が、Facemojiと同等以上であり十分に利用可能 ◦ iOS, Androidの両OSに対応している ◦ コンピュータビジョン分野でも知名度が高く、オープンソースの動きも活発であるため、 継続性や保守性が高い ◦ MediaPipe(*)は機械学習のための低レベルライブラリであるため、カスタマイズ性が高い ◦ MediaPipe Face Mesh以外にもPoseやHandも存在し、REALITYでの今後の利用の幅も 期待できる 14 *現在は、MeidaPipe SolutionsとMediaPipe Frameworkが存在。当時はMediaPipe Frameworkのみだった。
REALITYへの導入方法の検討 • REALITYのアバターシステムはUnityで開発されているため、MediaPipeの 推論結果をUnityで取得する必要がある。 • MediaPipeのサポートにUnity(C#)が存在しない 15 iOS/Androidレイヤーへのネイティブプラグインを実装する必要性
• C#からネイティブプラグインの形でMediaPipeの各APIを呼び出すことができる サードパーティライブラリMediaPipe Unity Pluginを利用 • ネイティブプラグインの繋ぎこみを意識することなく、基本的にUnityエンジニアの みで開発が可能になる 「MediaPipe Unity
Plugin」の利用 16 MediaPipe本来のパフォーマンス(負荷、速度、精度)を引き出しつつ、 アバター表現の開発に集中できるため、MediaPipe Unity Pluginを採用
MediaPipeを使った フェイストラッキングシステムの開発 17
MediaPipeを使った フェイストラッキングシス テムの開発 • MediaPipeの推論基盤の構築 • 表情パラメータへの変換 18
MediaPipeのビルドと組み込み • MediaPipeはBazelによるビルドが可能。 MediaPipeUnityPluginでは、Pythonのビルドスクリプトが公開。 • MediaPipeUnityPluginのビルドスクリプトを基本に、Bazelでの ビルドオプションを必要に応じて追加し、REALITY向けに最適化 19
ビルドと組み込みで陥った事例と工夫(1) 20 Unity as a Library (UaaL) ならではの問題 • REALITYのUnity部分はUaaL構成により、iOS/Androidの1ライブラリとして開発されている
• Unity部分にビルドしたMediaPipeライブラリを組み込んでビルド => ライブラリロードエラー => ビルドしたMediaPipeライブラリもiOS/Androidのライブラリとして組み込む ことで解決 Unityライブラリ MediaPipe ライブラリ … … MediaPipe ライブラリ … … Unityライブラリ
ビルドと組み込みで陥った事例と工夫(2) MediaPipe FaceMesh以外のソリューションも含めてビルドすると、アプリサイズが肥大化 • MediaPipe FaceMeshのみをターゲットとしてビルド • Bazelのビルドオプションを調査 /必要に応じて適用/最適化 を行うことで、ライブラリサイズを大幅に圧縮
21
推論処理の実装 • 推論グラフの定義 • 推論グラフを読み込んで初期化 • カメラ映像を入力し、推論結果を取得 22
• MediaPipeは各処理(Calculator)を繋げて推論グラフ(Graph)を定義すること で、画像処理パイプラインを構築できる、低レベルライブラリ • MediaPipe visualizerにより、グラフを確認しながら定義が可能 推論グラフとは 23
推論グラフの実装と工夫 MediaPipe FaceMeshの既存実装をベースに一部カス タマイズすることで、 画像処理をUnityレイヤーの実装 から排除 • スマホ端末のカメラ回転角度で取得した カメラ画像を逆回転し、 端末ごとのカメラ回転角度
の差異を吸収 • アバターを鏡のように動かすため、画像の左右反 転を行い、右目を左目のように認識させる =>「推論結果の左目をアバターの左目に適用」の ように直感的な実装が可能に • UnityとMediaPipe画像でy軸が逆向きのため、 画像の上下反転処理を追加 24 カメラ画像 Unity 推論情報の取得 Unity MediaPipe
負荷検証 • 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 ◦ ◦
• 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%
MediaPipeを使った フェイストラッキングシス テムの開発 • MediaPipeの推論基盤の構築 • 表情パラメータへの変換 27
アバター表情への変換 • MediaPipe FaceMeshでは、468点の3次元的な顔の特徴点を取得可能 • ARKit FaceTrackingなどとは異なり、BlendShape適用のための値を直接取得できない ◦ 口の開き具合、目の閉じ具合など 28
顔の特徴点から計算する必要性 フェイストラッキング システム 顔の位置 顔の向き 表情パラメータ カメラ画像 MediaPipe 変換処理
目の上下幅で計算で目を瞬きさせる アバター表情への変換の例 29 • スマホと顔が 近い / 遠い • 目が
ぱっちり / そうでない • メガネを かけている / かけていない • etc… 個人差はどうする?
スマホと顔が 近い / 遠い 個人差をどう吸収する? 30 「目の開き具合 = 目の上下幅 /
目の左右幅」のように、 基準を設けてあげれば比率は一定であるため差分を吸収できる! 顔が近い => 基準幅も大きくなる 顔が遠い => 基準幅も小さくなる
• ユーザごとに目の全開 /全閉の閾値を設ける • 「閾値幅に対する目の開き具合」により個人差を吸収 ◦ 制御工学で言うところのヒステリシス制御や、オートゲインコ ントロールなどの概念を利用 目が ぱっちり
/ そうでない 個人差をどう吸収する? 31 全閉 全開 時間 ユーザの 目の開き具合 全閉 全開 時間 ユーザの 目の開き具合 ユーザごとに 閾値幅を設ける 目ぱっちり 目細い
事例: メガネをしているとアバターが半目になる ... 個人差をどう吸収する? 32 過去の目の開き具合を元に閾値を動的に変化させるこ とで、目開き/目閉じをくっきりと!! 全開 時間 ユーザの
目の開き具合 半目 時間経過で 修正され全開 半目だとあまり可愛くないよね ... ずっと目を 開いていると...
アバター表情への変換 33 • MediaPipeの顔特徴展推論がいかに精度高くとも、アバターの特性を 考慮して試行錯誤する必要がある ◦ 眉や口、顔全体の位置 /向きなどについても様々な工夫をこらすことで、アバター表情の パラメータを算出 •
開発中に社内のさまざまな人に試してもらいながら、感性評価をしつつ パラメータチューニング 社内感性評価のコメント例
ということで... 34
実際に完成したのがこちら! REALITYで最も精度が高いとされる iOS ARKitとの比較 35 MediaPipe ARKit
さらなる挑戦 36
REALITYにハンドトラッキングを! エイプリルフールに3日間限定でハンドトラッキング機能を公開 37
MediaPipe Holisticを利用 • Face, Pose, Handの推論を同時に可能なHolisticを利用 • フェイストラッキングシステムの開発と同様に、 ◦ MediaPipe
Holisticを加えて、ライブラリをビルド ◦ REALITYにMediaPipeライブラリを組み込み ◦ 推論処理の実装 38
推論グラフの工夫 MediaPipe Holisticの既存実装をみてみる 39 Poseの推論結果 Handの推論結果 Faceの推論結果 HolisticLandmarkCpu
推論グラフの工夫 REALITYのフェイストラッキングのグラフと比較すると... 40 Pose, Hand以外に、 FaceRectの出力が足りていない REALITYのフェイストラッキング品質低下のおそれ ... HolisticLandmarkCpu
推論グラフの工夫 直前のCalculatorに着目し、内部詳細を追うと... 41 HolisticLandmarkCpu
推論グラフの工夫 直前のCalculatorに着目し、内部詳細を追うと... 42 FaceLandmarksFromPoseCpu FaceLandmarkFrontCpu 同じCalculatorを使っている Landmarks => FaceRectに変換している
推論グラフの工夫 変換のCalculatorを使えばいいことがわかったので... 43 FaceLandmarksFromPoseCpu FaceLandmarkFrontCpu
推論グラフの工夫 REALITYで定義するグラフに変換 Calculatorを追加し、 Pose, Handの推論結果を取得しつつ REALITYフェイストラッキングの品質を保証可能に! 44
• 指はFKベースで実装 • 指の関節1つ1つに対して回転角度の制限を設け、見た目が破綻しないように • カメラから見えなくなったら、補正を強める / 弱める ◦ EX:
「パー」<=>「グー」移行で補正を強める / 弱める アバター適用時の指の制御 45
その他にもいろいろ... • 腕を滑らかにどうやって動かすか? • 配信時の通信量増大をどのようにして抑えるか? • etc… 46 フェイストラッキングの開発は、約3ヶ月の工数。 一方、ハンドトラッキングはMediaPipe推論基盤を構築済みのため
約3週間で開発!
一方、見えてきた課題も... • 顔に比べ、腕/体は画角内に映りにくいが、ユーザにはそれがわからない • 機種によっては重たい • ARKitのような他手法との組み合わせをどうするか • etc… 47
ユーザアンケートの結果
• REALITYでは、一部フェイストラッキング手法を新しい手法に置き換え • 新フェイストラッキングシステムにMediaPipeを導入 • REALITYアバターの特性を考慮しつつ、試行錯誤を繰り返すことにより、表情豊か なアバター表現を実現 • MediaPipeを活用してハンドトラッキング機能の開発も行い、多くのユーザに楽し んでいただけたが、様々な課題も
まとめ 48
49