第2回 ユニティちゃんの色を変えよう~テクスチャ改変編~
ユニティちゃん以外のアバターも原理は一緒!色改変を覚えよう!
第1回を終えてunityの操作方法がわかってきたと思います。もしわからなくても大丈夫!ゆっくりでいいから自分のペースで進めていきましょう、誰も急かす人はいませんから。
さて、第2回からはいよいよ本格的にユニティちゃんに機能を実装、改変していきます!
第2回はこんな感じで進めていきますよ
STEP3.改変したアバターをアップロードしよう(UI変更!ぷちコラム2参照)
~STEP1.改変に必要なものを準備しよう~
今回の色改変、もちろん何もないところから改変することはできません。
しっかりと準備するものが必要です。
前回から使用しているunity
以上二点になります。unityは既に皆さんインストール済みですから問題ありませんね。
画像編集ソフトですが使いなれているものがあればそちらを使用していただいてかまいません。今回は無料かつ優秀な機能を搭載しているGIMPを使用していきます。
GIMPのダウンロードはこちら
~STEP2.実際に色を変えてみよう~
色を変える前にまずはunityがどうやって3Dモデルに色づけしているかを説明しなければなりません。
説明なんていらない、即実践だ!という方は少しだけ読み飛ばしてください。
=ここから説明=
~material(マテリアル)ってなぁに?~
3Dモデルは本来色がついていません。
3Dモデルのファイルを単体で開くとわかりますがグレー一色です。
3Dモデルをさらに近くで見てみましょう。
無数の頂点と辺で形作られていることがわかるでしょうか?
この無数の頂点と辺で作られたパーツを小分けにしたものがマテリアルと考えてください。
ちなみに各マテリアルに色付けする際に必要となる画像をテクスチャといいます。
ユニティちゃんで考えるとbody, eye_L1, eye_R1, eyebase, eyeline, face, hair, mat_cheek, skin1 と分けられていますね。
「でもそんなたくさんある頂点と辺をどうやって画像(テクスチャ)で塗り分けしてるの?」と思ったあなた、鋭い!
実は各マテリアル、既にテクスチャのどこを参照するか決まっています。
例としてユニティちゃんの上着がテクスチャのどこを参照しているか見てみましょう。
下の画像で参照されている部分がオレンジ色に変化していることがわかるでしょうか?
このように3Dモデルがテクスチャのどこを参照しているか確認することをUV展開といいます。
ユニティちゃんは既にマテリアルの割り当てが終わっていますがアバター自作勢は自力でモデルをUV展開し、テクスチャを設定してあげる必要があります。
そのことを考えると自作勢の方々は本当にすごいですよね。
=ここまで説明=
さて、それでは実践です。説明を読み飛ばした方も
各パーツごとにマテリアルというものがあって、そこにテクスチャ(画像)を指定してあげれば色が変わる
程度にはマテリアルを認識しておいてくださいね。
まずは改変する元の画像をunityから見つけ出しましょう。
改変元となるテクスチャたちはUnitychanShaderの中にあるTextureファイルの中にあります。
GIMPを起動させてunityにあるテクスチャをそのままドラッグ&ドロップします。
GIMP上でテクスチャが開かれましたね。
ここからはGIMPの画像編集の時間です。
左上のメニュー欄から色(C)のHue-Saturationをクリックしてください。
六色に分けられたウィンドウが出てくると思います。
最初は中央のマスターが選択されているのでそのまま下のHueのバーをスライドさせてみましょう。
全体の配色が変化しますね。
水色の服だけ色を変えたいという人も安心してください、一部の色のみ変化させる方法もあります。
マスターが選択されていた部分を一番変更させたい色に近いものに変えてください。
そうしてふたたびHueを変化させると選択した色の部分のみ色が変わります。
HueのしたのLightnessは画像の明度を操作することができます。
さらにその下のSaturationは画像の色の彩度を操作することができます。
以上の機能を駆使して自分の好みの色に変更していきます。
納得できるレベルになったらテクスチャとして出力しましょう。
メニュー欄のファイルから名前を付けてエクスポートを選択します。
この時出力するファイルの拡張子を変更できるのでPNG形式に変更しておきましょう。
後々手を加えたくなった時に編集が少し楽になります。
エクスポートを押してもまたウィンドウが出てくるのでこちらは何も変えずにエクスポートを押してください。
エクスポートが完了するとunityの中にファイルが追加されましたね。
この調子で髪と右目、左目も好みの色に変えていきましょう。
色の調整が終わりました。次は追加したテクスチャを各マテリアルに反映させていきましょう。
マテリアルはModelsの中にあるMaterialsの中にあります。
初めに一番わかりやすい服の色を変えましょう。
マテリアルのbodyを選択してInspecterの右上にある服のテクスチャ画像をクリックします。
そうするとSelect Textureのウィンドウが出てくるのでさっき追加したテクスチャをクリックしてください。
はい、これで服の色が変わりましたね。
他のマテリアルも同じように追加したテクスチャを指定していきましょう。
これでオリジナルカラーのユニティちゃんの誕生です!
~STEP3.改変したアバターをアップロードしよう~
オリジナルユニティちゃんが完成したら早くVRchatで動かしたいですよね、改変したアバターをアップロードしましょう!
まず改変したユニティちゃんを選択してInspecterの下にあるAdd Componentをクリックします。
そうすると追加機能の一覧が出てくるのでVRC_Avater Descripterを探し出してください。
クリックするとInspecterに追加されます。
VRC_Avater Descripterは今後も使用することになりますが今回は簡単に二つだけアバターに設定を加えます。
一つ目はアバターの視点設定です。
ユニティちゃんの頭上に白い球が追加されていたことに気づいていたでしょうか?
これがVRchat上でのプレイヤーの視点になるためできる限りアバターの目の位置に合わせてあげると良いでしょう。
アバターの両目の間、ちょうど目の前あたりにあるのがちょうどいい…と個人的には思いますが見え方の好みもありますので各自で調節してください。
次はアバターの性別指定です。
イスに座った時などのモーションが少しだけ変化します。
ユニティちゃんは女性のためFemaleですね。
これでVRC_Avater Descripterの最低限の設定が終わりました。
いよいよアップロードです!VRC SDKのShow Build Control Panelをクリックします。
~注意!~
アバターのアップロード手順の表示が少し変更されました(2019.8.26)
最新のアップロード表示についてはぷちコラム2を参照ください。
表示が少し異なるだけで流れはこちらと同じです。
最初はアカウントのログインを要求されるのでIDとパスワードを入力してログインしてください。
すると新しくウィンドウが出てくるのでBuild&Publishをクリック!なにやら警告が出ていますがとりあえずは無視して大丈夫です。
アップロードは目の前です、アバターの名前を入力し、アップロードすることに同意するチェックを付けたらUploadをクリックしましょう!
あとは少し待つだけでVRchat上にアバターが反映されます、さっそく確認してみましょう。
…せんせー、ユニティちゃん真っ黒です。
そう、じつはユニティちゃんはそのままアップロードしても真っ黒な姿になってしまいます。
その原因はシェーダーにあります。
~shader(シェーダー)ってなぁに?~
シェーダーとはマテリアルの機能の一つでテクスチャの質感等を変化させることができます。
シェーダーの自由度はかなり広く、ドット絵調にしてみたりモザイクをかけてみたり…シェーダーを自作して芸にまで昇華しているユーザーもいるくらいです。
そんなシェーダーなのですがユニティちゃんにデフォルトで設定されているシェーダーの機能は…
「体内の光源に応じてテクスチャを反映させる」仕様になっているらしいのです。
当然体内に光源なんて持っていませんからテクスチャ全てが影になってしまい真っ黒になっていた、ということだったんですね。
それならば解決策は簡単、他のシェーダーに設定しなおしてしまえばいいのです。
今回は「光源の影響を受けずにテクスチャを原色のまま反映させる」機能を持ったUnlitシェーダーを使用しましょう。
Unlitの中のTextureを選択します。
シェーダーを変更したことによって服の色が明るくなったことがわかりますか?ほかのシェーダーもUnlitに設定していきましょう。
…せんせー、ユニティちゃんが闇の力に目覚めました。某アンパンの男みたいなほっぺになってます。
eye_L1, eye_R1, mat_cheek のマテリアルは透過処理が加えられているのでただのUnlitだと透過を反映してもらえないのです。
透過を有効にしてくれるUnlit Transparentに設定しなおしましょう。
シェーダーの設定が終わったらアバターのアップロードのやり直しです。
今回はちゃんとテクスチャの色が反映されましたね。
色々ありましたがこれでオリジナルカラーのユニティちゃんをアップロードすることができました、おめでとうございます!
これであなたも改変勢の一員です!
色改変ってこんな大変なの…面倒臭い。と思った人、もっと手軽な色改変の方法がありますよ。
テクスチャを改変せずにマテリアルの設定だけで色を変える方法…それはまた次の記事でご紹介します。
解説の通りに進めたつもりなのですが、VRC_Avater Descripterが出てこないのですが…
何か導入をし忘れているのでしょうか?
コメント、質問ありがとうございます。
VRC_SDKの導入を忘れている、ということはありませんか?
SDKを導入済であれば検索欄(虫眼鏡マークのところ)にVRCと打ち込むと名称に”VRC”を含むコンポーネントが一覧で表示されるためそこから再度探してみてください。
不明点、解決しない点がある場合はお気軽にVrchatにログインしHerokichiにお聞きください。