VRMアバターの色改変について

# VRMアバターの色改変について

ｵﾊﾖｳｺﾞｻﾞｲﾏｽ
せっかく２枚目が・・。

なので今回は趣向を少し変えてVRMアバターでの色改変について触れていきたい思います。

## ○マテリアルの色を変更する。
アバターの色変更で一番簡単な方法はマテリアルの色指定を変更することです。
- 髪用のマテリアルを開いて「Color」内カラーボックスを開いて
![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/14bbf226-b04a-b580-be9a-6a1a211df928.jpeg)

- カラーパッドが出てくるので好きな色に変更しましょう。今回は赤くします。
![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/13ea0637-76fd-523d-a689-8407d4256b5e.jpeg)
　髪のメッシュが黄色いですね。
　これは３Dメッシュに割り当てられているマテリアルが複数あるからです。

　　 ちなみに・・「Shade Color」がピンクがかっていますね。
　　 Mtoonの標準では影がピンクがかって表示されます。気になる場合は白くしましょう。

## ○マテリアル分けて色を変更する。
- 容量削減などのよりマテリアルやテクスチャが極力まとめられている場合があります。
この例だとマテリアルの色を変更するとリボンも赤みがかりました。
![3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/801b4660-c2d1-3c79-c6d4-35a840419ed4.jpeg)
　※実際のアリシアモデルは複数マテリアルに分かれているのでこうなりません。

- マテリアが分からない場合、
「Skinned Mesh Rendere」→「Meterials」にて参照しているマテリアルが確認できます。
![4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/60b3200f-4afb-5ad3-f807-cd9ff505a6ef.jpeg)

- 該当するマテリアルを選択して「Ctrl」+「D」にてマテリアルの複製が出来ます。
わかりやすい名前に変えて、先ほどの通り赤くしてみましょう。
![5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/6037c2e4-b05a-289c-3a75-9f18af614470.jpeg)

- マテリアルの準備が出来たら新しいマテリアルを
「Skinned Mesh Rendere」の「Meterials」へドラッグ＆ドロップしましょう。
これで髪用のマテリアルを作り、セットすることが出来ました。

**※なお、マテリアル数が増えるためプラットフォームによっては制限に引っかかる場合があります。**
![6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/983f84a6-389b-3294-1367-62c102238e3b.jpeg)

## ○テクスチャをべた塗りしよう
使用しているテクスチャを塗り替えることによりマテリアルを増やさずに色変更が出来ます。
- テクスチャが不明の場合、マテリアルの「Texture」にある絵をクリックすると強調されます。
![7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/b57a2486-edb9-a833-907f-f8707d175983.jpeg)

- 適当に色をべたっと塗って、違う名前で保存しましょう。（自信があれば上書きでも）
![8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/722702d4-182c-3cd1-e920-ac3c194d326d.jpeg)

- マテリアルの「Texture」にある絵へドラッグ＆ドロップしましょう。
このとき「Shade Color」も変更しないと影の時に黄色いテクスチャが表示されます。
![8_.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/40425c75-4ae2-670c-bb23-6de4f8c16bab.jpeg)

- これで髪の色だけが変更できましたね。
注意する点としては塗り替えたテクスチャを使用しているマテリアルを全て新しい物へ差し替えましょう。
VRMファイル内に新旧2つのテクスチャが保存されるため容量が増えてしまいます。
また、べた塗りのためにテクスチャに書き込まれている影などのディテールも関係なく塗っちゃいます。
![9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/9b9d8999-6a4f-d6fe-8a76-768a1fa934c4.jpeg)

## ○テクスチャをきれいに塗ろう
上記方法はべた塗りのため、テクスチャに書かれている明暗やグラデーションが全て上書きされます。
これらを残す場合はレイヤー対応のペイントソフトを使用して色を重ね塗りしましょう。
購入アバターはテクスチャ用のPSDファイルが付属されていることがあるため、PSD対応のソフトを選択しましょう。

本家本物とフォトショップを使用するのが一番良いのでしょうが、
お高いので私の場合はMediBang Paint Proを使用しています。ユーザー登録で基本無料です。

- メディバンでテクスチャを開いて、レイヤーの追加をクリックしましょう。
![10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/b51e4277-0371-29d2-0b17-2d2c0439dc64.jpeg)

- 追加するレイヤーを選択し、髪に該当するエリアを塗り塗りしましょう。
PSDファイルの場合UVマップレイヤーを用意してくれている場合があるので、
これを表示することでテクスチャとして参照している領域がわかりやすいです。
![10__.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/56329243-ead3-da14-0064-638993d56a7c.jpeg)


- ブレンドを「通常」から「カラー」に変更しましょう。
ちょっとわかりにくいですが、テクスチャに書きもまれているディテール残したまま色を変更できました。

![11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/e6ae93da-e726-14db-88b5-6407c110e8de.jpeg)


- ちょっと明るすぎると思った場合、レイヤーを複製して一旦複製したレイヤー以外を非表示にしましょう
![11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/5d7f2a74-04bb-286d-d12a-ef7944bba3ca.jpeg)

- バケツツールで黒く塗って
![12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/7fc3fd9a-18fe-c76e-ae8f-ea9d02fc69e2.jpeg)

- ブレンドと不透明度をいじって良い感じにしましょう
![13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/f346dc78-05f1-bc2d-5fe3-de3883663991.jpeg)

- 「ファイル」→「書き出し」をクリックして
![14.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/40c090b9-9c79-a83d-502e-31aae0d51c44.jpeg)

- ファイル形式が「透過PNG」であることを確認し。「OK」をクリックしてファイルを保存しましょう。
透過PNGでないと透明部分が黒く表示されたりします。
![15.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/938940af-82d2-4da2-7e88-6e13db7e86f0.jpeg)

- 後はマテリアルのテクスチャを差し替えて、明暗を残しつつ赤っぽく出来ました。
ベースが金髪なので少し黄色っぽいですが。
![16.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/19dfc9b3-f1f8-2096-ed05-beecec1546e8.jpeg)

## ○テクスチャサイズを見直そう
勝手ながらテクスチャサイズは服を2ｋサイズ。顔などは1ｋサイズ位を目安にだと思っています。
もちろんテクスチャサイズが大きいほど綺麗で素晴らしいのですが、
残念ながら4ｋサイズくらいになると展開に時間がかかります。
皆がツヨツヨPCではないため、許せる程度にテクスチャサイズを減らしましょう。
- ユニティでテクスチャを選択、「最大テクスチャサイズ」から変更したいサイズを選択
「適応する」をクリックしましょう。これで軽くなりました。
![17.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2353185/7e6a5a00-e23d-585e-b156-56eb5441847e.jpeg)


# ○まとめ
いかがだったしょう？
これが正解！というわけではありませんが色改変するに当たり参考になれば幸いです。