原神のモデルをUnityで動作させるまで

# はじめに
原神のモデルをUnityで動かしたいと試行錯誤した結果、ようやく形になったので記録として残すことにしました。各ツールの詳細な使い方や、Unityの基礎的な部分は説明を省いています。

---

作成にあたり、以下の記事を参考にしました。

https://qiita.com/ishi0/items/e1b58ded4328184e6d59

https://zenn.dev/ittonijo/articles/5d800f74830ca6

https://zenn.dev/matsuataru/articles/c9605392a12b77

https://zenn.dev/aruk_vs/articles/8ae50489cdee83

## 環境

- Unity2022.3.43f1
- PMXエディタ 0.2.7.3
- MMD4Mecanim 2020/11/05 版(β)

## モデルの用意
以下のページで公開されているスプレッドシートからモデルを１つ選んで
ダウンロードします。ダウンロードしたzipファイルは展開しておいてください。

https://www.hoyolab.com/article/118389

## モデルデータの修正
PMXエディタを使ってモデルデータの修正を行います。

https://kkhk22.seesaa.net/article/282933265.html

テクスチャ名は簡体字が使われています。簡体字のままだと失敗するという報告もありましたが、私の環境ではそのまま使用できました。

ただ、直感で分かりにくい単語があったり、今後不具合の原因になっても困るので、ここは素直にリネームします。

![pmx.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/873c2627-a8f0-d388-0545-d44d1f94df25.png)

新しい名前は半角英数が無難です。

![rename.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/76020fcb-c766-5088-5ae2-587b42dd1ea4.png)

pmxのファイル名も簡体字が使われているので、念のため保存時に変更しました。

### プロジェクトの作成
Unityでプロジェクトを作成します。後述しますが、今回はURP対応のシェーダを使用するので、テンプレートの中からUniversal 3Dを選んで作成しましょう。

![newproj.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/2c69297d-dfb3-c3f5-afd9-a5eaacc965b2.png)

作成後、Readmeなどは不要であれば削除して構いません。ReadmeのRemove Readme Assetsボタンをクリックしてください。表示されたダイアログのProceedボタンを押せば不要なデータが削除されます。気にならなければそのままでも問題ありません。

![readme.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/371ab7db-0e25-6791-eeb7-4d1c33b00ca5.png)

## 
この後で導入するMMD4Mecanimですが、パッケージが現在のURPに対応していないため、シェーダが正常に動作しません。いくつか代替案がありますが、今回は比較的扱いやすいUnityURPToonLitShaderExampleを使用します。

https://github.com/ColinLeung-NiloCat/UnityURPToonLitShaderExample

リンク先からzipファイルをダウンロード、展開してUnityのAssetsにD&Dするだけです。

![toon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/2f208b50-2d2a-3e5f-bdc7-2424aee2b32a.png)

## MMD4Mecanimの導入
以下のサイトからMMD4Mecanimをダウンロードします。

https://stereoarts.jp/

ダウンロードしたzipを展開すると以下のようなファイルが入っているので、この中からMMD4Mecanim.unitypackageを選択してダブルクリックします（D＆DやメニューバーのAssets > Import PackageでもOKです）

![mmd4import.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/3f71557a-7d3c-067a-40f2-9dfe462db24c.png)

パッケージの中身はそのまま全てインポートしてください。

:::note
展開したzipにはURP用のパッケージも含まれていますが使用しません。
:::

## 編集したモデルをプロジェクトに追加
PMXエディタで編集したpmxファイルとテクスチャが含まれるフォルダを丸ごとプロジェクトに追加してください。

![dandd.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/925c374b-7c22-8507-abd1-1dd1f06889fd.gif)

追加したフォルダを見ると【ファイル名.MMD4Mecanim.asset】というファイルが増えています。ファイルを選択するとInspecterに利用規約が表示されるので、内容を確認してチェックを入れてください。最後に【同意する】→【Process】を押すと変換が始まります。

![run.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/861a6c69-9043-9ccd-18fe-eb594a3244a8.gif)

変換が終わると結構な確率でエラーが発生します。

![error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/5c362197-f019-d73f-4b33-e1afdaaaf199.png)

エラーになると処理が中断しますが、そのまま続けてください。マテリアルやFBXなど関連するファイルが生成されます。中断した場合は少しファイルが足りませんが、動作させるだけなら特に問題ありません。

