こんばんドドド〜！🐏
カバー株式会社クリエイティブ制作本部技術開発部のKです。
今回の記事では、タレントさんが普段の配信で利用しているホロライブアプリにおけるアクセサリー機能について紹介します。
アクセサリー機能とは
ホロライブアプリでは、タレントさんの衣装とは別にパーツ単位で演出や表示を切り替えることができる、アクセサリー機能が存在しています。
衣装のために専用に作られたアクセサリーや誰でも使うことができる汎用的なアクセサリーなど、様々な種類のアクセサリーが実装されていますが、今回はその中でも「タレントさんが自由に素材を追加してアクセサリーとして使うことができる」画像アクセサリー機能について解説したいと思います。
※わためさんのカドショ店長のサンバイザー・エプロンはわためいとさんお手製（クリエイター：ぶるー太さん @blueta9810／出典）
実はこの機能自体は数年前から既に存在しており、少し前の配信でも使われているのを見たことがある人も多いのではないでしょうか。
この記事では、画像アクセサリー機能を実現している技術についてご紹介します。
基本機能
ホロライブアプリでは、1つのアプリケーション内でLive2Dモデルも3Dモデルも取り扱えるようになっています。
画像アクセサリー機能はLive2Dモデル・3Dモデルどちらにも対応しています。
対応ファイル
- PNGファイル(静止画)
- GIFファイル(アニメーション)
単純な透過画像の他にGIFによるアニメーションにも対応しています。
モデルデータへの貼り付け
ローカルにある画像ファイルを選択してモデルデータに対してドラッグアンドドロップすることで、画像をアクセサリーとしてモデルデータに貼り付けることができます。
Live2D
顔の左上の位置に三角形の画像を付けています。
3D
3Dでも同じように三角形の画像を付けています。
少し角度を付けて3Dに馴染むように工夫してみました。
トランスフォーム処理
Live2D
マウスによる移動・スライダーUIによる拡大縮小をすることができます。
左のスライダーUIで大きくしています。
3D
Gizmoと呼ばれる補助UIを使って直感的に移動・回転・拡大縮小をすることができます。
平面っぽくならないように角度を微調整しています。
追従機能(親子関係)
Live2D
任意の位置に画像を貼り付けて追従させることができます。
これは画像をドラッグ＆ドロップしたときのマウスカーソルの位置に重なったLive2Dの部位を基準として扱っています。
これによって顔に追従させたり、髪の毛に乗せたり、胸にぶら下げたりなどの表現ができるようになっています。
Live2Dも画像もどちらも平面であり、微調整がそこまで難しくないため細かく設定できるようにしてあります。
角の部分に三角形の画像が追従するように設定してみました。
ハイライトが当たってどの場所に追従するのかが視覚的に分かりやすくなっています。
Live2Dモデルへの工夫
ここでは少し技術的な内容について深堀りします。
Live2Dモデルは、魅力的な表現を実現するためにアートメッシュ※1を細かく分けて管理しています。
沢山のアートメッシュに分かれてそれぞれが重なり合っているので、単純にマウスカーソルの位置から追従するアートメッシュを決めてしまうと意図しない追従の動きをしてしまうことが多いという問題がありました。
ホロライブアプリでは、これを解消するためにLive2Dのメッシュに対してレイキャスト※2を行って意図したアートメッシュに追従できるような処理を自作しています。
公式マニュアルにレイキャスト処理が解説されているので気になる方はそちらもご参照ください。
Raycastingについて
https://docs.live2d.com/cubism-sdk-manual/raycasting-unity/
CubismRaycaster.cs について
https://github.com/Live2D/CubismUnityComponents/blob/develop/Assets/Live2D/Cubism/Framework/Raycasting/CubismRaycaster.cs
自作したレイキャスト処理は公式のレイキャスト処理に加えて下記の内容を実装しています。
⚫︎ヒットしたアートメッシュのどこの座標をマウスクリックしたか更に座標計算する
これによりマウスクリックした場所をそのまま基準にしてアクセサリーが追従するようになります。
⚫︎重なっているアートメッシュがヒットした際に、現在選択しているインデックスを保持してどのアートメッシュを選択するかを選べるようにする
公式のレイキャスト処理では、ヒットしたアートメッシュが複数ある場合はそのまま複数のアートメッシュの情報が返ってきますが、その中からどのアートメッシュを今選択しているのかというインデックス情報を別途保持して利用者がそれを切り替えられるようにしています。
これらにより、複雑なLive2Dモデルでも可能な限り意図したアートメッシュに対してアクセサリーが追従できるようになっています。
※1 アートメッシュについての公式ドキュメント( https://docs.live2d.com/cubism-editor-manual/concept-of-artmesh/)
※2 レイキャストとは、ある地点から見えない光線(Ray)を飛ばしてその光線がぶつかるオブジェクトを検出する当たり判定のこと
3D
『頭・左手・右手・胸部・地面』と予め決められた部位の中から選んで、その場所を基準に追従するよう貼り付けることができます。
新しく左右の手のひらに三角形の画像を追加して手に持たせてみました。
3Dモデルへの工夫
3D空間ではLive2Dの工夫の説明にあったような厳密なレイキャスト処理をして追従する部位を決めてしまうと、3D空間上でどの部位に追従するかを選ぶのがとても大変になってしまいます。
なので、あえてよく使われるであろう部位(頭、左手、右手、胸部、地面)しか選べないようにしています。
これによって3D空間に慣れていない人でも、決められた部位から直接微調整ができるようになっています。
描画処理
Live2D
レイヤーの概念があり、Live2Dモデルの前・後ろにそれぞれ配置することが可能です。
また、追従するアートメッシュもそれぞれ別々に設定しているので、顔を傾けるとそれぞれが違う動きで追従します。
3D
3Dモデルでは奥行きの方向にも移動させることができるため、それによって後ろに配置することが可能です。
Live2Dのように背景に緑の三角形を付けていますが、斜めから写しているので角度が少し付いています。
まとめ
画像によるアクセサリー機能の紹介は以上です！
2Dと3Dでは単に見た目が違うだけでなく、それぞれの魅力ある見た目を作るために設定の方法や調整の難易度が変わってきます。
ホロライブアプリではそれらの差をなるべく吸収してタレントさんがその違いを意識せずとも直感的に自分のやりたい表現ができるように日々アップデートを行っています！
これからももっと魅力的な表現ができるよう改良を進めていきますので、よろしくお願いいたします！
カバー株式会社ではタレントの皆様の配信を支えてくれる仲間を募集しています。
この記事を読んで興味を持たれた方、ぜひ以下のリンクよりご応募お待ちしています。
