【VRChat】アバターの色を変える方法 その2(初心者向け)

こんばんは。kroです。
前回の記事では、Unityだけでアバターの色を変更する方法についてご紹介しました。
今日はGIMPを使ってテクスチャを改変する方法をご紹介していきたいと思います。

なお、あくまで「私の場合はこうやったら出来た」というサンプルになります。
私自身GIMPを5ミリくらいしか理解できていないので、間違っている点などあればぜひ教えてください

GIMPとは

GIMP(GNU Image Manipulator)は無償で使用できる画像編集ソフトです。
2018年9月24日現在の最新バージョンは2.10ですが、日本語化対応している2.8をインストールすることをお勧めします。
本記事でもGIMP2.8を使用しております。

まだインストールしていない方は下記リンクを参考にインストールしてみてください。
GIMPの日本語化!最新版ダウンロードからの具体的な手順と2つのDLボタンの違い・どっちをクリックするかについても解説

テクスチャ改変

それでは早速テクスチャを改変していきましょう。

3Dモデルに同梱されているテクスチャでよく見かけるのがpngとpsdです。
pngは汎用的に使われている拡張子でGIMPで開くとレイヤー1枚に、psdはPhotoshop用の拡張子でGIMPで開くとレイヤーが複数枚にわかれているというイメージでいいかと思います。

細かいことは下記リンク等で調べてください。(丸投げ)
画像のまめ知識「JPG?PSD?画像の特徴一覧」

概要

基本的にやることは下記2つだけです。
1.色を変更したい範囲を選択
範囲選択にはファジー選択、色域選択、自由選択あたりを使用します。

2.色相-彩度の機能や、カラーマッピングで色を変更
色の変更には、色相変更や、カラーマッピング変更を使用します。

場合によっては1がいらないこともありますので、それぞれ使い分けていってください。
例)画像全体の色を調整する場合、psdで変えたい部分のレイヤーがわかれている場合など

範囲選択

サンプルとして、櫻歌ミコ第2形態の髪の色を変更していきます。
まず、tex001.pngをGIMPで開くと、下記のような画面になるかと思います。
髪の色、顔の色、目と瞼の色あたりが設定されているようですね。

もしレイヤー全体の色を変更したい場合は、下記説明は飛ばしていただいて構いません。
今回は髪の部分だけを変更したいので、そこだけを別レイヤーにしてから色を変更していきます。

レイヤー複製

まず、選択範囲以外に変更がかからないようレイヤーをわけていきます。
複製元のレイヤーを右クリックして複製。名前は適当に変更してもらって構いません。

レイヤーメニューからアルファチャンネルを追加しておきます。
これをしておかないと髪以外の部分を消去した際に白塗りになってしまいます。

範囲指定

続いてファジー選択、または色域選択をしていきます。
ファジー選択も色域選択もクリックした場所の近似色をまとめて選択してくれる機能ですが、ファジー選択は連続した箇所のみを、色域選択は離れた場所も含めて選択してくれるという違いがあります。

これについてもテクスチャによって使いわけてみてください。
今回の場合、髪の部分が隣接していないので色域選択のほうがよさそうです。

色域選択ボタンを押したら、変更したい箇所を決めて左クリック→ドラッグします。
ドラッグすると選択範囲の閾値が大きくなり、色の差が大きいところまで選択されるようになります。
下のgifでドラッグすると選択範囲が広がっていることがわかるかと思います。

さて、ここまでで髪の部分の選択はできたのですが、顔や目の部分も選択されてしまっています。
このような場合は他の選択方法を組み合わせて、髪だけを選択するようにします。

今回は自由選択使いたいと思います。
自由選択はクリックしたところを頂点として範囲選択できます。
大体この選択とファジー選択でうまくいくと思います。

自由選択を選んで、モードを交差選択にします。

始点を選んでから、選択したい範囲を囲むようにクリックしていきます。
細かいところは拡大して選択していくといいと思います。(下のgifではやってませんが)

