Mirrativ tech blog

株式会社ミラティブの開発者(サーバサイドエンジニア,iOSエンジニア,Androidエンジニア,機械学習エンジニア,インフラエンジニア, etc...)によるブログです

【Unity】Mirrativのエモモ着せ替えの仕組みを解説する

こんにちは、Unityエンジニアの菅谷です。今回はMirrativのアバター(エモモ)の着せ替えについて解説します。Mirrativはゲーム配信のサービスではありますが、大きな特徴としてエモモがあります。エモモは2018年にリリースされ、ライブ配信のお供としてエモモが使われるようになりました。ユーザーは衣装やアクセサリーなどのエモモアイテムを組み合わせてエモモを着飾ることができます。エモモアイテムは主にイベントで追加されており、今では5000種類以上あります。

エモモの着せ替え

エモモアイテムには以下の種類があります。

  • 体型
    • 体格や身長
  • 顔のパーツ
    • 髪型や目、口など
  • 化粧や装飾
    • アイシャドウやフェイスペイントなど
  • 服装
    • 服や靴など
  • アクセサリーや置物

カテゴリーは全部で30種類以上あり、肌や目などのエモモアイテムは色が変えられます。ユーザーはエモモアイテムを組み合わせたり、色を変えたりして自分だけのエモモを自由に作ることができます。エモモアイテム以外にもモーションが設定でき、エモモが挨拶をしたり演出を伴った動きを行います。エモモで自分の個性を表現し、1万人いれば1万通りのエモモを表現できるよう日々クオリティアップを行っています。

着せ替えの仕組み

エモモには共通の素体となるモデルが1つだけ存在します。エモモのボーンなどの基礎構造を決め、エモモを動かすためのスクリプトの制御を行っています。この共通のモデルに対しそれぞれのパーツを入れ替えることでエモモを着せ替えます。それぞれのパーツの種類に応じて着せ替えの仕組みが異なり、大きく分けて5種類の仕組みがあります。それぞれの仕組みには長所・短所があるのでパーツの特性に応じて仕組みを使い分けています。

  1. ボーンスケールの変更
  2. ブレンドシェイプによる変形
  3. テクスチャの入れ替え
  4. メッシュとマテリアルの入れ替え
  5. プレハブの入れ替え

各仕組みについて順番に解説します。

1.ボーンスケールの変更

体型や身長など体全体に関わる項目はボーンのスケールを変更することで表現しています。ボーンスケールを変更することで例えば頭全体のサイズを小さくしたり、首だけ細くしたりと一括でサイズ変更ができます。ボーンスケールで表現するメリットとして、素体となるモデルを共通化しているため、体型や身長の違いでモデルを専用に作る必要がありません。あとから体型を追加する際も、各ボーンのサイズを表すプリセットファイルを用意するだけです。そのため見た目の調整や追加がしやすく、バリエーションを豊かにすることができます。ただし、ボーンのスケールが極端に大きい、または小さいと衣装との組み合わせによっては体に衣装がめり込むなど、見た目が破綻してしまうことがあります。デザイナーとともに表現を豊かにしながらも破綻しないようレギュレーションを決めたうえで衣装作成を行っています。また、以前は男性モデル専用の衣装や女性モデル専用の衣装などそれぞれの性別でしか着られない衣装もありましたが、現在は性別に問わず自由に衣装が着られるようにしています。

設定ファイルによりボーンスケールを変更しています。

2.ブレンドシェイプによる変形

ブレンドシェイプはボーンではなく、メッシュを変形させることによりモデルの表現の幅を広げる手法です。メッシュをどのように動かすかといった設定はモデル側であらかじめ決めておく必要があります。頭パーツや口パーツなどは素体のモデルにブレンドシェイプキーをもたせ、入れ替えるパーツによってブレンドシェイプ値を指定することで見た目を変えています。主にあご周辺の形や大きさを制御します。ブレンドシェイプによる変形はボーンスケールでの変更と同様にパーツごとに専用のモデルを作る必要がありません。

ブレンドシェイプによりあごや口周りの形を変えています。2つめの例はあご部分に丸みがあります。

