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

by gree_tech

Slide 1

Slide 1 text

バーチャルライブ配信アプリ REALITYの3Dアバターシステムの全容について株式会社Wright Flyer Live Entertainment ようてん（山内洋典）

Slide 2

Slide 2 text

自己紹介 2 ● ようてん ● WFLE こと Wright Flyer Live Entertainment 3年生ソフトウェアエンジニア ● REALITYをつくっています ● 主にUnityで3Dの組み立てまわりを担当 REALITY インストールはこちら

Slide 3

Slide 3 text

はじめに 3 REALITYは、3Dアバターをパーツ毎にカスタマイズし、フェイストラッキングを適用し、音声・チャット・3Dバーチャルアイテムのギフティングを用いて視聴者とコミュニケーションをとることがスマホ1台でできる、バーチャルライブ配信アプリです。そのREALITYにおける、3Dアバターシステムの全容について、「Unityにおける着せ替えの基本の仕組み」「OS別フェイストラッキングライブラリとアバターへの適用」「アップデートの歴史と対応してきた課題」の3テーマについて発表します。 REALITY インストールはこちら

Slide 4

Slide 4 text

REALITYは、3Dアバターをパーツ毎にカスタマイズし、フェイストラッキングを適用し、音声・チャット・3Dバーチャルアイテムのギフティングを用いて視聴者とコミュニケーションをとることがスマホ1台でできる、バーチャルライブ配信アプリです。そのREALITYにおける、3Dアバターシステムの全容について、「Unityにおける着せ替えの基本の仕組み」「OS別フェイストラッキングライブラリとアバターへの適用」「アップデートの歴史と対応してきた課題」の3テーマについて発表します。はじめに 4 さすがに詰め込みすぎだったので「エッセンス抜粋版」でお届けします REALITY インストールはこちら

Slide 5

Slide 5 text

おしながき 5 ● REALITYと3Dアバターシステムについて ● Unityでの着せ替え ● フェイストラッキングとアバターへの適用 ● アップデートの歴史と事例ピックアップ REALITY インストールはこちら

Slide 6

Slide 6 text

REALITY 6 REALITY インストールはこちら

Slide 7

Slide 7 text

REALITY 7 アバター編集ライブ配信バーチャルギフト・コラボマルチプレイゲームライブ視聴 REALITY インストールはこちら

Slide 8

Slide 8 text

バーチャルライブ配信アプリREALITY 8 ● iOS/Androidネイティブのスマホアプリ ● 2018.08リリース ● 「公式配信」と呼ばれるREALITY StudioによるVTuber番組の視聴専用アプリ ● アバター配信アプリREALITY Avatarが2018.10にリリース ● Unity 2018.2.20f1製 ● 2019.03にREALITYに合体 REALITY インストールはこちら

Slide 9

Slide 9 text

9 REALITY インストールはこちらインストールはお済みですか→ セッションを聞いていただけるのも嬉しいのですが使ってみるほうが正直わかりやすいので！

Slide 10

Slide 10 text

10 では気を取り直して本編へ

Slide 11

Slide 11 text

3Dアバターシステム 11 F体型 M体型身長最小身長最大

Slide 12

Slide 12 text

3Dアバターシステム 12

Slide 13

Slide 13 text

3Dアバターシステム 13 ● F/M 2種類の体型と肌色10種・身長・バストサイズ（Fのみ）のベース選択 ● 髪・目・カラコン・眉・口・ヒゲ・耳・チーク・ほくろ・トップス・ボトムス・セット服（全身着ぐるみ等）・シューズ・帽子・イヤアクセサリ・眼鏡・ボディアクサセリ（しっぽ・羽等）・フェイスシール・壁・床のカテゴリ別パーツ変更に対応 ● 髪・眉・目のベース・シャドウ・ハイライトカラーのHSVパレット編集 ● タッチ操作によるカメラのズーム・移動・胴捻り/アバター回転 ● フェイストラッキングのアバターへの適用による、顔の位置・向き・瞬きや口の開きなどの表情のリアルタイムトラッキングと、最大4人までのコラボ配信でのモーション送受信に対応 ● ジェスチャエモート：特定モーションの再生 ● VRMエクスポートとcluster連携のサポート

Slide 14

Slide 14 text

おしながき 14 ● REALITYと3Dアバターシステムについて ● Unityでの着せ替え ● フェイストラッキングとアバターへの適用 ● アップデートの歴史と事例ピックアップ

Slide 15

