”なりたい自分”をアップデート！「REALITY Avatar 2.0」の開発秘話

by gree_tech

Slide 1

Slide 1 text

“なりたい自分”をアップデート！「REALITY Avatar 2.0」の開発秘話 REALITY株式会社ソフトウェアエンジニア三宅広大 / 池谷駿弥

Slide 2

Slide 2 text

三宅広大 / yaegaki REALITY株式会社ソフトウェアエンジニア/ アバターシステムチームテックリード 2 ● 経歴 ○ 2020/11 REALITY株式会社入社 ○ 2020/11〜、Unityエンジニア ● 主な担当領域 ○ Unityを用いたアバター機能の開発 ■ アバターコア開発 ■ ワールド機能 ■ ルーム機能 ■ スペース機能

Slide 3

Slide 3 text

池谷駿弥 / IKEP ● 経歴 ○ 2022/04、グリー株式会社に新卒入社 & REALITYへ配属 ○ 2022/04〜2022/09、サーバエンジニア ○ 2022/10〜、Unityエンジニア ● 主な担当領域 ○ Unityを用いたアバター機能の開発 ○ TA(Technical Artist)業務 ■ アバターアセット運用 ■ アセット制作効率化 REALITY株式会社　ソフトウェアエンジニア 3

Slide 4

Slide 4 text

目次・アジェンダ ● アプリ「REALITY」について ● 「REALITY Avatar 2.0」プロジェクトについて ● 体型変更機能 ● 顔変更機能 ● まとめ 4

Slide 5

Slide 5 text

アプリ「REALITY」 5

Slide 6

Slide 6 text

スマホひとつでアバター作成、ライブ配信による交流やゲームなどが楽しめる、スマホ向けメタバースアプリ「REALITY」 6

Slide 7

Slide 7 text

「REALITY Avatar 2.0」とは？ 7

Slide 8

Slide 8 text

「REALITY Avatar 2.0」とは？ ● ユーザーがより「なりたい自分」を表現できるようにするのプロジェクト ● 具体的には ○ 体型や顔などのカスタマイズ可能な項目を増加させる ○ 目、眉、髭、チークなどへの新アイテムの追加 8

Slide 9

Slide 9 text

「REALITY Avatar 2.0」の目指すところ ● アバターのカスタマイズのバリエーションを用意する ○ ユーザーがより「なりたい自分」を表現できるようにする ● “誰でも”高品質なアバターが作成できるようにする ○ アバター作成が複雑になりすぎないようにする ● REALITYらしいアバタールックを維持する ○ 人間離れしたような極端な見た目にはならないようにする 9

Slide 10

Slide 10 text

「REALITY Avatar 2.0」の課題 ● すでにリリースされている大量のアバターアイテムの互換性を維持する ○ ユーザーが変更しなければ見た目が変わらないようにする ○ 全てのアイテムを新しいシステムに対応させる ● アプリの全ての機能で使用できる必要がある ○ REALITYには多種多様な機能が存在するので全ての機能で正常に動作させる必要がある 10

Slide 11

Slide 11 text

体型変更 11

Slide 12

Slide 12 text

体型のカスタマイズ幅の向上 ● 従来のアバターでカスタマイズ可能な項目 ○ 身長 ○ バストサイズ 12

Slide 13

Slide 13 text

体型のカスタマイズ幅の向上 ● Avatar 2.0でカスタマイズ可能な項目 ○ 身長(調整範囲の増加) ○ バストサイズ ○ 肩幅 ○ ウエスト ○ 手足の長さ 13

Slide 14

Slide 14 text

身長(調整範囲の増加) ● 従来より小さく/大きくできるように 14 新最小旧最小標準旧最大新最大

Slide 15

Slide 15 text

肩幅 ● 肩まわりを変更するパラメータ 15 最小最大標準

Slide 16

Slide 16 text

ウエスト ● ウエストなど変更するパラメータ 16 最小最大標準

Slide 17

Slide 17 text

手足の長さ ● 身長を変えずに手足の長さを変更するパラメータ 17 最小最大標準

Slide 18

Slide 18 text

体型変更の実装 ● 実装を始めるに当たって以下の方法が検討されました ○ ボーンスケール方式 ○ ブレンドシェイプ方式 18

Slide 19

Slide 19 text

