【VRChat】アバターの髪色改変のやり方をわかりやすく解説！【シェーダー改変とGIMPでのテクスチャ改変】

こんにちは、もなよ(＠monayoVR)です。

突然ですが、

購入したVRChatのアバター、もう少し自分らしくアレンジしたいな……

と思ったことはありませんか？

そんな方に向けて、アバターの髪色改変のやり方を初心者向けにわかりやすく解説していきます！

シェーダーで髪を色改変する方法

lilToonを使用してシェーダーで色改変

ここでは「lilToon」という、色調補正や質感、影の表現やアニメーションなどを簡単かつ軽量に実装可能なシェーダーを用いて、色を変えていく方法を紹介します。

もしまだ導入されていない方は、下記の青いボタンをクリックし「クリエイターコンパニオンで開く」をクリックして、VCC経由で導入してください。

※上記画像はChromeのものです。

※この記事で取り扱うliltoonのバージョンは1.7.3になります。

それでは、liltoonが導入出来たところから解説していきます。

1.アバターをアップロードする

はじめに、アバターのアップロード方法からご紹介します。

既にアバターをアップロードしている方は、「2.ヒエラルキー上で髪を選択する」から読んでください。

まずは、任意のアバターをインポートします。

Assets>Import Package>Custom Packageを選び、任意のアバターをインポートしてください。

今回はひゅうがなつ先生の狛乃(こまの)というアバターを使用します。

unitypackageを選択して、開くを選択します。

Unityのほうで、このような画面が出るので、Importを選択します。

狛乃の場合だと、Komanoというフォルダがインポートされているので、それを開きます。

Prefabフォルダを開きます。

その中にある、服を着ているほうのアバター（ファイル名はKomano）を、ヒエラルキーへドラッグ＆ドロップします。

すると、シーン上に表示されます。

ここから、色を変更していきます。

2.ヒエラルキー上で髪を選択する

今回は狛乃の髪色を赤系の色にしていきます。

ヒエラルキー上でKomanoの▶を押して展開し、Hairを選択します。

(見つからない場合は、直接アバターの髪をクリックでもOKです)

3.髪のマテリアルを展開する

表示されたインスペクター下部にマテリアルの情報があるので、Hair（Material）の▶を押して情報を展開します。

※画像は「メインカラー / 透過設定（色替え）」を展開した状態です。

色を変える場合は、色設定のうちの三項目「メインカラー / 透過設定（色替え）」「影設定」「発光設定」を変更すると見た目が変わります。

今回は、「メインカラー / 透過設定（色替え）」に絞って解説します。

展開したあと、「メインカラー / 透過」の「色/透明度」の「HDR FFFFFF」と書いてあるところの白い部分「HDR」を選択します。

すると、HDR Colerというカラーパレットのようなウィンドウが開くので、そこで好きな色になるように値などを調整してみてください。私は下記のようになりました。

変更前←　→変更後

これでシェーダーでの色改変は完了です。

↑テクスチャで色改変すると、こんな感じに自然な仕上がりになります！

テクスチャで色改変する方法

シェーダーの色改変は、非常に簡単にできる反面、

細かな部分の調整ができません。

そこでここからは、

テクスチャを変更することで色改変する方法を解説していきます。

1.画像編集ソフト「GIMP」をダウンロード

テクスチャの色改変には、画像編集ソフトが必要です。

windows標準のペイントソフトでは機能面で厳しい部分があるため

GIMPという無料のペイントソフトを使用して、色改変を行っていきます。

GIMPのインストールはこちらから↓

※テクスチャというのは、本来は物の表面の質感などを表す言葉ですが、3DCGの世界では、3DCGを平面に分割し、その見た目（色や模様）などが描かれている画像のことをテクスチャと呼びます。

狛乃のテクスチャは、髪の毛・耳・しっぽの色を同じテクスチャで管理しており、テクスチャから変更した方が色を統一しやすいので、シェーダーの手順で色を変更している場合はデフォルトに戻しておいてください。

2.髪テクスチャの画像ファイルの特定