Slide 15 text

Unityにおける着せ替え 15 ● Unityにおける着せ替えの基本は、「共通のボーン構造（ベースケルトン）を用意し、Mesh を差し替える」です共通のボーン構造（体型F）

Slide 16

Slide 16 text

Unityにおける着せ替え 16 REALITYにおいては、ベーススケルトンもアバターを構成する各パーツも、fbxを元にしたprefabの形をとっており、以下の手順でアバターを組み立てています。 1. ベーススケルトンをロード 2. アバターを構成するパーツMeshをロード 3. パーツMeshが参照するボーン構造の参照をベーススケルトンのものにつけかえ ● fbxとして書き出した際のbones配列には順番の保証がないため、ボーン名 (string) で走査してつけかえる必要があることを頭の片隅に覚えておいてください

Slide 17

Slide 17 text

Unityにおける着せ替え 17 ● 差し替えパーツに髪やスカートなどの揺れものがあり、ベーススケルトンとボーン構造に差分がある場合には、差分のみを追加します左耳のアクセサリロケータ（ACC_LeftEar）に、揺れものとして追加のボーン構造をもったピアス（AE0004_...）が追加されている様子

Slide 18

Slide 18 text

事例【1】ベーススケルトン更新とfbxの全刷新 18 ● 共通ボーン構造が変わると、全fbxのエクスポートをやり直す必要があります。 ● （Artチームが）泣きながらやります、過去3度ぐらいありました ● ボトムス実装時 ● 待機モーション以外のアニメーションを使おうと思ったところ右半身のボーンの向きが大幅におかしいことが判明 ● 靴のバリエーションを考えようとしたところ、かかとまわりのボーン位置がおかしいことが判明毎回「もうこれで最後だろ」って言ってます

Slide 19

Slide 19 text

事例【1】ベーススケルトン更新とfbxの全刷新 19 ● 理論上はボーンが増えたり減ったり、親子関係が変わっていなければ bindposesに差分を適用すればいけるはずなのですが、 Maya→fbx→prefabの冪等性が保証されなくなり、「触るなキケン」になりそうだったため、みんなで涙を飲んで全刷新しています。

Slide 20

Slide 20 text

色塗り・色替え 20 ● 色替えは、初期はScriptでテクスチャを差し替えることで実現していました ● 後から、シェーダを増やしてマスク画像と色を指定する方法に変わりました ● 新方式にする必要のないアイテムは旧方式のままにするなど、共存していますマスクテクスチャとシェーダで結合した実際の様子

Slide 21

Slide 21 text

事例【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 ● さすがにまずそう ● 途中からマスク＋色情報設定シェーダに変更

Slide 22

Slide 22 text

事例【2】テクスチャサイズ懸念によるシェーダ方針変更 ● 目的別に最小限のファイルサイズを狙うやり方で分岐していった結果、 REALITYでは約20種類程度のシェーダを使っています ● Mesh・Material結合の観点ではもちろん嬉しくないのですが、「多分動くと思うからリリースしようぜ」マインドみで走っています増えました

Slide 23

Slide 23 text

おしながき 23 ● REALITYと3Dアバターシステムについて ● Unityでの着せ替え ● フェイストラッキングとアバターへの適用 ● アップデートの歴史と対応してきた課題

Slide 24

Slide 24 text

フェイストラッキングとアバターへの適用 24 ● REALITYでは、フロントカメラや専用ハードウェアを用いて、フェイストラッキングをしています ● 現時点では顔のみをトラッキングしています ● 手や全身のトラッキングはスマホのスペックアップも見込んだ上でそのうち順次チャレン… ● トラッキングした結果のみをサーバに送信しているため、カメラの画像はどこにも保存されたり、飛んでいったりはしません

Slide 25

Slide 25 text

フェイストラッキングとアバターへの適用 25 ● 以下の情報がとれます ● 顔の位置 ● 顔の向き ● 目や口の開閉・向きの値または顔のランドマーク（目や口など）の位置・サイズ ● 前者は「JawOpen 0.0（口が閉じている）〜1.0（口がめいっぱい開いている）」のように直接アバターのBlendShapeに適用すればよい値がとれます ● 後者は「唇の中心が座標(X,Y)にあって、上端から下端までがNピクセル」のような値がとれ、、ロジックによって開閉の具合を決める必要があります

Slide 26

Slide 26 text