ボーンスケール方式 ● 文字通りモデルのボーンにスケールを加える方式 ● Unityでは親のスケールが子にも反映されるという課題があった(後述) 19

Slide 20

Slide 20 text

ブレンドシェイプ方式 ● 設定されたパラメータに応じてブレンドシェイプの値を変更する ● ボーンスケール方式に比べて表現の幅が広い ● アセット制作が大変 20

Slide 21

Slide 21 text

体型変更の実装 ● 最終的にはボーンスケール方式を採用 ● 採用理由は以下の通り ○ ブレンドシェイプ方式だとアセットの対応工数がかなりかかる ○ ボーンスケール方式でも良いものになったため 21

Slide 22

Slide 22 text

体型変更の実装 ● 最終的にはボーンスケール方式を採用 ● 採用理由は以下の通り ○ ブレンドシェイプ方式だとアセットの対応工数がかなりかかる ○ ボーンスケール方式でも良いものになったため 22 すでに大量のアイテムがリリースされているのでそれらの対応にかなり工数が必要だった自動でブレンドシェイプを作成する機能について検証したが完全に自動で対応するというのもできなかったので最終的には採用しなかった

Slide 23

Slide 23 text

ボーンスケール方式の課題 ● 文字通りモデルのボーンにスケールを加える方式 ● 従来の身長変更もこの方式 ● Unityでは親のスケールが子にも反映されるという課題があった(後述) 23

Slide 24

Slide 24 text

ボーンスケール方式の課題 24

Slide 25

Slide 25 text

ボーンスケール方式の課題 25 親のYを2倍にする

Slide 26

Slide 26 text

ボーンスケール方式の課題 26 子も変形される

Slide 27

Slide 27 text

ボーンスケール方式の課題 27 子を回転させるとY軸のみ2倍されているので菱形になってしまう

Slide 28

Slide 28 text

ボーンスケール方式の課題 ● アバターに当てはめるとウエストを変更するためにSpineのスケールを変更すると全てのボーンに影響してしまう 28

Slide 29

Slide 29 text

ボーンスケール方式の課題解決策 ● 親と子の間に親のスケールを打ち消すオブジェクトを挿入 ● これによって親のスケールが子に影響しないようになった 29

Slide 30

Slide 30 text

体型変更とアニメーション 30

Slide 31

Slide 31 text

体型変更とアニメーション ● 体型変更によって既存のアニメーション関連処理の変更が必要 ○ ポーズ機能 ○ アバターエモート機能 ○ 家具およびワールドの乗り物機能 31

Slide 32

Slide 32 text

ポーズ機能 ● アバターにポーズを撮らせて画像を撮影する機能 ● チャットで使えるアバターのスタンプなどで使用されている 32

Slide 33

Slide 33 text

ポーズ機能問題点 ● ポーズのアセットにローカル座標での位置が保存されていたのでそのまま適用すると壊れてしまった 33

Slide 34

Slide 34 text

ポーズ機能解決策 ● Unityのマッスル値を保存するように変更マッスル値を使用することでヒューマノイドのアバターならどんなアバターにもポーズが適用可能に 34

Slide 35

Slide 35 text

アバターエモート機能 ● ユーザーが任意のタイミングでアニメーションを実行できる機能 ● 上半身だけ、全身、それらの組み合わせなどが可能上半身のみ全身組み合わせ 35

Slide 36

Slide 36 text

アバターエモート機能問題点手を合わせる系のアニメーションで手が合わなくなった 36

Slide 37

Slide 37 text

アバターエモート機能解決策 ● UnityのアニメーションのIK機能を活用インポート時の設定でIKを有効にしておくと IK用の位置、回転の情報が含まれるようになる 37

Slide 38

Slide 38 text

家具およびワールドの乗り物機能 ● 3D空間上に設置された椅子などに座る機能 ● 椅子に限定されずに様々なものが存在する 38

Slide 39

Slide 39 text

家具およびワールドの乗り物機能問題点 ● 椅子に体がめり込んでしまう ● 手の位置とオブジェクトの位置が合っていない 39

Slide 40

Slide 40 text

家具およびワールドの乗り物機能解決策 ● 乗り物側に腰や両手の最終的な位置を設定できるようにする ○ 最終的な位置をIKのゴール位置とすることで姿勢を制御 ● 最終的な位置にどのタイミングで到達するかをアニメーションカーブで指定可能にする ○ 座るアニメーションと違和感がないように調整するため 40