さて、これで髪の部分のみ選択することができましたので、髪以外の部分を削除します。
選択>選択範囲の反転をクリックすると髪以外を選択することができます。
その後、編集>消去、もしくはDeleteキーを押すと選択範囲を削除することができます。

ここまでで髪だけのレイヤーを作成することができました。
レイヤーの横の目のボタンを押すと、表示/非表示を変更することができます。
綺麗に髪だけのレイヤーができていることがわかるかと思います。

色変更

レイヤー分けできたら色を変更していきます。

色変更は色相-彩度変更、着色を主に使います。(私の場合)
それ以外にもカラーマップの回転も使えるようなのでご紹介します。

それではそれぞれの機能について見ていきたいと思います。

色相-彩度

色相、輝度、彩度の3種類を変更することができます。
以下、画像をクリックするとgifアニメーションを開きます。

色相:色合いです。色そのものを変える場合はこの値をいじります。
色相

輝度:明るさです。高くすると明るく(白く)、低くすると暗く(黒く)なります。明度とも。
※明るさを変える場合は、ここではなくレベルとトーンカーブを使うといいらしいです。
輝度

彩度:色の鮮やかさです。高くすると鮮やかに、低くすると淡く(グレーに)なります。
彩度
参考:明度と彩度の違い

この3つを組み合わせて好きな色に変更していきましょう。
Unityで変更したときにはできなかったパステルカラーもできますよ。

また、基準色の部分でマスター以外を選ぶと、その色のみを変更することができます。
ですので、レイヤーわけされていなくても元々の色の違いが大きければこの機能だけでも色を変えられます。

マスタを選んで色相+180の場合と、赤を選んで色相+180の場合の場合です。
耳の部分の色が若干違っていることがわかると思います。

着色

基本的には先にご紹介した色相-彩度の変更のみで色の変更ができると思います。
しかし、色相の変更ではうまく変えられない部分があります。
それは、白、グレー、黒といったいわゆる無彩色です。
これらの色は元々色合いがないので色相を変えても色が変わりません

そんな時は、着色を試してみてください。
着色は、画像をグレースケールにしてしてその上に色を重ねる処理とのことです。
サンプルとして白い画像の色を変更してみました。
綺麗に色がかわっていることがわかるかと思います。

ということで無彩色の色を変更する場合は着色を試してみてください。

カラーマップ回転

カラーマップ回転を選ぶと下記のような画面が出てきますので、変更前後の色を指定してみてください。
プレビューでいい感じになったらOKでいいかと思います。(使ったことがない)

画像の保存、エクスポート

テクスチャの変更が終わったら最後に画像を保存、エクスポートします。
まずは、せっかくレイヤー分けしたので次回以降のためそのデータを保存しておきましょう。
ファイル>名前を付けて保存でxcfファイルとして任意の場所に保存してください。

画像の保存ができたらUnityに持っていくためにファイルをエクスポートします。
基本的には元の画像と同じ拡張子でいいと思います。
ファイル>名前を付けてエクスポートから任意の場所にエクスポートしてください。

ここまででテクスチャ改変は完了です。お疲れさまでした!

Unityへの反映

テクスチャができたらさっそくUnityに反映します。
Unity Project上のTextureフォルダにエクスポートした画像をドラッグ&ドロップします。

マテリアルにテクスチャを反映して完了です!

おわりに

GIMPを使っての範囲選択(レイヤーわけ)と色変更についてご紹介しました。
長くなってしまいましたがいかがだったでしょうか。
色々とご説明しましたが、結局のところ色々触って試行錯誤するのが理解に繋がると思います。

色を変えたいところを選択→色相-彩度変更と繰り返していけばあなただけのアバターの完成です!
みなさんもぜひチャレンジしてみてください!

そのうちテクスチャに柄を入れる方法についても説明しようと思います。
それではよきVRChatライフを~