![file.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/4bdd649f-233d-bd23-cbc1-33dc02e15ec4.png)

## Humanoidを適用
生成されたFBXファイルのアニメーションタイプをHumanoidにします。

![humanoid.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/fe6e0869-ab2f-319f-0468-abe81117c8c7.png)

モデルによって対応するボーンがなかったり、マッピング重複などでエラーが発生します。その場合は手動で修正してください。

![manual.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/6b82056f-8a9d-f727-fd04-7ac305d469be.gif)

## マテリアルの修正
Materialsフォルダに入っている全てのマテリアルを修正します。シーンにモデルを配置しておくと確認がしやすくなるため、おすすめです。

![instantiate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/f460b9d9-0254-6dfa-8e06-ba460ddd30a7.png)

まずはシェーダをSimpleURPToonLitExample(With Outline)に変更します。

![simpletoon.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/281eb3e7-eaa9-6be7-5ea9-3d8f7882b53a.gif)

生成されたマテリアルはPMXエディタで修正したマテリアルと順番が一致しているので対応するテクスチャを設定してください。

![material.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/b854b60c-bb47-60ff-c49e-bff4371e4511.png)

これを全てのマテリアルで行います。

![bandicam 2024-10-21 11-56-42-919.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/7a0fe8bc-a3a5-1f8f-eb44-835bbbfe3594.png)

## シェーダパラメータの調整
今回はそれなりに表示できるところまでを目指すので、よく使う項目を取り上げます。

### High Level Setting
顔、目、口のマテリアルならチェックを入れます。ライティングが柔らかくなるようです。

![face.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/30e4e206-2e24-3fe4-9c02-0540796c2564.gif)

### Alpha Clipping
アルファクリッピングを使用する場合はチェックを入れます。シェーダ下部にあるRender QueueをTransparentにしないと正常に描画されないことがあるので注意してください。

| 設定 |  描画結果 |
|:-:|:-:|
| AlphaClipping<br>OFF<br><br>RenderQueue<br>FromShader | ![normal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/79ea4a29-861c-d4a6-5dcf-1a6e526cd109.png)  |
| AlphaClipping<br>ON<br><br>RenderQueue<br>FromShader | ![onfromshader.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/ef9347b8-99e5-5acf-a2f1-68f7e6e23cdc.png) |
| AlphaClipping<br>ON<br><br>RenderQueue<br>Transparent | ![ontrans.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/15b70d9f-155a-8be7-9f6d-f0bc8f840a8b.png) |

### Outline
輪郭線のサイズをWidthで指定します。カラーはそのまま輪郭線の色になります。

![outline.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/66b1362d-f934-6793-03d4-d2bd80f5c0f0.gif)

## アニメーションを付けて再生
アニメーション自体に特殊な手順はありませんので解説は省きます。Animatorを追加して再生してください。ここではサンプルとしてUnitychanのアニメーションを利用してみました。

https://unity-chan.com/

![animator.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/f69a786a-d13b-ad9c-0f6a-108ec09b579e.gif)
© UTJ/UCL

## 物理挙動を追加
デフォルトでは髪や装飾が全く動かないので、**MMD4MecanimModel**を使って揺れ物を動かします。pmxファイルを変換した時にエラーが発生しなかった場合は、モデルをシーンに配置するとき自動的にコンポーネントが追加されますが、エラーとなった場合は以下のように手動で追加します。

![mmd4model.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/997c390b-d7ed-5bf9-166a-ea4961a85d2c.gif)

MMD4Mecanim > Scripts の中にMMD4MecanimModelがあるので追加してください。追加するとModelの欄にModel Fileという項目があります。変換時に生成された〇〇.modelのファイルを指定してください。

![model.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/e71558e4-b844-dfd9-4cca-7b2c22695835.png)

:::note warn
指定しなくても再生時に設定してくれるようですが警告が出ます。
:::

変換でエラーが発生しなかった場合は自動的に設定された状態になります。

![ok.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/f7a415cf-fda9-6e3f-30f6-cf48210f644b.png)

失敗したときには生成されないIndex FileとVertex Fileも指定が行われていますが、無くてもとりあえず動くので、気にしなくても良いと思います。

