[MMD to Unity] YYB式初音ミクをUnityで表示しよう [Unity 2022.3.19]

# はじめに
超久しぶりの記事投稿です。
ただの技術者をやってましたが、今はライブ制作の技術班やってます。
この記事は、ほぼ身内向けに書く、UnityでMMDモデル (**pmx**ファイル) を表示する方法をまとめた記事です。

後でも説明を入れますが、この記事では`三目YYB`作の`YYB Hatsune Miku_default`を使用します。

https://bowlroll.net/file/284016

---

第二回の記事があります。
モーションを動かすやつです。

https://qiita.com/Zect/items/b6d43fffb8d3397cc4c9

---

# Unityのインストール
まずはUnityをインストールします

https://unity.com/ja/download

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/19c2f781-a256-d49d-6759-55107ebd316b.png)

水色のボタンを押し、Unity Hubのインストーラーをダウンロードします。

手順に従い適当にﾎﾟﾁﾎﾟﾁし、インストールが完了したら、Unity Hubを起動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/d67b3620-b009-5eb6-66ab-a69535aea592.png)

そうすると、Unity Hubが開くので、左の`Installs`と書いてある場所をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/6331f3ad-b9be-5152-0c26-4cd58b2f0e51.png)

2/8/2024現在、推奨バージョンは2022.3.19なので、これをインストールしますが、他のバージョンでもおそらく大丈夫だと思います。
バージョンを揃えたい方は、Unityアーカイブからインストールします。

## Unityアーカイブを使う

https://unity.com/releases/editor/archive

Unityでは、このサイトから好きなバージョンのUnityをインストールすることができます。

今回使用しているプロジェクトのバージョンは `2022.3.19` なので、2022年タブの一番上にある(はずの)自分のPCのOSに合うDownloadsを押し、`Unity Hub`と書かれた部分をクリック、Unity Hubを開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/1d8d2022-49c1-8eba-4d2c-b7de1f2b105d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/e2020207-b214-df8f-5e1b-0d74bb10f88f.png)

こんな感じの画面になるので、一番上の`Visual Studio`のチェックボックスは外します。
エディターはVSCodeだけで十分です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/69232cbc-4e46-6db3-d42c-d7be02e26685.png)


インストールにはかなり時間がかかります
気長に待ちましょう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/f34ebdaa-7b75-86b4-736a-3414effaa2d7.png)

# Unityプロジェクトの作成

Projectsへ行きます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/2e96bf47-4a40-4e95-b93b-8c14643da3d8.png)

New Projectをクリック、`3D (URP)` で新規プロジェクトを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/2038cdcf-eda9-91da-a646-38fb01f147ad.png)

「テンプレートをダウンロードする」と表示されてる場合があるので、まだダウンロードできてない場合は、ダウンロードしましょう。

3Dプロジェクトを作成するのでもいいのですが、後で使うシェーダーの関係で、URPだとミクがきれいに表示されるので、URPを使います。
（URPあんまわかってない）

いい感じに設定が終わったら、作成を押して、待ちます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/67979523-d9f1-c81c-0dd8-a8347611585a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/2c25d79d-8385-24d9-e9bc-67ffb5c5ccee.png)

この画面が出てきたら、Unityの起動完了です。

# UnityでMMDモデルを読み込む

さて、ここでもうMMDを読み込みたいところなのですが、通常、MMDで読み込まれているモデルのファイルは `pmx` です。
しかし、Unityではpmxファイルをモデルとして認識してくれません。
なので、pmxファイルをいい感じに変換してくれるツールを使います。

## MMD4Mecanimの導入

https://stereoarts.jp/

このサイトの真ん中らへんにある `MMD4Mecanim_Beta_20201105.zip` をダウンロードします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/c35ce624-0102-0b16-552c-e4a98fa55d30.png)

ダウンロードしたらいい感じの場所で解凍しましょう。

そしたら、Unityへ戻り、 `Assets > Import Package > Custom Package` をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/61ba57c7-5a82-ebd8-5a48-4e18282ced67.png)