3.テクスチャの入れ替え

鼻や唇といった顔のパーツやフェイスペイントやアイシャドウといった化粧はテクスチャの入れ替えで実現しています。頭パーツで使用しているシェーダーにアイテムと対応したテクスチャおよびブレンドカラーを渡し、フラグメントシェーダーで表示する色を決めています。

4.メッシュとマテリアルの入れ替え

目や衣装、靴下などはメッシュとマテリアルを素体のモデル側と入れ替えることで実現しています。また、各パーツの種類ごとに独自処理を追加しています。例えば目のパーツではブレンドシェイプの変換が行われます。素体側に存在するブレンドシェイプと作成した目のパーツに設定したブレンドシェイプの名前が異なっている場合があるので対応付けを行っています。

5.プレハブの入れ替え

アクセサリーや置物などのアイテムはプレハブから生成することで追加できるようにしています。アクセサリーはカテゴリーが一番多く、複数同時に組み合わせることもできます。プレハブから生成するため既存のエモモ構造に縛られず、一番自由な表現方法になっています。例えばアクセサリーごとにアニメーションを持たせたり、パーティクルにより演出を加えることができます。また、カテゴリーごとにプレハブ生成の基準となる位置をエモモの素体側に持たせています。それにより手持ちアイテムや翼アイテムを背中につけると、エモモの動きに合わせて装着したアクセサリーも追従します。置物アイテムはエモモの動きとは連動しない位置に生成することで固定位置に表示できるようにしています。

手持ちアイテムや翼アイテムはエモモの動きに追従します。

置物はエモモの動きとは独立しており固定の位置に表示されます。

エモモのクオリティを上げる手法

エモモを魅力的に見せるため、より華やかで自由度の高い表現とそのためのを様々な工夫が必要です。エモモは細部までよく動き、複数のアイテムを装着しても見た目が破綻せず整っていることが求められます。よく動かすための方法としての揺れものの追加や、複数のアイテムの組み合わせにおける細かな制御について紹介します。

揺れものの追加

揺れものとは髪やスカートなどのアイテムにおいて、エモモの動きと連動して物理運動するものを指します。髪や衣装には素体のボーン以外にも各アイテム専用でボーンを追加できるようにしています。メッシュとマテリアルの入れ替えの際に、アイテム側のボーンをもとの素体側にも一時的に追加することで、アイテムごとの揺れもの表現ができるようになっています。揺れものが多いほどリッチな表現ができますが、数が多いと負荷も高くなるため効果的な見せ方やボーン設定の仕方を日々工夫しています。特に髪型はディテールが細かいとボーン数も多くなりやすいので、大きく動く部分を優先するようにしています。また、揺れものはDynamicBoneを利用していますが、最近では軽量な揺れもの表現のアセットも登場しているため導入の検討を行っています。

髪と衣装がエモモの動きに合わせて華やかに動きます。

異なるアイテムの組み合わせ

トップスやボトムス、靴などの衣装ではアイテム間での組み合わせの制御を行います。例えばワンピースなどの全身がセットになった衣装を装着した際はトップスアイテムとボトムスアイテムを外すなど、排他制御を行っています。また、一緒に装着できるアイテム間で表示が重ならないよう対策を行っています。例えば髪はフード付きの衣装や帽子と干渉するため、髪にブレンドシェイプを設定しておき、衣装やアイテム側から指定できるようにしています。また、ヒールなどかかとの高い靴には高さを設定しておき、靴下側のブレンドシェイプを変更することで足のめり込みを防いでいます。

フードがなければ髪のブレンドシェイプは0です。

フードと組み合わせる際は髪のブレンドシェイプを変えます。実際の値は組み合わせるアイテム側で指定します。

日々エモモが魅力的に見えるように議論と研究をしながら改善を積み重ねています。

We are hiring!

エモモの魅力やクオリティは日々上昇しており、どこにも負けません。 ミラティブでは最高のアバター文化を一緒に実現するUnityエンジニアを募集しています。

www.mirrativ.co.jp