Physics Engine には Bullet Physics を選択してください。後は再生するだけで動作します。

![bullet.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/883ce906-2ac2-066a-c902-b20c5fd4500e.png)

![bulleton.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/025e11cf-1869-7675-0b7d-2009c646598a.gif)

比較になります。左は物理挙動なし、右はありです。

### 特定の物理挙動を止める
物理挙動を有効にすると、モデルによって一部のオブジェクトが過剰に揺れることがあります。

![backpack.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/d3942df5-8870-ad48-c88a-4ffd549012f1.gif)

これらは MMD4 Mecanim Model コンポーネントのPhysicsにある RigidBodies で調整が可能です。対応するオブジェクトのチェックを外してしまえば物理挙動の対象外になります。

![rigidbodys.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/74ea998d-681f-7567-bd78-dbd4eb83500c.png)

![stop.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/b222cf3a-7501-13c1-7fe6-01d7caba0d7c.gif)

右側のパラメータも調整してみましたが、動作に変化がなかったので要検証です。

## 表情を変える
表情は MMD4 Mecanim Model のMorphで変更できます。

![morphhelper.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/559527b2-19af-7d38-92ef-42e17d9838eb.gif)

これだけでは初期表情しか設定できないので、MMD4 Mecanim Morph Helpher を使ってゲーム実行時に表情を変化させます。MMD4Mecanim > Scripts にスクリプトがあるので追加してください。

![morph.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/9c3df2e1-94fa-e9f1-1933-52e88a3443ff.gif)

パラメータはエディタ上で指定できます。

| 項目 |  内容 |
|:-:|:-:|
| Morph Speed | Morph Weight で指定した値になるまでかかる時間 |
| Morph Name | Morph一覧にある名前と同じ文字列を指定 |
| Morph Weight | ウェイト（変化量）0.0～1.0の範囲で指定 |
| Override Weight | 未検証 |

例えばMorphSpeedを1、MorphNameをまばたき、MorphWeightを1にして再生した結果が以下の通りです。

![morphtest.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/e4ed762a-5697-db2e-7663-0a208e8d40c8.gif)

### スクリプトで制御する
スクリプトから変更することも可能です。ここでは別途Playerスクリプトを作成してスペースキーが押されたら表情を変化させる実験してみます。なお、エラー処理は省いています。

```cs:Player.cs
using UnityEngine;

public class Player : MonoBehaviour
{
    MMD4MecanimMorphHelper morphHelper;

    void Start()
    {
        // MMD4MecanimMorphHelperの取得
        morphHelper = GetComponent<MMD4MecanimMorphHelper>();
    }

    void Update()
    {
        if( Input.GetKeyDown( KeyCode.Space ) )
        {
            Debug.Log( "スペースキーが押されました。" );
            // 各項目を設定
            morphHelper.morphSpeed = 0.1f;
            morphHelper.morphName = "ウィンク";
            morphHelper.morphWeight = 1.0f;
        }
    }
}
```

![scrmorph.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/c0b2dbd5-4c9f-4be6-35c5-8a104aed0e80.gif)

MMD4MecanimMorphHelperにはモーフが再生中かどうかをチェックするisProcessingプロパティが用意されています。詳細はMMD4Mecanimのマニュアルを確認してください。

```cs
// モーフが再生中か
if( morphHelper.isProcessing )
{
    // 再生中
}
```

## リップモーフ
音声ファイル名から口の動きを制御することができます。こちらは付属のマニュアルに記載されている動作確認を行っただけで、各パラメータの詳細については検証していません。

MMD4Mecanim > Scripts にある MMD4MecanimSpeachHelper を追加して、Speech Audio Clip にサウンドファイルを追加します。ファイル名をひらがな、カタカナで記述することで、サウンドファイル名と同じ口の動きを行ってくれます。

![lipsync.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/b578b20f-492e-c39d-5515-937939f30b34.gif)

例として"あいうえお"を設定して再生しました。

## おわりに
まだ不明な点や表示上のバグ、検証が終わってない項目もありますが、目標の**とりあえず動かす**は達成できました。Unityの学習などでも利用できて楽しくなりそうです。利用規約をよく読んで、上手に活用しましょう。

![all.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113415/cba1917c-73e5-0bb9-5e70-acdc2fbe6e1c.png)