さっき解凍したフォルダ内にある `MMD4Mecanim.unitypackage` をダブルクリックし、読み込みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/4389a8d3-b2b6-8b9e-f19c-92c96a730143.png)

そしたら、こんなのがでてくるので、左上の`All`を押してから、右下の`Import`を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/5f7b6f2b-f745-30b5-2f55-7dc6620ea62e.png)

なんかよくわかんないポップアップが出てきますが、よくわからないので、許可します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/4e7754e5-6bd8-08ea-bf68-63d39362be7a.png)

## MMDモデルを準備する

MMDモデルをダウンロードします。

https://bowlroll.net/file/284016

今回は、 `YYB Hatsune Miku_default` を使用します。

ダウンロードが完了したら、解凍します。

解凍したフォルダ内はこんな感じだと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/a69868ab-e4d4-e918-0479-43a8da10d89d.png)

新しく`Texture`というフォルダを同じディレクトリに作成し、 `fx`, `spa`, `tex`, `toon`の中身を全てコピーします。
重複する名前のファイルがある場合は、リネームします。

こんな感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/117dd4c1-951e-1947-0b89-5fa092b09bb0.png)

そうしたら、Unityへ行きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/fcc5adf8-1147-b60e-4bce-70df85280ffd.png)
ここら辺のいい感じの何も無い場所を右クリックし、Createからフォルダを作成し、`YYB Miku`などと名前を付けます。（これはなんでもいい）
新規作成したフォルダを開き、さっき作成したTextureフォルダとUnityで表示したいモデルのpmxファイルをドラッグアンドドロップでAssetsの何も無い空間に入れます。

そうすると、なんかかっこいいアイコンのファイルができると思います。
これをクリックし、利用規約に同意するチェックボックスを付け、`Agree` を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/1d62cd9e-4602-f3c5-b678-fb4a4d163405.png)

そしたら、こんなのに切り替わるので、`Process`をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/58a6e9f5-92ba-9422-7c72-c75992286541.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/4a5dbf51-7c62-f226-4204-ffb1c5e19b06.png)
この処理はそこそこ長いんで、気長に待ちましょう。

処理が完了したら、コマンドプロンプトは勝手に消えます。
そして、ピンク色のミクが出現してます。
（色が付いてたらこの先の工程は飛ばしてもOKです）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/c6dd9e01-cd74-bce2-dc34-ce0c4454362d.png)

# マテリアルの修正
このピンクになっている現象は、マテリアルの設定がうまくいっていないからです。
てことで、ここから、マテリアルの修正をします。

まず、ピンクになってるミクをクリックし、ちょっと上に置いてある画像みたいな画面にします。
そしたら、右の方に`0.body01`とか`1.01`とか書いてある部分の左に水色の球体がある部分をクリックします。
そうすると、Assetsの部分がピンクの丸でいっぱいになるはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/d0c4af7e-68e7-c40e-84d4-e1145839d1a1.png)

そしたら、表示された大量の`material`と言われるファイルをクリックし、`ctrl + a`で全選択します。
そうすると、右上がこんな表示になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/6ef52dd1-143c-6f2b-9aa8-c72a47286f06.png)

そしたら、このスライダーをクリックし、`lit`で検索し、URPのLitをロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/130723bb-69db-85a7-0e10-2ba12cd05c0d.png)

そうすると、こんな感じでミクが真っ白になるはずです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/b276b2b9-8ef7-89aa-7057-38f284c898bb.png)
これは、ワールド上にミクを置かなくても、`Assets/YYB Miku`の中のファイルに見られます。

# 対応する画像をBlenderで知る

白いミクができたのはいいですが、このままでは、対応するテクスチャ用画像がわからないので、ミクが出来上がりません。
これは、blenderとMMD-Toolsを使うことで解決できます。

ただ、MMD-Toolsは少し古いプログラムで、動作環境は3.6LTSとなります。
そのため、以下のリンクからBlender 3.6LTSをダウンロードし、インストールします。

https://www.blender.org/download/lts/3-6/

ちょっと下にスクロールすると、Versionsってのがあるので、好きなインストーラーを選んでください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/8e0648e7-d576-78b8-559e-f3c6fc2f467f.png)