Slide 41

Slide 41 text

顔変更 41

Slide 42

Slide 42 text

より多様な顔を表現するために、コンセプトアートから各要素に分解し、技術検証 / 開発 / アセット制作顔のアバターカスタマイズ拡張 42

Slide 43

Slide 43 text

● 眉 ● 目 ● 口顔の既存アバターアイテムの仕様変更 43

Slide 44

Slide 44 text

● 彫りの深さ ● 輪郭 ● アイメイク ● 鼻 ● メッシュひげ ● しみ・あざ ● しわ ● 髪(刈り上げ・スキンヘッド) ● 顔プリセット顔の新規アバターアイテム機能 44

Slide 45

Slide 45 text

顔の基本構成の変更 45 ● 鼻先から上は、目のアイテムごとに固有アセット ● 鼻先から下は、1Meshで表現目のアイテムそれぞれに修正対応が必要なため、カスタマイズ要素の追加難易度が高い... × 約70アイテム × 1Mesh

Slide 46

Slide 46 text

顔の基本構成の変更 46 × 1Mesh × 1Mesh × Nアイテム ● 目の周りだけ目アイテムごとの固有アセットに ● 額、鼻、顔側面部分などは共通Meshとし「FaceBase」に FaceBase操作だけで形状を変化させることができるため、顔表現のカスタマイズ幅が増加 (= 輪郭や鼻などのアイテム実現) FaceBase Neck Eyes

Slide 47

Slide 47 text

FaceBaseには、表情用のBlendShape以外にも、形状変更のためのBlendShapeも顔の基本構成の変更 47

Slide 48

Slide 48 text

● Meshを含むPrefabをロード、配置 ● 表情用のBlendShapeによって上下移動眉(既存仕様) 48

Slide 49

Slide 49 text

上下位置の微調整機能 ● 特定のジョイントへのウェイトを持つように全ての眉アセットを更新 ● ユーザの操作に合わせて、ジョイント位置を上下に移動 →「彫りの深さ」の影に追従眉(追加仕様) 49

Slide 50

Slide 50 text

目(仕様変更) 50 顔の基本構成の変更に伴い、目周辺のみのメッシュに変更 × 約70アイテム

Slide 51

Slide 51 text

目(仕様変更) 51 微調整機能(大きさ/位置) ● 特定のジョイントへのウェイトを持つように全ての目アセットを更新 ● ユーザの操作に合わせて、ジョイント位置を移動 → 顔つきの表現が可能に

Slide 52

Slide 52 text

目(仕様変更) 52 微調整機能(ハイライト / 目の開き) ● ハイライトに関するマテリアルプロパティを操作し、ON/OFFを切り替え ● フェイストラッキングから適用するBlink_L/Blink_Rの最小値を大きく ○ 0~100 => N~100 の範囲で動かす → ジト目などの表現が可能に

Slide 53

Slide 53 text

● 顔の基本構成の変更に伴い、FaceBaseに統合 ● アイテムごとの口形状の違いについては今まで同様、BlendShapeで形状変更口(仕様変更) 53

Slide 54

Slide 54 text

肌追加陰影テクスチャにより、「唇の厚さ」などを表現口(仕様変更) 54 肌追加陰影テクスチャなし肌追加陰影テクスチャあり

Slide 55

Slide 55 text

肌追加陰影テクスチャ 55 ● 肌の陰影を追加で描画可能な機能を新規開発 ● 肌の色を適用する前に追加の陰影テクスチャを合成する FaceBase ベーステクスチャ各アイテムからの追加陰影を合成肌の色を合成デカール類を描画レンダリング過程

Slide 56

Slide 56 text

肌追加陰影テクスチャ 56 肌の色を適用する前に陰影を合成しているので、肌の色によって見え方にばらつきが発生しない！デカールで陰影を描画すると、肌の色によっては見えにくい...

Slide 57

Slide 57 text

● 眉/目を前後に移動 ○ 眉で使っているジョイントを手前へ ○ 目で使っているジョイントを奥へ ● 肌追加陰影テクスチャにより、影を表現彫りの深さ(新規) 57

Slide 58

Slide 58 text

FaceBaseのBlendShape値をアイテムごとの設定値にすることで形状変更輪郭(新規) 58