フェイストラッキングライブラリ 26 プラットフォームライブラリ名特徴 iOS iPhone X系 ARKit Face Tracking ● ものすごく精度が高く、負荷も低め ● TrueDepthカメラを用いており、iPhone X系でしか使えない ○ iOS14のARKit 4に期待 iOS iPhone X系以外 Vision Framework Face Landmark ● それなりに精度が高い ● 元画像が大きいと、処理負荷が高い ● 現状、hyprfaceに移行済み hyprface ● かなり精度が高い ● ARKitと同等に瞳の位置などが取得できる Android ﬁrebase ML Kit Face Detection ● それなりに精度が高い ● 元画像が大きいと、処理負荷が高い ● ARKitと同等の瞳の位置は取得できない ○ MediaPipe Irisに期待 hyprface ● iOSと同等 ● 機種による安定性差が大きかったため、現状「新トラッキング方式」として選択式でのアプリへの実装となっている

Slide 27

Slide 27 text

それぞれのライブラリ詳細については割愛 27 ● 以前LTをした際の資料があるのでよければ検索してみてください ● 【資料公開】5分で語る開発秘話－アプリエンジニア限定LT大会を覗いてみた。 | イベントレポート ● LT「フェイストラッキングとアバターと鏡」 ● 上記のLTから追加された「hyprface」はhyprsense社のフェイストラッキングライブラリです。 ● 雑に3行でまとめると以下の通り ● 巨人の肩に乗る ● 負荷が高かったら解像度を落とす ● ガクガクしたらローパスをかける

Slide 28

Slide 28 text

アバターへの適用：基本ポリシー 28 ● 鏡 ● アバターの自己所属感 ● 右目をつむったら、アバターの右側の目（左目）がつむる ● 右に首を傾げたら、アバターは左肩側に首を傾げる Head Neck Spine1 Hip Spine UpLeg Leg Foot ToeBase ForeArm Shoulder Arm Hand Base

Slide 29

Slide 29 text

アバターへの適用：顔の向き（回転） 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に適用

Slide 30

Slide 30 text

アバターへの適用：顔の向き（回転） 30 ● Yaw方向のみ、首を回すと胴体も回す ● HeadとNeckで回転量の90%を、 Spine1で45%、Spineで30%を適用 ● 足し算すると90+45+30=165%になるが、実際の顔の回転より大袈裟に回るように意図的にこうしている Yaw方向のみ胴も一緒に回る

Slide 31

Slide 31 text

アバターへの適用：顔の位置（平行移動） 31 ● 「前後は滑る」 ● 顔の向きを固定した状態で首や腰をいい感じに曲げるアルゴリズムが他と衝突しそうなので割り切り ● 「左右は腰を曲げる」 ● Spine1, Spineの角度を曲げる

Slide 32

Slide 32 text

アバターへの適用：顔の位置（平行移動） 32 ● 「上下はしゃがむ」 ● 基準角度を算出、UpLeg, Leg, Foot, ToeBaseにそれぞれ比率をかけて適用 ● 最終的に足が上がった分だけBaseの y座標を下げて接地させている ● 妙な中腰になりやすく、アゴが上がるのとあわせて作り直したい UpLegに1.0 UpLegに0.6 UpLegに-2.0 ToeBaseに0.4

Slide 33

Slide 33 text

IK的解決を優先せず、雰囲気FK ● ゲームのように接地やハンドル等への位置関係が重要でない ● VRのようにリアル身体とバーチャル空間上の座標の一致をさせる必要がない ● 処理が軽い ● と考えてこの方針で始めたが、その後1フレームの間にやってることがどんどん増えていったため、今となっては誤差の気配

Slide 34

Slide 34 text

アバターへの適用：カメラ目線の維持 34 ● カメラを3D的に操作しても、カメラ目線を維持するように ● 1本指左右ドラッグ ● アバターを回せるが、ある程度まで胴から上を逆方向に回す「胴ひねり」 ● ある程度以上回すと胴捻りを諦めて背中を向くように ● 1本指上下ドラッグ ● カメラが弧を描くようにアバターを向いたまま上下するが、逆方向に顔の向きを回す「煽り」「俯瞰」 ● コラボ時に逆におかしな動きになったり、スマホが正面に正体していない際の融通が効かないなど、課題はある煽り俯瞰胴ひねり

Slide 35

Slide 35 text

おしながき 35 ● REALITYと3Dアバターシステムについて ● Unityでの着せ替え ● フェイストラッキングとアバターへの適用 ● アップデートの歴史と事例ピックアップ

Slide 36