インストールが完了したら、blenderを起動、なんか表示されるのでOKとか押してください。
以下のような画面になったら、`全般`を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/ab4f981d-e635-7203-0ba1-655f0dd5bf87.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/56471385-304b-036a-339d-2b6074d43a93.png)
そしたら、左上にあるスペースでクリックして、`A`キーをクリックします。
そうすると、全オブジェクトが選択されるので、`del`キーを押して全削除します。

# MMD-Toolsの導入

以下のサイトを参考に、MMD-Toolsを導入してください。
~~（別に、書くのが面倒だったからじゃないよ）~~

https://mmd-blender.fandom.com/ja/wiki/MMD_Tools

導入で来ました？
導入で来ましたね。
そうすると、`ファイル > インポート > MikuMikuDance`でmmdモデルをインポートできるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/276d341c-9d0d-6a10-4c52-3abbacaa2c06.png)

それでUnityで読み込んだミクのpmxファイルを選ぶとミクが読み込まれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/db05bce6-3810-c10a-9039-623cfeaff01a.png)

そしたら、ワールド上でzを押しながらマウスカーソルを下にやります。
そうすると、ミクに色が付きます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/b1315630-21ff-dceb-0ce1-213e7b497660.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/8072286d-7c58-3290-61de-4342662e0fac.png)

あと、表示されてるボーンが邪魔なので、上の画像で選択してる部分(青くなってるやつ)の右から2つめの目のマークをクリックして閉じます。

ミクかわいい！！！！！！！！！

その選択してたやつを展開したら出てくる`_mesh`で終わるオブジェクト(?)を選択してください。

それで、この赤で囲った球体マークを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/fa6cd852-b80d-4780-7828-2c2b629e8c18.png)

なんか色々出てきましたね。
おや？なんかUnityで同じ名前を見たことがある、、、
そうです。
これが、ミクを構成してるマテリアル一覧です。

それでは、このサーフェースの中の`ベーステクスチャ`を展開してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/91c4364e-07a9-8fb7-e62b-9404f5b18225.png)
そうすると、`body.png` が出てきました。
それでは、Unityへ戻ります。

blenderで中身を見たマテリアル`body01`と同じ名前のマテリアルを選択します。
そしたら、右に表示されるやつの中に`Base Map`と書かれたものがあるので、そのちょっと左にある〇をクリックします。
それで、先ほどblenderの方で確認した`body`を探しダブルクリックし、選択します。

そうすると、、、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/aeb0f367-17a7-2de5-6235-4925cefa9c68.png)

ミクに色が付いた！！！！！！！！！！！！！

これを大量に繰り返します。

tipsを言うとしたら、同じファイルを参照するマテリアルは、同時に選択して一緒にbase mapを選ぶことで時短ができます。

そうして完成したのがこちら！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/8129cfcf-4edd-017e-0fc8-c566425394f7.png)

非常にかわいいですね。

画面上はちょっと暗い場所がありますが、これはURPの仕様？かなんかみたいです
（まだあんま理解してない）
光の問題っぽい？

ビルドするとこんな感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/25e2fc8c-fd89-8de4-e41c-360a4463930b.png)
かわいいですね

# 最後に

この記事では、Unityでミクを**表示する**を目標としました。
この続編として、ミクを動かす方法をまとめた記事を書きました。
こちらもぜひ

https://qiita.com/Zect/items/b6d43fffb8d3397cc4c9

## 宣伝！！

VJやってます。
ちょっと前に自作したソフトでﾎﾟﾁﾎﾟﾁやってます。
Touch Designerも楽しい

https://twitter.com/HELLO_Tempest39

ハロボカというボカロがたくさん流れるタイプのクラブです。
中高生向けに組まれた明るくてライトなクラブなんで、クラブ行ったことが無い人も音楽をデカい音で聞く目的でも楽しめると思います。

あと、ボカロのファンメイドライブ作ってます。
それぞれ、幹部とライブ制作委員会の代表やってます。

https://twitter.com/OWN_LIVE39

https://twitter.com/04squ4d


それでは、また ﾉｼ