はじめに
テクスチャを使ったVRChatアバターの色改変の方法を紹介します。
今回紹介する方法は色を細かく変えれます。
が、パラメーターなどで数値の操作はできないので注意してください。
パラメーターなどで数値を操作する色変更を行いたい方はこちらをご覧ください。
テクスチャ色改変の方法
テクスチャの色改変方法は主に下記の3つになります。
・基本は色相明度彩度で色を変更
・余裕があればさらに画像を重ねて質感を改変
・上級者はグラデーションマップやブラシで描いて色を置き換え
この3つについて解説します。
テクスチャの下準備
BOOTHで幽狐さんのモデルを購入しDL。
![](https://signyamo.blog/wp-content/uploads/cocoon-resources/blog-card-cache/aa276688ca897830dad3d33749af6eec.jpg)
Unityに読み込みます。
VRChatのアバターデータ(.Prefab)を探します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-42-11.jpg)
Hierarchyにモデルをドラッグ&ドロップ。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-43-8.jpg)
モデルのデータを開きます。
メッシュのデータを選択。(Armature以外)
![](https://signyamo.blog/wp-content/uploads/2022/03/image-44-11.jpg)
Inspectorを確認。
Materialを開きます。
(今回の場合Costumeがマテリアルの名前です。その左下にある▼ボタンを押してください。)
中に割り当てられたテクスチャの画像を選択。
![](https://signyamo.blog/wp-content/uploads/2022/04/dc55e8919c0d4666fa3e70110f3bec9b-1.jpg)
ProjectでTextureの画像を確認。
クリックで選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-46-9.jpg)
Ctrl+Dで複製。
バックアップを取ります。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-47-9.jpg)
先ほど確認したアバターのマテリアルをProjectで探して選択します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-50-8.jpg)
Inspectorを確認。
テクスチャをクリック。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-51-11.jpg)
ProjectでTextureが強調表示されます。
複製前の物が割り当てられてる事が確認できます。
この状態だとモデルの.unitypackageを読み込み直した際にテクスチャが色改変前に戻ります。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-52-11.jpg)
なので複製した方のテクスチャを割り当てます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-54-8.jpg)
マテリアルのテクスチャの所に複製した方の画像をドラッグ&ドロップ。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-53-8.jpg)
Projectで複製した方の画像を右クリック。
Show in Explorerを押します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-48-9.jpg)
これでテクスチャの下準備が完了です。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-49-8.jpg)
ここに表示されたテクスチャに編集を加えていきます。
色相・明度・彩度の改変
画像を任意のペイントソフトを開きます。
今回はClip Studio Paintを使います。
![](https://www14.a8.net/0.gif?a8mat=3HQXIN+4YM29E+3AP2+63OY9)
![](https://signyamo.blog/wp-content/uploads/2022/03/image-55-8.jpg)
自動選択ツールを使い色を変えたい部分を選択。
※設定は下記の通りです。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-56-8.jpg)
編集 → 色調補正 → 色相・彩度・明度を選択します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-57-9.jpg)
これで色を変える事で色変更ができます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-58-9.jpg)
ファイル → 保存で上書き保存。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-59-8.jpg)
Unityに戻ると色が変わってます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-60-6.jpg)
これで色相・彩度・明度の色替えが完了です。
画像を重ねて載せて質感改変
画像素材をレイヤー効果を使って質感を合成します。
よりオリジナリティーの高い色改変ができます。
Pixabayで星空と検索して出てきた素材やDesignCutsの素材を使います。
レイヤーを開きテクスチャの上部にドラッグ&ドロップで読み込み。
![](https://cdn.pixabay.com/photo/2016/11/29/05/45/astronomy-1867616_1280.jpg)
レイヤーの上部分に画像素材をドラッグ&ドロップで読み込み。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-61-6.jpg)
通常の上にマウスを移動します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-62-7.jpg)
マウスの中ホイールを上下に移動。
合成モードを変えます。
気に入った質感になりましたら固定。
![](https://signyamo.blog/wp-content/uploads/2022/03/Animation1-3.gif)
画像を上書き保存。
これで画像を重ねて載せて質感改変が完了です。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-63-8.jpg)
グラデーションマップorブラシでの改変
ここからは上級者向けテクニックを紹介します。
まず、なぜこれが必要かを解説するために『色相・明度・彩度の問題点』を紹介します。
色相・明度・彩度の問題点
イラスト系の影は下記のように作られます。
・明度を下げる
・色相を青色方向に寄せる
・彩度を少し上げる
色をそのまま暗くするだけでは上手く行きません。
![](https://signyamo.blog/wp-content/uploads/2022/03/ef3756da26982835630989048eb85a59.png)
色相・明度・彩度は全体の色相の色を変えます。
すると元の色によっては“影の色よりも光が当たった所が青みに寄る”という問題が発生します。
これが起こると不自然な影の色になります。
その他にもいくつか不自然に見える箇所が出てくることがあります。
![](https://signyamo.blog/wp-content/uploads/2022/03/5ca0ea3207c4fc6818709bf3f45be515.png)
色相明度彩度問題の解決法
解決方法は下記の3つ。
・グラデーションマップで色変え
・ブラシで塗り+レイヤー効果で色を変更
・Photoshopなら色の置き換え
![](https://signyamo.blog/wp-content/uploads/2022/03/5bf2e2dc6f4b97b7c7df39007ee63c9e.png)
現状どれも完璧な解決策は無いです。
一長一短があります。
Clip Studio Paintでも使える方法は下記の2つ。
・グラデーションマップ
・ブラシで塗り+レイヤー効果
この2つについて解説します。
グラデーションマップ
これは一度全ての色をモノクロに変換してからその明度に合わせて色を置き換える方法です。
Photoshopの色の置き換えも似たような処理になります。
編集 → 色調補正 → グラデーションマップを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-66-7.jpg)
これで意図的に暗い色に不自然な色を置かなければ綺麗な色変更ができます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-67-4.jpg)
暗い部分を青み、明るい部分を黄色みの寄せるイメージで大丈夫です。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-68-4.jpg)
これでグラデーションマップの色の置き換えが完了です。
ブラシで塗り+レイヤー効果
これは不自然な色を作ってから不自然な個所をブラシで塗ってカラー合成修正する方法です。
まず説明の為、色相・明度・彩度で不自然な色味を作ります。
目の上(反射光)部分が赤紫になり必要以上に目立ってます。
※説明の為、目以外の色味を調整しました。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-65-9.jpg)
新規レイヤーを1枚作製。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-70-4.jpg)
レイヤー効果をカラーに変更。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-71-4.jpg)
この状態でエアブラシなどで不自然な個所に青色を塗ります。
すると修正できます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-72-4.jpg)
これで明度を維持して色相を変更する事ができました。
![](https://signyamo.blog/wp-content/uploads/2022/03/Animation2-2.gif)
完璧な解決策は無い
グラデーションマップは問題が2つあります
・高い色彩感覚が無いと上手くできない
・色相の変化が消してしまう
ブラシで塗ってレイヤー効果にも問題が2つあります
・高いブラシの操作技術が要求される
・上手く塗らないと元の質感から変わってしまう
この2つは上級者向けの技術です。
基本は色相・明度・彩度を使います。
目で分かる問題が発生した時だけこの2つを使って色を変えます。
どちらを使うかはテクスチャの状態に合わせて使い分けてください。
このような改変を行うとモデルの色を変えることができます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-73-4.jpg)
![](https://signyamo.blog/wp-content/uploads/2022/03/image-81-5.jpg)
おまけ1:白色について
白色にしたい場合は似た色を選択してグラデーションマップでモノクロ化することをおすすめします。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-74-6.jpg)
この時モノクロの配分は元の色に合わせて変えます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-75-5.jpg)
おまけ2:色が黄色みがかってる場合
HierarchyでDirectional Lightを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-76-5.jpg)
Inspector → Colorを確認。
黄色みがかってます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-77-6.jpg)
この色を白色に戻します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-78-4.jpg)
すると黄色みが無くなります。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-79-4.jpg)
おまけ3:白色が暗い場合
Materialのshadeの色を調節してください。
白はかなり明るい色にしないと暗く表示されます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-80-5.jpg)
これで白色の改変が完了です。
まとめ
今回はアバターのテクスチャ色改変方法を紹介しました。
無料のペイントソフトKritaを使った方法についてはこちらで解説。
ぜひこちらもご覧ください。
コメント