バーチャルライブ配信アプリREALITYの3Dアバターシステムの全容について

GREE Tech Conference 2020 で発表された資料です。
https://techcon.gree.jp/2020/session/Session-12

Transcript

1. バーチャルライブ配信アプリ REALITYの3Dアバターシステムの 全容について 株式会社Wright Flyer Live Entertainment ようてん（山内 洋典）
2. 自己紹介 2 • ようてん • WFLE こと Wright Flyer Live Entertainment 3年生 ソフト ウェアエンジニア • REALITYをつくっています • 主にUnityで3Dの組み立てまわ りを担当 REALITY インストールはこちら
3. はじめに 3 REALITYは、3Dアバターをパーツ毎にカスタマイズし、フェイス トラッキングを適用し、音声・チャット・3Dバーチャルアイテム のギフティングを用いて視聴者とコミュニケーションをとること がスマホ1台でできる、バーチャルライブ配信アプリです。 そのREALITYにおける、3Dアバターシステムの全容について、 「Unityにおける着せ替えの基本の仕組み」「OS別フェイスト ラッキングライブラリとアバターへの適用」「アップデートの歴 史と対応してきた課題」の3テーマについて発表します。 REALITY インストールはこちら
4. REALITYは、3Dアバターをパーツ毎にカスタマイズし、フェイス トラッキングを適用し、音声・チャット・3Dバーチャルアイテム のギフティングを用いて視聴者とコミュニケーションをとること がスマホ1台でできる、バーチャルライブ配信アプリです。 そのREALITYにおける、3Dアバターシステムの全容について、 「Unityにおける着せ替えの基本の仕組み」「OS別フェイスト ラッキングライブラリとアバターへの適用」「アップデートの歴 史と対応してきた課題」の3テーマについて発表します。 はじめに 4 さすがに詰め込みすぎ だったので 「エッセンス抜粋版」 でお届けします REALITY インストールはこちら
5. おしながき 5 • REALITYと3Dアバターシステムについて • Unityでの着せ替え • フェイストラッキングとアバターへの適用 • アップデートの歴史と事例ピックアップ REALITY インストールはこちら
6. REALITY 6 REALITY インストールはこちら
7. REALITY 7 アバター編集 ライブ配信 バーチャルギフト ・コラボ マルチプレイ ゲーム ライブ視聴 REALITY インストールはこちら
8. バーチャルライブ配信アプリREALITY 8 • iOS/Androidネイティブのスマホ アプリ • 2018.08リリース • 「公式配信」と呼ばれるREALITY StudioによるVTuber番組の視聴 専用アプリ • アバター配信アプリREALITY Avatarが2018.10にリリース • Unity 2018.2.20f1製 • 2019.03にREALITYに合体 REALITY インストールはこちら
9. 9 REALITY インストールはこちら インストールはお済みですか→ セッションを 聞いていただけるのも 嬉しいのですが 使ってみるほうが 正直わかりやすいので！
10. 10 では気を取り直して 本編へ
11. 3Dアバターシステム 11 F体型 M体型 身長 最小 身長 最大
12. 3Dアバターシステム 12
13. 3Dアバターシステム 13 • F/M 2種類の体型と肌色10種・身長・バストサイズ（Fのみ）のベース選択 • 髪・目・カラコン・眉・口・ヒゲ・耳・チーク・ほくろ・トップス・ボトムス ・セット服（全身着ぐるみ等）・シューズ・帽子・イヤアクセサリ・眼鏡・ボ ディアクサセリ（しっぽ・羽等）・フェイスシール・壁・床のカテゴリ別パー ツ変更に対応 • 髪・眉・目のベース・シャドウ・ハイライトカラーのHSVパレット編集 • タッチ操作によるカメラのズーム・移動・胴捻り/アバター回転 • フェイストラッキングのアバターへの適用による、顔の位置・向き・瞬きや口 の開きなどの表情のリアルタイムトラッキングと、最大4人までのコラボ配信 でのモーション送受信に対応 • ジェスチャエモート：特定モーションの再生 • VRMエクスポートとcluster連携のサポート
14. おしながき 14 • REALITYと3Dアバターシステムについて • Unityでの着せ替え • フェイストラッキングとアバターへの適用 • アップデートの歴史と事例ピックアップ
15. Unityにおける着せ替え 15 • Unityにおける着せ替えの基本 は、「共通のボーン構造（ベー スケルトン）を用意し、Mesh を差し替える」です 共通のボーン構造 （体型F）
16. Unityにおける着せ替え 16 REALITYにおいては、ベーススケルトンもアバターを構成する各パーツ も、fbxを元にしたprefabの形をとっており、以下の手順でアバターを組み 立てています。 1. ベーススケルトンをロード 2. アバターを構成するパーツMeshをロード 3. パーツMeshが参照するボーン構造の参照をベーススケルトンのものに つけかえ • fbxとして書き出した際のbones配列には順番の保証がないため、ボーン名 (string) で走査してつけかえる必要があることを頭の片隅に覚えておいてください
17. Unityにおける着せ替え 17 • 差し替えパーツに髪やス カートなどの揺れものが あり、ベーススケルトン とボーン構造に差分があ る場合には、差分のみを 追加します 左耳のアクセサリロケータ（ACC_LeftEar）に、揺れものと して追加のボーン構造をもったピアス（AE0004_...）が追加 されている様子
18. 事例【1】ベーススケルトン更新とfbxの全刷新 18 • 共通ボーン構造が変わると、全fbxのエクスポートをやり直す必要があ ります。 • （Artチームが）泣きながらやります、過去3度ぐらいありました • ボトムス実装時 • 待機モーション以外のアニメーションを使おうと思ったところ右半 身のボーンの向きが大幅におかしいことが判明 • 靴のバリエーションを考えようとしたところ、かかとまわりのボー ン位置がおかしいことが判明 毎回「もうこれで最後だろ」って言ってます
19. 事例【1】ベーススケルトン更新とfbxの全刷新 19 • 理論上はボーンが増えたり減ったり、親子関係が変わっていなければ bindposesに差分を適用すればいけるはずなのですが、 Maya→fbx→prefabの冪等性が保証されなくなり、「触るなキケン」に なりそうだったため、みんなで涙を飲んで全刷新しています。
20. 色塗り・色替え 20 • 色替えは、初期はScriptでテ クスチャを差し替えることで 実現していました • 後から、シェーダを増やして マスク画像と色を指定する方 法に変わりました • 新方式にする必要のないアイ テムは旧方式のままにするな ど、共存しています マスクテクスチャと シェーダで結合した実際の様子
21. 事例【2】テクスチャサイズ懸念によるシェーダ方針変更 tga 1024x1024 RGB ASTC 6x6 x 10枚 = 約4.5MB/1アイテム 10色分 の塗り 色情報 csv tga 1024x1024 RGB ASTC 6x6 x 2-3枚 = 約1.0-1.5MB/1アイテム • 最初の設計『全部のアイテムは原則カラバリを10色揃えます、テクス チャ差し替えでやります』 • tga 1024x1024 RGB ASTC 6x6 10色/1アイテムで約4.5MB • さすがにまずそう • 途中からマスク＋色情報設定シェーダに変更
22. 事例【2】テクスチャサイズ懸念によるシェーダ方針変更 • 目的別に最小限のファイルサイズを狙うやり方で分岐していった結果、 REALITYでは約20種類程度のシェーダを使っています • Mesh・Material結合の観点ではもちろん嬉しくないのですが、「多分動 くと思うからリリースしようぜ」マインドみで走っています 増えました
23. おしながき 23 • REALITYと3Dアバターシステムについて • Unityでの着せ替え • フェイストラッキングとアバターへの適用 • アップデートの歴史と対応してきた課題
24. フェイストラッキングとアバターへの適用 24 • REALITYでは、フロントカメラや専用ハードウェアを用いて、フェイス トラッキングをしています • 現時点では顔のみをトラッキングしています • 手や全身のトラッキングはスマホのスペックアップも見込んだ上 でそのうち順次チャレン… • トラッキングした結果のみをサーバに送信しているため、カメラの 画像はどこにも保存されたり、飛んでいったりはしません
25. フェイストラッキングとアバターへの適用 25 • 以下の情報がとれます • 顔の位置 • 顔の向き • 目や口の開閉・向きの値 または 顔のランドマーク（目や口など）の 位置・サイズ • 前者は「JawOpen 0.0（口が閉じている）〜1.0（口がめいっぱい開いてい る）」のように直接アバターのBlendShapeに適用すればよい値がとれます • 後者は「唇の中心が座標(X,Y)にあって、上端から下端までがNピクセル」のよ うな値がとれ、、ロジックによって開閉の具合を決める必要があります
26. フェイストラッキングライブラリ 26 プラットフォー ム ライブラリ名 特徴 iOS iPhone X系 ARKit Face Tracking • ものすごく精度が高く、負荷も低め • TrueDepthカメラを用いており、iPhone X系でしか使えない ◦ iOS14のARKit 4に期待 iOS iPhone X系 以外 Vision Framework Face Landmark • それなりに精度が高い • 元画像が大きいと、処理負荷が高い • 現状、hyprfaceに移行済み hyprface • かなり精度が高い • ARKitと同等に瞳の位置などが取得できる Android firebase ML Kit Face Detection • それなりに精度が高い • 元画像が大きいと、処理負荷が高い • ARKitと同等の瞳の位置は取得できない ◦ MediaPipe Irisに期待 hyprface • iOSと同等 • 機種による安定性差が大きかったため、現状「新トラッキング 方式」として選択式でのアプリへの実装となっている
27. それぞれのライブラリ詳細については割愛 27 • 以前LTをした際の資料があるのでよければ検索してみてください • 【資料公開】5分で語る開発秘話－アプリエンジニア限定LT大会を覗 いてみた。 | イベントレポート • LT「フェイストラッキングとアバターと鏡」 • 上記のLTから追加された「hyprface」はhyprsense社のフェイストラッ キングライブラリです。 • 雑に3行でまとめると以下の通り • 巨人の肩に乗る • 負荷が高かったら解像度を落とす • ガクガクしたらローパスをかける
28. アバターへの適用：基本ポリシー 28 • 鏡 • アバターの自己所属感 • 右目をつむったら、アバターの右 側の目（左目）がつむる • 右に首を傾げたら、アバターは左 肩側に首を傾げる Head Neck Spine1 Hip Spine UpLeg Leg Foot ToeBase ForeArm Shoulder Arm Hand Base
29. アバターへの適用：顔の向き（回転） 29 • 頭から腰に、Head, Neck, Spine1, Spine ボーンの順番で角度制限をかけて按分 • 例えば60度の傾きを適用する際には、 Headに30度、余りのうち25度をNeck に、最後に余った5度がSpine1に適用さ れる H ead Neck Spine1 Hip Spine UpLeg Leg Foot ToeBase ForeArm Shoulder Arm Hand Base トラッキングで 顔が60度回って ると Headに30度適 用して 余りの30度のう ち25度Neckに 適用して 最後に余りの5 度をSpine1に適 用
30. アバターへの適用：顔の向き（回転） 30 • Yaw方向のみ、首を回すと胴体も回す • HeadとNeckで回転量の90%を、 Spine1で45%、Spineで30%を適用 • 足し算すると90+45+30=165%に なるが、実際の顔の回転より大袈裟 に回るように意図的にこうしている Yaw方向のみ胴 も一緒に回る
31. アバターへの適用：顔の位置（平行移動） 31 • 「前後は滑る」 • 顔の向きを固定した状態で首や腰を いい感じに曲げるアルゴリズムが他 と衝突しそうなので割り切り • 「左右は腰を曲げる」 • Spine1, Spineの角度を曲げる
32. アバターへの適用：顔の位置（平行移動） 32 • 「上下はしゃがむ」 • 基準角度を算出、UpLeg, Leg, Foot, ToeBaseにそれぞれ比率をかけて適 用 • 最終的に足が上がった分だけBaseの y座標を下げて接地させている • 妙な中腰になりやすく、アゴが上が るのとあわせて作り直したい UpLegに1.0 UpLegに0.6 UpLegに-2.0 ToeBaseに0.4
33. IK的解決を優先せず、雰囲気FK • ゲームのように接地やハンドル等への位置関係が重要でない • VRのようにリアル身体とバーチャル空間上の座標の一致をさせる必要がない • 処理が軽い • と考えてこの方針で始めたが、その後1フレームの間にやってることがどんどん増えて いったため、今となっては誤差の気配
34. アバターへの適用：カメラ目線の維持 34 • カメラを3D的に操作しても、カメラ目 線を維持するように • 1本指左右ドラッグ • アバターを回せるが、ある程度まで 胴から上を逆方向に回す「胴ひね り」 • ある程度以上回すと胴捻りを諦めて 背中を向くように • 1本指上下ドラッグ • カメラが弧を描くようにアバターを 向いたまま上下するが、逆方向に顔 の向きを回す「煽り」「俯瞰」 • コラボ時に逆におかしな動きになった り、スマホが正面に正体していない際の 融通が効かないなど、課題はある 煽り 俯瞰 胴ひねり
35. おしながき 35 • REALITYと3Dアバターシステムについて • Unityでの着せ替え • フェイストラッキングとアバターへの適用 • アップデートの歴史と事例ピックアップ
36. REALITYの3Dアバターシステム（再掲） 36 • F/M 2種類の体型と肌色10種・身長・バストサイズ（Fのみ）のベース選択 • 髪・目・カラコン・眉・口・ヒゲ・耳・チーク・ほくろ・トップス・ボトムス ・セット服（全身着ぐるみ等）・シューズ・帽子・イヤアクセサリ・眼鏡・ボ ディアクサセリ（しっぽ・羽等）・フェイスシール・壁・床のカテゴリ別パー ツ変更に対応 • 髪・眉・目のベース・シャドウ・ハイライトカラーのHSVパレット編集 • タッチ操作によるカメラのズーム・移動・胴捻り/アバター回転 • フェイストラッキングのアバターへの適用による、顔の位置・向き・瞬きや口 の開きなどの表情のリアルタイムトラッキングと、最大4人までのコラボ配信 でのモーション送受信に対応 • ジェスチャエモート：特定モーションの再生 • VRMエクスポートとcluster連携のサポート
37. リリース当時のREALITYの3Dアバターシステム 37 • F/M 2種類の体型と肌色10種・身長・バストサイズ（Fのみ）のベース選択 • 髪・目・カラコン・眉・口・ヒゲ・耳・チーク・ほくろ・トップス・ボトムス ・セット服（全身着ぐるみ等）・シューズ・帽子・イヤアクセサリ・眼鏡・ボ ディアクサセリ（しっぽ・羽等）・フェイスシール・壁・床のカテゴリ別パー ツ変更に対応 • 髪・眉・目のベース・シャドウ・ハイライトカラーのHSVパレット編集 • タッチ操作によるカメラのズーム・移動・胴捻り/アバター回転 • フェイストラッキングのアバターへの適用による、顔の位置・向き・瞬きや口 の開きなどの表情のリアルタイムトラッキングと、最大4人までのコラボ配信 でのモーション送受信に対応 • ジェスチャエモート：特定モーションの再生 • VRMエクスポートとcluster連携のサポート
38. REALITYの3Dアバターシステム 38 • F/M 2種類の体型と肌色10種・身長・バストサイズ（Fのみ）のベース選択 • 髪・目・カラコン・眉・口・ヒゲ・耳・チーク・ほくろ・トップス・ボトムス ・セット服（全身着ぐるみ等）・シューズ・帽子・イヤアクセサリ・眼鏡・ボ ディアクサセリ（しっぽ・羽等）・フェイスシール・壁・床のカテゴリ別パー ツ変更に対応 • 髪・眉・目のベース・シャドウ・ハイライトカラーのHSVパレット編集 • タッチ操作によるカメラのズーム・移動・胴捻り/アバター回転 • フェイストラッキングのアバターへの適用による、顔の位置・向き・瞬きや口 の開きなどの表情のリアルタイムトラッキングと、最大4人までのコラボ配信 でのモーション送受信に対応 • ジェスチャエモート：特定モーションの再生 • VRMエクスポートとcluster連携のサポート 現在進行形で パワーアップ中の ナマモノです
39. 2018 2019 2020 REALITYアバター関連年表 39 2018.08 REALITY リリース 2018.10 REALITY Avatar リリース 2018.12 REALITY Avatar Android版リリース 2019.01 ほくろ チーク フェイスシール 2019.02 M体型 2019.03 髪・眉・目の色 自由化 バストサイズ 2019.05 ボトムス シューズ 2019.09 セット服 ボディアクセサリ 2019.11 耳 2020.02 口・ヒゲ 床 2020.03 身長 2020.05 カラコン ジェスチャエ モート 2020.06 cluster連携
40. 事例ピックアップ 40 • 毎日のようになんらかの課題が発生しています • いくつかピックアップしてお届けします • 説明がしやすそうな話から • 事例【1】と事例【2】は紹介済みですので、【3】から
41. 事例【3】ボトムスリリース前に全身を登場させたい 41 • 「ボトムス」は、クローゼットのカテゴリの一つで、ズボンとかスカートとか そのあたりのアイテムが所属しています • REALITY FES 2開催：2019.04.08 - 2019.04.14 • ボトムスリリース：2019.05.21 • 開発当時はボトムスは開発中で、カメラは上半身のみフレームインするように 限定されていました • 最初に聞いた時はとんちを期待されてるのかと思いました
42. 事例【3】ボトムスリリース前に全身を登場させたい 42 3Dモデルのパーツをつくる アプリにボトムス機能を追加 アプリにデータを組み込んで動作確認 公式番組向けVRMエクスポートに対応 3Dモデルのパーツをつくる 公式番組向けVRMエクスポートに対応 • 公式番組、REALITY Studio向けにREALITYアバターを提供する中間フォー マットはVRMに決定していましたが、開発途中の3Dモデルのパーツを組み立 ててエクスポートする部分だけ先につくりました • 「トップスで着ている服によって自動的にボトムスを決める」マッピングテー ブルを用意しました。 • 現在でも、このマッピングテーブルは、新規登録用のプリセットアバター の自動生成に使われています。 大胆に工程を変更 アプリにボトムス機能を追加 アプリにデータを組み込んで動作確認 あとまわし
43. 事例【4】フリル付き水着を作ったらバストに埋まった 43 • REALITYではバストサイズは胸の ボーンのscaleで実現しています • 2019夏、サマーバカンスガチャでフ リル水着をつくったら、サイズを大 きくした際にフリルがバストに埋ま ることがわかりました • scaleについては逆数をかけて、 サイズが大きい際にはフリルが バストの上に乗るように角度を 追加するという、分岐を急いで 足しました scaleをいじった子孫で 揺れもの追加ボーンは危険
44. 事例【5】しっぽが見えないので回せるようにしてほしい 44 • 2019秋、ルームにゃんこガチャとし て、全身着ぐるみと耳と尻尾とス リッパをセットでつくりました • 作り終わってみたところ、しっぽが 見えないことがわかりました • しっぽを曲げたりしてみても 先っぽしか見えない • 当時は上下ドラッグの「カメラ の俯瞰/煽り切り替え」しかあり ませんでした せっかくしっぽを作ったのに 正面からはまったく見えない
45. 事例【5】しっぽが見えないので回せるようにしてほしい 45 • いそいでアバター回転＋胴ひねりを 実装 • アバターを回した分、逆方向に 顔を回すことによりカメラ目線 を維持 • ふりふり踊れるようになりました 機能としては好評 必要は発明の母
46. 事例【6】cluster連携でアバターの背中を初めて見ました 46 • 2020夏、clusterにREALITYアバ ターで遊びにいける「cluster連携」 でを実装 • 「自分のアバターの背中を初めてみ ました」 • なるほど！
47. 事例【6】cluster連携でアバターの背中を初めて見ました 47 • 先ほど紹介した通り、しっぽのために回せるようににしましたが、それをもう ちょっとだけさらに回せるようにしました
48. 毎日お祭り騒ぎ 48 なりたい自分で、生きていく
50. 会場の雰囲気とか分量とかよくわからないので 50 時間が余ってたらおまけ
51. 課題【1】大文字小文字の区別がつらい 51 • gif：ファイルパスの大文字小文字の区別がある（設定による） • Windows：ファイルシステムでは区別があるが、一部のAPIでは区別がない • DOS互換性のため（だったはず） • Mac：ファイルシステムでは区別がない • Unity：結果、区別がない • AssetBundle：区別がある • 「Unityエディタでは動いたけど実機で動かない」 • 「renameをMacで検知できないため、削除commitと追加commitを別でや る必要がある」
52. 課題【2】gitのブランチツリーが深い 52 • アバターアイテムは概ね「定常(Free)」「ガチャ(Purchase)」「イベント報酬 (Reward)」の3種類で管理されている • 長い子は企画から世に出るまで半年を超えるため、作り始めてからdevelopに 合流するまで、ブランチで浮いてる期間がものすごく長い • fbxを参照だけで共有してMaterial/Textureだけ切り替えたり、アバターのコ ア機能をバージョンアップさせた場合には、それ以降はその新しい仕様に則っ たものでなくてはいけないため、依存があり、ブランチがフラットに並べられ ないことが多い • リリース調整もあり、「AssetBundleとして世に出してもいい状態」になって はじめてdevelopにマージするフローでやっている
53. 課題【2】gitのブランチツリーが深い 53 結果、以下のようになっています • develop ◦ feature/開発中の新機能A ◦ feature/開発中の新機能B ◦ feature/来月でる開発中のギフトA ◦ feature/来月でる開発中のガチャA ▪ feature/来月直す予定のアセット群 • feature/Aの次の開発中のガチャB ◦ feature/Bの次の開発中のガチャC ▪ feature/C次の開発中のガチャD • 開発環境で開発途中のものが全部入った全部入り AssetBundleビルド用ブランチ
54. 課題【2】gitのブランチツリーが深い 54 もう少しフラットにしたい • develop ◦ feature/開発中の新機能A ◦ feature/開発中の新機能B ◦ feature/来月でる開発中のギフトA ◦ feature/来月でる開発中のガチャA ▪ feature/来月直す予定のアセット群 • feature/Aの次の開発中のガチャB ◦ feature/Bの次の開発中のガチャC ▪ feature/C次の開発中のガチャD • 開発環境で開発途中のものが全部入った全部入り AssetBundleビルド用ブランチ こんな感じでマージが必要 です リリース済みのものでバグが あったりして、developで直す と 「開発項目毎に特定のバージョンをスマホ にインストールし直すコスト」＞「なんで も確認できるAssetBundleを整備するコス ト」なのでしょうがなさはあります