Blenderで人型アバターを作ってVRChatにアップロードする、というシリーズ記事❷です。前回FBXファイルに書き出ししてフォルダにまとめたので、今回からUnityでアバターアップロードのセッティングをしていきます。この記事では主にマテリアル設定をしています。
左図のような人型アバターを作っています。
PCデスクトップで遊ぶなら、機能的には十分なアバターが作れるように解説していきます。
以前、シンプルな猫アバターをアップロードしたときと操作は大体似てるので、細かいところでわからなくなったら以前のシリーズの記事も見てみてください。下のリンクです。
前回の記事
【VRChat】2025年版：Blenderで人型アバターを作ってVRChatにアップロードする❶～モデル準備～
lilToonシェーダーとは
lilToonシェーダーは、Unity向けの 無料のアニメ調（トゥーン調）シェーダー です。
- VRChatアバターでよく使われる
- 髪や服などに「アニメっぽい影・発色」を出せる
- 高機能で、透過・リムライト・アウトライン・マスクなど細かく調整可能
- 標準シェーダーより軽量で、見栄えも良い
3Dモデルをアニメっぽく見せるための人気シェーダーです。
前のシリーズで猫アバターを作ったときはStandardシェーダーを使いました。Standardシェーダーはどちらかというとリアル寄りの表現で、立体感や質感を出すのに向いていました。
自分はどっちかというと立体感とか出す方が好きなんですが、lilToonシェーダーでもセミリアルやイラスト風の表現もできるということで、挑戦してみたいと思います。
2Dやアニメ調表現をしたい方にも、lilToonシェーダーの導入・基礎的な使い方としてわかりやすいようにまとめていくのでぜひ見ていってください。
lilToonをVCCに登録
アバター用に作るモデルの多機能なシェーダー lilToon をUnityで使えるようにするには、２つの方法があります。
- UnityのプロジェクトにlilToonのUnityPackageを直接インポートする方法
- VCCにlilToon配布元Githubを登録して、VCC管理画面からliltoonをインポートする方法
今回はVCCにlilToonを登録しようと思います。ボタン１つでインポートできるようになるのでとても便利です。
上のlilToon公式サイトにいき、Topページの
VCCに追加ボタン
をクリックします。
CreatorCompanionを開くか聞かれるので
CreatorCompanionを開くを押します。
※CreatorCompanionを開いたままだとうまくいかなかったので、閉じておいてください。
VCCが開き、リポジトリを追加するか聞いてくるので
I Understand, Add Repositoryを押して登録します。
※パッケージのインポートやダウンロードは自己責任でやってねと注意されます。信頼できる配布元かどうか確認しろって感じです。
すると、プロジェクトのManage Packagesの画面に、lilToonのパッケージをインポートできるようになっています。
プロジェクトでlilToonシェーダーを使いたいときは、この右側の＋アイコンを押すと、簡単にインポートできます。
VCCでプロジェクトを作成
新しいプロジェクトを作成する
VCCメニューの右上に
Create New Projectのボタンがあるのでそれを押します。
New Projectのページになるので、
- Avatarsを選ぶ
- Project Nameをつける（アバターの名前などでいいです）
- Create Projectを押します
アバター用のプロジェクトを作成し、Manage Package画面でlilToonパッケージを追加します。
Open Projectでプロジェクトを開きます。
UnityにFBXファイルをインポートしてデータを開く
Unityの画面が開いたら、作ったデータをインポートします。
画面下のProject画面にAssetsファイルが表示されているので、そこに、前回アバターデータをまとめたフォルダをドラッグ＆ドロップしてインポートします。
そのとき、ノーマルマップをノーマルとしてインポートするか？と聞いてくることがあるので、Fix nowを押します。
FBXファイルをヒエラルキーにドラッグ＆ドロップすると、アバターが表示されます。
ライトの調整
Unityを開いた直後は光の影響がオフになっていることがあるため、画面右上メニューのライトアイコンをクリックしてライトをオンにします。
その周辺にある下向き▼を開いてSkyboxにチェックを入れると青空が表示されます。（背景を変えてチェックしたい場合）
また、最初はライトが逆光方向になっているのと、薄く色がついているため、Directional Lightの色を真っ白にして、回転角度を、正面から当たるようにしてください。
Directional LightをクリックしてInspectorの画面から、Transform > Rotationで回転角度、LightのColorで色を変えることができます。
マテリアル設定
lilToonシェーダーを設定していきますが、最初にマテリアルを抽出します。基本のマテリアルデータを作ってから後でlilToonシェーダーに変更します。
Unity用のマテリアルを作成する
アバターのFBXファイルを選択すると、Inspectorタブでメニューが選択できるようになります。
Materialsを選択し、Extract Materials…をクリックします。
どこにデータを作るか聞かれるので、Materialsというフォルダを作ってそこに入れておきます。
後からMaterialsフォルダを作ってマテリアルを入れることもできます。
最初は、デフォルトでStandardシェーダーが作られています。これをlilToonに変更していきます。
lilToonシェーダーの設定
ShaderをlilToonに変更します。以下の画像は全身のアトラス用マテリアルを変えてみた例ですが、詳細な設定はまた後からやります。
２Dっぽくなりましたね。まだ影とか全然ついてない状態でのっぺりしています。
下に出てる警告は、Unityが頂点データを削除することがあるけど、不具合があれば直すよ、と言ってくれてるやつなので、不具合が出てたら自動修正で直してあげましょう。何もなければ放置してもOK。
以下は各質感の付け方の基礎的な使い方です。この数値の通りにしろというものではありません。自分がこの数値にしているというものでもありません。各自で調整してください。
透過（カットアウト）
まず、透明な部分を透過させていきます。目の部分、透明な膜が覆ってるような感じにしてしまったので、ここを透過させます。
Shader…lilToon
描画モード…カットアウト
に変更します。
そのままではまだ透明になってないので
基本設定
Cutoff…0.5（デフォルト）この数値を変えると、白黒マスクを使ったときに透過範囲を調整できます。
色設定
メインカラー…白黒など目立たない色にしてアルファを0に下げる（HDRの文字を押すとカラーホイールが出てきます）
と透明になってくれます。（原則として、透明にする部分は細かいオブジェクトじゃないなら削除してしまった方がいいです）
※カットアウトは透過と不透過がはっきりわかれていて、半透明は透過と不透明までがグラデーションになっているようなマテリアルに使います。半透明を使うなら、描画モードをTransparentにしてテクスチャを利用するのがいいと思います
透過マスクを使う
まつ毛のように、透過部分と不透明部分が混ざっているマテリアルを作ります。
Shader…lilToon
描画モード…カットアウト
基本設定
Cull Mode…Off（両面を描画できます。）
色設定
好きな色に設定します
アルファマスク
まつげのアルファマスクに使う白黒のテクスチャ画像をドラッグ＆ドロップします。
発光
発光してるマテリアルを設定します。
Shader…lilToon
描画モード…不透明
色設定
発光設定 ＞発光テクスチャにチェック
色/マスク…マスクテクスチャがあれば入れる。なければHDRで色を設定する。カラー編集画面内のIntensityで発光の強度を決めます。１～2くらいが目安
以下は今回特に構わなかったけど、調整に使えるパラメータ
メインカラーの強度…マスクを使うとき、元の色の影響の強さ
蛍光…1だと暗い所で光るようになります。0だと常時光る
色の彩度なども関係するのかもしれませんが、intensityを２にしてもこのくらい光ってました…。1.6～1.7くらいがちょうどいいかも？
※VRChatのワールドがPostProcessingでBloomなどを使っている場合に限り発光の効果が出ます。
反射・メタリック・光沢
ベルトの金具のマテリアルを作っていきます（ただのCubeなので質感がわかりにくくてすいません）
Shader…lilToon
描画モード…不透明
色設定
メインカラー…メインの色
ノーマルマップ・光沢設定
光沢設定 > 反射にチェック
滑らかさ…表面の滑らかさ
GSAA…光沢のエッジがジャギジャギしたのがソフトになる
反射率…光を反射する強さ
金属度…金属っぽさ
光沢のタイプ…リアルとトゥーンがあります。
テクスチャのあるマテリアル
テクスチャアトラスなど、テクスチャのあるマテリアル。（基本的にカラー指定よりテクスチャを使った方が不具合がなくて安定します。）
Shader…lilToon
描画モード…不透明
色設定
メインカラー
色…メインの色。テクスチャがある場合は、Projectフォルダからカラー用のマテリアルを色の場所にドラッグ＆ドロップします。（隣のHDRに白以外の色が入っていると影響して色が変わるので、白にします。）
色調補正 > HSV/Gamma…色が濃いな、と思ったのでここで色を補正しました。
ノーマルマップ・光沢設定
ノーマルマップ…チェックをつける
ノーマルマップにノーマルのテクスチャをドラッグ＆ドロップ。隣の数値はノーマルの強さです。
（わかりやすいように影をつけてます）
光沢設定
反射にチェックをつける
ラフネスマップを滑らかさの欄にドラッグ＆ドロップ。右はその強さ調節の数値です。
Blenderから持ってきたラフネスマップは粗さで、Unityの滑らかさとは逆の値が入っているので、テクスチャを反転させる必要があります。反転のやり方は下で解説しています。
メタリック・反射のセクションでも書きましたが、
滑らかさ…表面の滑らかさ
GSAA…光沢のエッジがジャギジャギしたのがソフトになる
反射率…光を反射する強さ
光沢のタイプ…リアルとトゥーンがあります。
テクスチャを反転させる
テクスチャを選択し、Inspector画面
Advanced ＞Swizzle で
R, G, B を
1-R, 1-G, 1-Bに変更します。
Applyを押すと適用されます。
影の設定
lilToonで影を設定する方法は基本的には以下の２種類あります。（違うやり方をする人もいます。）
- 影設定…影色・影の境界の滑らかさ・影の入り方（1影、2影など）を調整できる。
- リムシェイド…輪郭周辺に立体感を与えるような影を入れることができる。
2種類を組み合わせて使うこともできます。セミリアルな表現をしたいときにRimShadeを使うと立体感が出ます。
影設定
影にチェック
影色１、２、３…段階的に影の色を変更・メインカラーに乗算
不透明度…不透明度、薄さ
範囲…影の広がる範囲
ぼかし…影をぼかして広げる
影を受け取る…他のオブジェクトから影を受け取る。屋根があるとバグることがあるのでオフにした方がいいかも
境界の色…影をぼかしたとき、境界に乗る色
境界の幅…境界の色を乗せる範囲
ぼかしを少なくするとアニメっぽい表現ができます。
影色１，２，３がわかりやすくなっています。
（ちなみに白目の色も影色で作っています。）
リアル調の場合、影色1，２，とかに赤味の多い色を置くと、ワールドによっては肌がめっちゃ赤くなったので、あまり色味を強くしない方がいいかもしれません…。
RimShade
RimShadeにチェックを入れる。
範囲…影になる範囲
ぼかし…影のぼかし
リムライトの細さ…フレネル。コントラストを強めてリムライトを細くする
影とRimShadeの併用
影とRimShadeを合わせることで複雑な表現、イラスト調な表現が可能になります。
リムライト
光が回り込んで輪郭にハイライトが入ります。ライト方向に応じて日向部分・影部分個別に色やぼかし量・範囲を調節できる
リムライト設定
リムライトにチェックを入れる
カラー…リムライトの色
影部分で無効化…影部分でライトがリムライトが出ないようになります。
ライト方向の影響度…数値を大きくすると直接光、間接光のパラメータを変更できるようになります。
以下に詳細説明があるので読んでみてください。
その他の面白い・便利なマテリアル設定
面白そうな設定や、使えそうな設定を紹介します。詳細は解説しません。
ラメ
ラメを散らすことができます。
メイクや衣装にどうぞ
輪郭線
拡張設定
輪郭線設定 > 輪郭線にチェックを入れる
輪郭線を入れることもできます。メッシュの形など注意しないと、そのままだとあまりうまくいきませんでした。
マットキャップ
簡易的な反射表現。テクスチャ1枚で ‘それっぽい質感’ を出せる機能です。
例えば右図では服の部分のマスクを使いマットキャップを適用しています。
マットキャップ用テクスチャが必要で、右図に映ってるものはPoiyomi Toon Shaderをインポートしたときに入ってるものを使っています。
Poiyomi Toon Shaderをインポートしたら、
Packages > Poiyomi Toon Shader > _PoiyomiShaders > Textures > Matcaps
の中にマットキャップ用テクスチャが入ってます。
Poiyomi Toon Shaderをインポートする
Poiyomi シェーダーは lilToon同様、VRChatなどでよく使われているシェーダーです。アニメ調からリアル表現まで幅が広くリッチな表現ができますが、上級者向けで、機能を絞って使わないと処理が重くなってしまいます。
今回はマットキャップのテクスチャの素材のテストのためVCC（Creator Companion）にリポジトリを追加しました。lilToonのときと同様の手順でVCCに導入すると、管理画面から簡単にPoiyomiシェーダーをインポートできます。
※マットキャップ使わないって方は導入しなくてもいいです。一応手順は解説しておきます。
以下の公式ダウンロードページにMethod2でVCCに導入するセクションがありますので、そこでAdd to VCCのボタンをクリック
（※VCCは閉じておいた方がいいです。）
VCCを開くか聞いてくるので
CreatorCompanionを開く
をクリック
VCCが開いて、リポジトリを追加していいか聞いてきます。
配布元、リンク元が信頼できるところか自己責任で確認してね、という感じです。
OKなら
I Understand, Add Repository
をクリックします。
すると、プロジェクトのManage Package画面に
Poiyomi Toon Shaderが出るようになりますので、プロジェクトで使いたいときは右側の＋アイコンをクリックするとインポートできます。
※今回はマットキャップテクスチャを使わせていただくだけなので使い方などは説明しません。こちらも人気のあるシェーダーですので、使ってみたいという方は調べて使ってみてください。
lilToon シェーダーのフォールバック
VRChatには、重いアバター、シェーダーを使っている場合、負荷がかからないよう非表示にする機能があります。その場合、フォールバックのシェーダーが表示されますが、統一されてなくてちぐはぐな見た目になってしまうことがあります。
lilToonには、フォールバックシェーダーを指定できる機能がありますので、指定しておくと、よりマシな見た目にキープできます。（フォールバックシェーダーの見た目なんて気にしない人も多いのでスルーでも大丈夫です。）
※ちなみにフォールバックシェーダーではマットキャップやノーマル、リムなどの効果はなくなります。
フォールバックシェーダーを設定する
Unlitというシェーダーで統一しようと思います。全てのマテリアルを以下のように分けてフォールバックシェーダーを設定してください。
不透明シェーダー
描画モード…不透明のシェーダーは以下のように設定します。
基本設定
VRChat > Custom Safety Fallbackにチェック
Shader Type…Unlit
Rendering Mode…Opaque
色の焼きこみ
メインカラーをHDRで設定した場合や、テクスチャの色調調整した場合、それはフォールバックシェーダーで表現されません。色を再現したいなら、調整後のカラーを焼きこんで、調整なしのテクスチャを作らなければなりません。（HDRのみの場合、白くなるだけで、色が再現されません。）
メインカラーメニュー下の焼き込みボタンを押すと、どこにファイルを作るかウィンドウが開いて聞かれます。テクスチャが入ってるファイルそのままでいいので、そこに調整済みのテクスチャを作成します。
すると自動的にメインカラーの色に新規で作ったテクスチャが設定されます。
（いらなくなったテクスチャは捨ててください）
HDRのみで設定していたしっぽや発光マテリアル、白目部分はただの白になってしまいました。
マットキャップを使った場合
マットキャップを使ったマテリアルの場合、メインカラーの強度を強くしておかないとテクスチャがあっても真っ白になってしまいます。
透明のシェーダー
完全透明のシェーダーは以下のように設定します。
基本設定
VRChat > Custom Safety Fallbackにチェック
Shader Type…Hidden
Rendering Mode…なんでもいいかもしれないけど一応Transparent
Hiddenはもうマテリアル描画なしというシェーダーです。でもそんなメッシュはそもそも消してしまうか、アルファマスクで透過部分をまとめた方がいいです。
半透明マテリアルの場合は
Shader Type…Unlit
Rendering Mode…Transparent
にします。
カットアウトシェーダー
アルファマスクを使っているカットアウトシェーダーは以下のように設定します。
基本設定
VRChat > Custom Safety Fallbackにチェック
Shader Type…Unlit
Rendering Mode…Cutout
カットアウト、半透明シェーダーでアルファマスクを使っている場合、フォールバックのシェーダーではマスクは使えませんので、透過度を焼きこんだテクスチャを生成する必要があります。
アルファマスクの焼きこみボタンはメインカラーにテクスチャをセットしないと出現しないので、アルファマスクを入れておきましょう。
アルファマスクを焼きこみをクリックすると透過度込みのテクスチャが作成され、自動的にセットされます。
こういう自動的にいい感じにしてくれるところがいいですよね。テクスチャを自分で作り直す必要がない。最高ですね。
（※ちなみにフォールバックに関係なく、動作を安定させるために色を焼きこんで使った方が良いらしいです。）
アルファマスクが焼けたら、今度は色も焼き込む必要があります。アルファと色のついたテクスチャを生成して、メインカラーにセットすれば、フォールバックのときにきちんと表示されるようになります。
マテリアル完成
こんな感じで、セミリアル＋イラスト調みたいに仕上げてみました。
この結果をふまえ、どういうパラメータをいじればいいか目安にしていただけるといいかなと思います。
マテリアル設定は楽しくて、何時間でも時間が溶けていく感じでした。
技術的にももっと素晴らしい人や工夫されてる方がいっぱいいるので、参考にしたり勉強してもっとうまくできるようになりたいです。
こうしたら良かったと思ったポイント
- セミリアルとかリアル系にするなら、メッシュはもっと割っておいた方がよかったかも
- マテリアルをあまり統合しない方がよかったかも
- 今回テクスチャアトラス作ったので、マテリアルも統合しようとして、無理やり髪・顔・身体全部１つのマテリアルにまとめました。だけどlilToonでマテリアルを作りこもうと思ったら、マテリアルは、肌なら肌、髪なら髪、それぞれにマテリアルをつけた方が作業しやすいかった…。
- 容量とか気にする必要ある…？
- これは完全に人によるんですが、見た目に凝りたいという方は、別にポリゴンの数をVRC推奨の目安に合わせなくても、重いアバター作っちゃってもいいんじゃないか…って思いました。そんなにみんな気にしてないのかも…？まぁ限度はあるかもしれないけど。
結局今回、目と髪のマテリアルはBlenderで作ってなかったけど、急遽Unity内でマテリアルを制作し、それぞれ違う設定をしました。（マテリアルのProjectフォルダで右クリック > Create > Materialで新規マテリアルを作ることができます。できたマテリアルはシーン内のオブジェクトにそのままドラッグ＆ドロップでつけることができます。）
右図：目のマテリアルを作ってマットキャップを適用してキラキラにしてみた。
続き
次回の記事
【VRChat】2025年版：Blenderで人型アバターを作ってVRChatにアップロードする❸～リグ・動き設定～
参考
lilToonフォールバックに関して参考にさせていただきました。
コメント