Slide 36 text

REALITYの3Dアバターシステム（再掲） 36 ● F/M 2種類の体型と肌色10種・身長・バストサイズ（Fのみ）のベース選択 ● 髪・目・カラコン・眉・口・ヒゲ・耳・チーク・ほくろ・トップス・ボトムス・セット服（全身着ぐるみ等）・シューズ・帽子・イヤアクセサリ・眼鏡・ボディアクサセリ（しっぽ・羽等）・フェイスシール・壁・床のカテゴリ別パーツ変更に対応 ● 髪・眉・目のベース・シャドウ・ハイライトカラーのHSVパレット編集 ● タッチ操作によるカメラのズーム・移動・胴捻り/アバター回転 ● フェイストラッキングのアバターへの適用による、顔の位置・向き・瞬きや口の開きなどの表情のリアルタイムトラッキングと、最大4人までのコラボ配信でのモーション送受信に対応 ● ジェスチャエモート：特定モーションの再生 ● VRMエクスポートとcluster連携のサポート

Slide 37

Slide 37 text

リリース当時のREALITYの3Dアバターシステム 37 ● F/M 2種類の体型と肌色10種・身長・バストサイズ（Fのみ）のベース選択 ● 髪・目・カラコン・眉・口・ヒゲ・耳・チーク・ほくろ・トップス・ボトムス・セット服（全身着ぐるみ等）・シューズ・帽子・イヤアクセサリ・眼鏡・ボディアクサセリ（しっぽ・羽等）・フェイスシール・壁・床のカテゴリ別パーツ変更に対応 ● 髪・眉・目のベース・シャドウ・ハイライトカラーのHSVパレット編集 ● タッチ操作によるカメラのズーム・移動・胴捻り/アバター回転 ● フェイストラッキングのアバターへの適用による、顔の位置・向き・瞬きや口の開きなどの表情のリアルタイムトラッキングと、最大4人までのコラボ配信でのモーション送受信に対応 ● ジェスチャエモート：特定モーションの再生 ● VRMエクスポートとcluster連携のサポート

Slide 38

Slide 38 text

REALITYの3Dアバターシステム 38 ● F/M 2種類の体型と肌色10種・身長・バストサイズ（Fのみ）のベース選択 ● 髪・目・カラコン・眉・口・ヒゲ・耳・チーク・ほくろ・トップス・ボトムス・セット服（全身着ぐるみ等）・シューズ・帽子・イヤアクセサリ・眼鏡・ボディアクサセリ（しっぽ・羽等）・フェイスシール・壁・床のカテゴリ別パーツ変更に対応 ● 髪・眉・目のベース・シャドウ・ハイライトカラーのHSVパレット編集 ● タッチ操作によるカメラのズーム・移動・胴捻り/アバター回転 ● フェイストラッキングのアバターへの適用による、顔の位置・向き・瞬きや口の開きなどの表情のリアルタイムトラッキングと、最大4人までのコラボ配信でのモーション送受信に対応 ● ジェスチャエモート：特定モーションの再生 ● VRMエクスポートとcluster連携のサポート現在進行形でパワーアップ中のナマモノです

Slide 39

Slide 39 text

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連携

Slide 40

Slide 40 text

事例ピックアップ 40 ● 毎日のようになんらかの課題が発生しています ● いくつかピックアップしてお届けします ● 説明がしやすそうな話から ● 事例【1】と事例【2】は紹介済みですので、【3】から

Slide 41

Slide 41 text

事例【3】ボトムスリリース前に全身を登場させたい 41 ● 「ボトムス」は、クローゼットのカテゴリの一つで、ズボンとかスカートとかそのあたりのアイテムが所属しています ● REALITY FES 2開催：2019.04.08 - 2019.04.14 ● ボトムスリリース：2019.05.21 ● 開発当時はボトムスは開発中で、カメラは上半身のみフレームインするように限定されていました ● 最初に聞いた時はとんちを期待されてるのかと思いました

Slide 42

Slide 42 text

事例【3】ボトムスリリース前に全身を登場させたい 42 3Dモデルのパーツをつくるアプリにボトムス機能を追加アプリにデータを組み込んで動作確認公式番組向けVRMエクスポートに対応 3Dモデルのパーツをつくる公式番組向けVRMエクスポートに対応 ● 公式番組、REALITY Studio向けにREALITYアバターを提供する中間フォーマットはVRMに決定していましたが、開発途中の3Dモデルのパーツを組み立ててエクスポートする部分だけ先につくりました ● 「トップスで着ている服によって自動的にボトムスを決める」マッピングテーブルを用意しました。 ● 現在でも、このマッピングテーブルは、新規登録用のプリセットアバターの自動生成に使われています。大胆に工程を変更アプリにボトムス機能を追加アプリにデータを組み込んで動作確認あとまわし