色をデフォルトに戻すことができたら、ヒエラルキー上で色を変更したい部分を選択します。

今回の場合は、耳の色と髪の色を変更したいので、Ear(耳)を選択します。

※Hairを選択してもOK

そうしたらシェーダーの時と同じ手順で、色設定の「メインカラー / 透過設定（色替え）」を開きます。

「⦿色 / 透明度」と記載されている左側の小さな青い四角形を押します。

ここでテクスチャが選択されているので、ここを選択することで、プロジェクトフォルダのどこに入っているかが、黄色くハイライトされて分かるようになります。

これで保存先が、Assets＞Komano＞Textureで、画像名がHairだということが分かりました。

ここから一旦画像編集をするので、Unityを消さずに離れます。

3.エクスプローラーでプロジェクトのファイル→画像ファイルを開く

エクスプローラーでプロジェクトの保存先を開きます。

パス(プロジェクトファイルの場所)が分からない方は、下記のVCCから特定する方法を利用してください。分かる方はエクスプローラーの画像が出てくるまで飛ばしてください。

まずはVCCを開きます。

ProjectNameの列で、緑の点があるものが現在起動しているものになります。

その開いているプロジェクトの「Manage Project」を押してください。

画面左上、プロジェクト名の下に記載されている「Located At:XXXXX」のXXXXXがパス(プロジェクトファイルの場所)になります。

それをコピーして、エクスプローラーで開いてください。

先ほど、Unityで特定した保存先をもとに、Hairという名前の画像ファイルを探します。

4.コピーして新しい画像ファイルを作成

Hairの画像ファイルをコピーして、新しくHair_Aka.pngを作成します。

※名前はなんでもOKですが、今回は髪の色を赤にする予定なのでわかりやすくAkaにしました。

5.Hair_Akaを右クリックして、GIMPで開く

右クリックして、「プログラムから開く」でGIMPを選択してください。

もしGIMPを開いた直後このような画面が出たら、「維持」を選択してください。

※「変換」を選択すると、色味などが若干変化してしまう可能性があります。

6.GIMPで色を調節する

GIMPで画像が開けたら、画面上部「色」のメニューの中の赤枠で囲んだ項目をいじってみて、好みの色になるように調節します。

今回は、カラーバランスのみを使用して、色を変更します。

色＞カラーバランスの順に選択すると、上記のようなウィンドウが出ます。

「調整する範囲の選択」で主にどの部分の色味を変更するかを選択します。

シャドウは暗い部分、ハイライトは明るい部分になります。

「色レベルの調整」で各色の成分を左に寄せるか、右に寄せるかを設定します。

1段目を左に寄せるとシアンが強まり、右に寄せると赤が強まる、というような具合です。

変更前←　→変更後

今回は全体的に赤っぽくしたいので、シャドウ、中間色、ハイライトそれぞれで、シアンの数値をすべて右に寄せました。

いい感じになったら、「OK」を選択します。

保存するときは、左上のファイルから、「Hair_Aka.pngに上書きエクスポート」を選択します。

これでGIMPでの作業は終了です。

xcfというGIMPのプロジェクトファイルは、継続して編集する可能性があれば、保存しておくことをおすすめします。

それでは、Unityへ戻ります。

7.Unityで画像ファイルを適用

Unityへ戻ったら、プロジェクトウィンドウを確認し、Hair_Akaが追加されていることを確認してください。

確認出来たら、ヒエラルキーからEarを選択し、インスペクターにて、色設定の「メインカラー / 透過設定（色替え）」を開きます。

「⦿色 / 透明度」と記載されている部分の「⦿」を選択します。

Select Textureウィンドウが開くので、追加したHair_Akaを選択しこのウィンドウを閉じます。

選択した時点で、シーン上の色が変わります。

ヒエラルキーからHairを選択し、

全く同じ方法でHairも変更すれば完成です！

これであなたも色改変マスター！

色改変、お疲れ様でした！

テクスチャが存在するものは、服でも肌でもなんでも色を変えることができるので、是非挑戦してみてください。