Slide 59

Slide 59 text

BlendShape値の更新をリアルタイムに行うことで、ユーザ自身による微調整も可能輪郭(新規) 59

Slide 60

Slide 60 text

肌追加陰影テクスチャにより、「頬がこけた顔」や「ケツ顎」を表現輪郭(新規) 60

Slide 61

Slide 61 text

● チークだけでなく、目上や目下へのメイクアイテム枠として開発 ● 既存のデカールシステムを利用して描画アイメイク(新規) 61

Slide 62

Slide 62 text

FaceBaseのBlendShape値をアイテムごとの設定値にすることで形状変更鼻(新規) 62

Slide 63

Slide 63 text

BlendShape値の更新をリアルタイムに行うことで、ユーザ自身による微調整も可能鼻(新規) 63

Slide 64

Slide 64 text

肌追加陰影テクスチャにより、「鼻の高さ」などを表現鼻(新規) 64 肌追加陰影テクスチャなし肌追加陰影テクスチャあり

Slide 65

Slide 65 text

● 今までのデカール髭と違い、メッシュを持つ3Dな髭 ● メッシュをロードし、髪色と同じ色にメッシュ髭(新規) 65

Slide 66

Slide 66 text

● 既存の「ほくろ・そばかす」カテゴリに追加 ● 既存のデカールシステムを利用して描画しみ・あざ(新規) 66

Slide 67

Slide 67 text

肌追加陰影テクスチャにより表現しわ(新規) 67

Slide 68

Slide 68 text

● 頭部の地肌に直接髪の毛を描画することにより、刈り上げや坊主・剃り込みなどの表現が可能 ● 顔(FaceBase)と後頭部(RearHead)の任意の場所に適用可能髪(刈り上げ・スキンヘッド) 68

Slide 69

Slide 69 text

髪アイテムのマテリアル髪アイテムとしては、顔(FaceBase)と後頭部(RearHead)のどこに適用するかをテクスチャ指定するだけ → ランタイムで顔と後頭部のマテリアルに渡してレンダリングメッシュベースの刈り上げは隙間やズレが発生する... 髪(刈り上げ・スキンヘッド) 69 R → 髪色ベース G → 髪色シャドウ B → 髪色ハイライト

Slide 70

Slide 70 text

● 輪郭 / 目 / 眉 / 彫りの深さ / 鼻 / 口、および、それぞれの微調整項目が予め設定されている ● 自由度が向上したアバターカスタマイズにおいて、「顔つき」を簡単に表現できるようにサポート顔プリセット(新規) 70

Slide 71

Slide 71 text

顔形状を変更できるようになったことで、他アイテムで突き抜けが発生その他(突き抜け対策) 71 鼻の高さ変更により、眼鏡のブリッジを突き抜け... 輪郭や鼻の高さ変更により、マスクを突き抜け... 輪郭変更により、メッシュ髭が埋まる...

Slide 72

Slide 72 text

顔に密着するアイテムは、FaceBaseのBlendShape変動に連動してアイテムの BlendShapeも操作その他(突き抜け対策) 72

Slide 73

Slide 73 text

顔に密着しないアイテムは、アクセサリー位置調整機能によりユーザ操作で回避可能にその他(突き抜け対策) 73

Slide 74

Slide 74 text

● 新規制作 or 既存アイテム修正 ○ アイテム数: 645 ○ 変更ファイル数: 5962(*) ● システム仕様や表現ルールに沿っているかの自動チェックツールを開発 ○ 全アセットの約半分を自動チェックし、100件以上の問題検出その他(効率的なアセットチェック体制) (*)通常ガチャ1本分は、約30アイテム、約500ファイル 74 仕様に沿わず修正が必要な項目が赤色になる

Slide 75

Slide 75 text

まとめ 75

Slide 76

Slide 76 text

コンセプトアートと「REALITY Avatar 2.0」PVを比較 76 より多様な “なりたい自分”を実現！

Slide 77

Slide 77 text

● 技術検証・開発・アセット制作まで含め、約1年で開発 ● REALITYらしいアバタールックを維持しながら、ユーザーがより「なりたい自分」を表現できるように！ ○ Avatar 2.0で開発した機能を活用したコーデの保存割合が 70%以上に ○ 北米地域などにおける DAUが10%以上成長まとめ 77