Slide 43

Slide 43 text

事例【4】フリル付き水着を作ったらバストに埋まった 43 ● REALITYではバストサイズは胸のボーンのscaleで実現しています ● 2019夏、サマーバカンスガチャでフリル水着をつくったら、サイズを大きくした際にフリルがバストに埋まることがわかりました ● scaleについては逆数をかけて、サイズが大きい際にはフリルがバストの上に乗るように角度を追加するという、分岐を急いで足しました scaleをいじった子孫で揺れもの追加ボーンは危険

Slide 44

Slide 44 text

事例【5】しっぽが見えないので回せるようにしてほしい 44 ● 2019秋、ルームにゃんこガチャとして、全身着ぐるみと耳と尻尾とスリッパをセットでつくりました ● 作り終わってみたところ、しっぽが見えないことがわかりました ● しっぽを曲げたりしてみても先っぽしか見えない ● 当時は上下ドラッグの「カメラの俯瞰/煽り切り替え」しかありませんでしたせっかくしっぽを作ったのに正面からはまったく見えない

Slide 45

Slide 45 text

事例【5】しっぽが見えないので回せるようにしてほしい 45 ● いそいでアバター回転＋胴ひねりを実装 ● アバターを回した分、逆方向に顔を回すことによりカメラ目線を維持 ● ふりふり踊れるようになりました機能としては好評必要は発明の母

Slide 46

Slide 46 text

事例【6】cluster連携でアバターの背中を初めて見ました 46 ● 2020夏、clusterにREALITYアバターで遊びにいける「cluster連携」でを実装 ● 「自分のアバターの背中を初めてみました」 ● なるほど！

Slide 47

Slide 47 text

事例【6】cluster連携でアバターの背中を初めて見ました 47 ● 先ほど紹介した通り、しっぽのために回せるようににしましたが、それをもうちょっとだけさらに回せるようにしました

Slide 48

Slide 48 text

毎日お祭り騒ぎ 48 なりたい自分で、生きていく

Slide 49

Slide 49 text

Slide 50

Slide 50 text

会場の雰囲気とか分量とかよくわからないので 50 時間が余ってたらおまけ

Slide 51

Slide 51 text

課題【1】大文字小文字の区別がつらい 51 ● gif：ファイルパスの大文字小文字の区別がある（設定による） ● Windows：ファイルシステムでは区別があるが、一部のAPIでは区別がない ● DOS互換性のため（だったはず） ● Mac：ファイルシステムでは区別がない ● Unity：結果、区別がない ● AssetBundle：区別がある ● 「Unityエディタでは動いたけど実機で動かない」 ● 「renameをMacで検知できないため、削除commitと追加commitを別でやる必要がある」

Slide 52

Slide 52 text

課題【2】gitのブランチツリーが深い 52 ● アバターアイテムは概ね「定常(Free)」「ガチャ(Purchase)」「イベント報酬 (Reward)」の3種類で管理されている ● 長い子は企画から世に出るまで半年を超えるため、作り始めてからdevelopに合流するまで、ブランチで浮いてる期間がものすごく長い ● fbxを参照だけで共有してMaterial/Textureだけ切り替えたり、アバターのコア機能をバージョンアップさせた場合には、それ以降はその新しい仕様に則ったものでなくてはいけないため、依存があり、ブランチがフラットに並べられないことが多い ● リリース調整もあり、「AssetBundleとして世に出してもいい状態」になってはじめてdevelopにマージするフローでやっている

Slide 53

Slide 53 text

課題【2】gitのブランチツリーが深い 53 結果、以下のようになっています ● develop ○ feature/開発中の新機能A ○ feature/開発中の新機能B ○ feature/来月でる開発中のギフトA ○ feature/来月でる開発中のガチャA ■ feature/来月直す予定のアセット群 ● feature/Aの次の開発中のガチャB ○ feature/Bの次の開発中のガチャC ■ feature/C次の開発中のガチャD ● 開発環境で開発途中のものが全部入った全部入り AssetBundleビルド用ブランチ

Slide 54

Slide 54 text

課題【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を整備するコスト」なのでしょうがなさはあります