前提

3回目である程度作成したベーステクスチャを完成させました。ベーステクスチャはシェーダーを設定しながら情報量の調整を行うため、現時点でも完全にFIXではありません。完成まで長く付き合うテクスチャとなります。

前回からの調整点① 色味の調整・ディテールの作成

色味をデザインに近づけました。【下図↓】色味は影・光・アウトラインをシェーダーで設定したときに印象が変わることが多いため、今後も色味を調整していくことになります。

ベーステクスチャ（素体）の調整前と調整後

ベーステクスチャ（服）の調整前と調整後

また、モデルの形状が整ってきたためUVの大きな変更もないと判断し、テクスチャにディテールを作成しました。髪の先端の筋、目の雰囲気、耳の毛の細かい形、服の模様、しわの形などのディテールを追加しています。シェーダーを設定していると「もう少しディテールを作成したほうがいいかも」「逆に情報が多すぎるかも」となることがあるため、今後もベーステクスチャは調整が必要になります。【下図↓】

ベーステクスチャにディテールを追加

前回からの調整点② マスクの下準備

ベーステクスチャの色味調整・ディテールの作成が終わったら、髪の毛のH型ハイライトなどをベーステクスチャにラフとして描いておくと、今後行うマスク作成に役立ちます。ベーステクスチャにはハイライトは不要なので、ラフを書いた後はそれらのレイヤーを非表示にしておきました。【下図↓】

ベーステクスチャにラフで描いておくハイライトの例

ハイライトのラフは、ハイライトのマスクにそのまま使用できます

※【補足】ベーステクスチャにハイライトが不要の理由
ハイライトは「光が当たる部分に作られる」という特性上、「モデルが逆光になったときはハイライトを表示しない」という処理を行いたいと考えています。ベーステクスチャにハイライトを描いてしまうと、ライトの当たり方によらず常にハイライトが表示されてしまうため、ハイライトはベーステクスチャに使用せず、シェーダーで別途設定する形をとりました。

前提

3回目までのモデルには仮でジョイント・スキンウェイトを入れていましたが、今回でFIX想定まで調整しました。

ジョイント・スキンウェイトの確認と調整

VRChatで使用するにあたり、一般的な人型のキャラクターのモデルは「Humanoid」のリグで動作します。【下図↓】

人型のモデルは「Humanoid」で設定します

「Humanoid」において必要なジョイントが複数ありますので、これらが全て揃っているか確認しておきます。詳しくはVRChat公式のドキュメントに記述がありますが、緑で示されている2種類の二重丸のジョイントを最低限作成しておけば大丈夫とお考えください。そのジョイントを使用しない場合でも、ジョイントを作成だけしておいてスキンウェイトを0としておけばOKです。【下図↓】

「Humanoid」で必要なジョイントとその割り当て例

また、上記に挙げた必要最低限の骨以外にも、パーツや揺れ物として使用するジョイントを作成します（揺れ物の設定の紹介はコラム6回目で予定です）。今回のモデルでは髪、胸、ネクタイ、スカート、脇腹のベルトなどがパーツや揺れ物として使用するジョイントにあたります。

ジョイントの方向付け

【 動画06:38～15:36】

ジョイントの配置・スキンウェイト作成がある程度終わったら、ジョイントの方向付けを行います。人型モデルをVRChatで使用できるよう、ジョイントをもとにして「Humanoid」でリグが組まれるのですが、このリグをVRChatでうまく動かすようにするために必要な作業になります。うまく設定ができていないと、VRChatでアバターを使用するときに関節の曲がり方がおかしくなったり、トラッキング時に想定通りに動作しなくなったりします。ここでは私が行っている方向付けの方法の一例を紹介します。

◆⓪ジョイントの方向付けを行う前に、モデルのスキンバインドは解除しておきます（スキンバインド解除前に、スキニングが終わったモデルはスキンウェイトのコピー元として別シーンデータに書き出しておくのがおすすめです）。モデルのスキンバインドを解除する理由は、スキンバインドを解除していない状態でジョイントの方向付けを行うと、ジョイントが回転した際にモデル形状が変形してしまうためです。【 動画06:42～06:51】

◆①「ローカル回転軸の表示」と「ジョイントの方向付け」
全ジョイントを選択した後「ローカル軸の表示の切り替え」をクリックし、ジョイントの方向をビューポートに表示します。【 動画06:51～07:18】その後、すべてのジョイントの親であるHipジョイントのみを選択し、以下のオプション内容で「適用」します。【 動画07:18～07:32】【↓以下】

ジョイントの方向をビューポートに表示した状態

「ジョイントの方向付け」オプション場所

「ジョイントの方向付け」オプション内容

②ジョイントの方向付けの修正
その後、方向付けがうまくいっていないジョイントの方向付けを手で調整します。【 動画07:32～15:03】
ジョイントの方向付けについて、詳しくは以下の「読んで触ってよくわかる！Mayaを使いこなす為のAtoZ　第22回：ゲームでのスケルトン作成」に記載されていますのでぜひ見てみて下さい。
また、方向付けを行った状態のデータは今回のサンプルのMayaシーンデータがわかりやすいと思います。一例としてみていただければと思います。

③モデルの再スキニング
ジョイントの方向付けが終わったら、方向付けが終わったジョイントとモデルを再度スキニングします。⓪で用意しておいたスキンウェイトのコピー元データを読み込んで、スキンウェイトをモデルにコピーして作業完了です。

こうして調整したものは、以下のようになっています。【↓以下】
私のMayaサンプルデータでも確認できます。方向付けの軸方向など、ぜひデータを参考にしてみてください。VRChatで確認した際に不具合が出るようであれば、ジョイント位置・方向付け・スキンウェイトを都度調整していきます。

ジョイントの方向付けが完了した状態

※【補足】ジョイントの方向付けについて
今回紹介したサンプルデータのジョイント位置・ジョイントの方向付けはあくまで一例です。モデルを使用する用途で適切なジョイント位置・ジョイントの方向付けの仕様が変わるので、チームでのゲーム制作などではリグを組む方（モーションデザイナーの方など）に確認して方向付けを行うのがよいです。
ジョイントの方向付けを直す必要が出てきた場合でも、スキンウェイトを付けたモデルを持っておけば、ジョイントの方向付けを直したモデルにウェイトをコピーするだけで作業がすぐ終わります。方向付けは「違っていたら直す」という感じでとらえておいて大丈夫です。

前提

いよいよ、シェーダーを使った絵作りを行っていきます。モデルの形状を作るときは、デザインを見たりトレースしたりしながら進めました。シェーダーでの絵作りも同じく、デザインを見ながら進めます。「デザインに描かれている要素を、シェーダーでどうやって表現するか？」ということを考えていく必要があります。

「デザイン」と「ベーステクスチャをのせたモデル」を比較してみると、ベーステクスチャのみのモデルにはデザインには様々な要素が足りていないことがわかります。シェーダーを使うことで、デザインに乗っている要素をモデルに乗せていくこととなります。【下図↓】

「デザイン」と「ベーステクスチャをのせたモデル」の比較

今回は自分で作成したデザインなので、ある程度自分の中で作成すべき要素は把握できていますが、他の方がデザインされたものの場合、その方へのヒアリングが必要になります。表現の指針を確認したり、どうしても難しい表現がある場合は逐一相談したりしつつ進めていくのが理想です。

使用想定のシェーダー

今回使用を想定するシェーダーは
・「ユニティちゃんトゥーンシェーダー2.0（以下UTS2.0）」
および
・「liltoonシェーダー（以下liltoon）」
となります。
どちらのシェーダーもマスクは同じものを使用でき、設定項目もほぼ同じのため、片方の使い方がわかればもう片方の設定もある程度容易です。それぞれのシェーダーには公式のドキュメントが用意されており、設定・使い方が詳しく書いてあるため、ここでは両シェーダーの詳細な使い方は省略します。上記シェーダーのリンクはとても勉強になるので、ぜひご確認ください！

シェーダーで作成する要素の概要

今回のモデルでは、Unity上でシェーダーの以下の要素を順に設定していきます。

⓪準備（ベーステクスチャ・眉毛の描画順変更）
↓
①アウトライン（輪郭線）
↓
②影系（影色・影マスク）
↓
③光系（ハイライト・matcap・リムライト）
↓
④全体調整・その他表現（半透明表示・自己発光・ファーシェーダーなど）
↓
⑤実機確認・調整・完成
※UTS2.0とliltoonでは、各要素の呼び名が少し異なることがあります。

要素を設定していく順番は特に決まってはいませんが、イラストを描くときの一例である、輪郭線（主線）→影→光→全体調整という流れがわかりやすいため、その順で紹介しています。
シェーダーで作成する要素は複数あります。複数の要素を同時に進めると、今何をやっているかが把握しづらく調整も難しくなるため、このような流れで作成を行っています。で上記の要素を順に適用したgifがこちらです。【下図↓】

シェーダー設定の一連の流れ

⓪準備

◆ベーステクスチャ（BaseMap/メインカラー）

UTS2.0 : BaseMap

liltoon : メインカラー

ベーステクスチャを上記にセットします。ベーステクスチャの隣にある色は白（RGB(255,255,255)）にしておきます。

◆眉毛の描画順変更
Mayaで見た状態では、眉が前髪に隠れてしまっています。そのため、デザインに合わせて眉が前髪より前に出るように描画順を変更しておきます。描画順の変更は①アウトラインと同じタイミングで行ってもOKです！描画順の設定については、説明が長くなるため各シェーダーのドキュメントをご確認ください。

①アウトライン

◆Outline/輪郭線

デザインでアウトラインに該当する部分の一例

モデルの輪郭線です。アウトラインは主に色と太さを調整します。初期設定ではモデルの場所によらず太さが一定になっているので、アウトラインの太さを調整するためのマスク（アウトラインマスク）を作成し、モデルの部位により太さを変更します。
太さを変更する理由は主に以下の2つとなることが多いです。
・主線の抜きの表現を行う場合（例：髪の毛の毛先などを細くする場合）
・アウトラインの表示の不具合がある場合（例：複雑なメッシュ形状の部分のアウトラインが崩れてしまうため、細くしたり消したりする場合）

UTS2.0 : Outline

liltoon : 輪郭線

②影系

デザインで影に該当する部分の一例

影は以下の理由のため、扱いが難しい要素となります。

・①「ライトの当たり方」「モデルの形状/法線」「影マスク（以下で解説）」により影の場所や範囲が変化するためです。場合によっては影をベーステクスチャに描くことで、影の位置を固定してしまう（ライトの当たり方によらず、ずっと影として表示される）ほうが適切なこともあるため、影を移動させるか固定してしまうかを判断する必要があります。

・② ①に関連して、影が移動するため、デザインと乖離しすぎない適切な影として成立させることが難しいためです。

・③ ①で前述したように、影は「ライトの当たり方」でその位置や形状が変化します。そのため、影を設定しながらライトの当て方を変えて、影の場所や範囲が適切かを判断する必要があります。これを行うには、Unityで
・影マスクやモデル形状/法線を設定する
・ライトを回転させて影の場所と範囲を確認する
・再度、影マスクや法線を設定する
・（繰り返し…）
というトライアンドエラーが必要になります。

ライトの回転をUnityのTransformで毎回操作するのは手間がかかります。そのため私は影を設定・調整する前に、ディレクショナルライトの回転値にキーを打ち、モデルのライトの当たり方を簡単に操作できるようにしています。こうしておくことでAnimationウィンドウのバーをスライドさせたり再生ボタンを押したりする簡単な操作で、モデルに当たるライトの方向を変えることができます。【↓下図】

ディレクショナルライトを操作しやすくするための一例

ディレクショナルライトの回転値にキーを打っておくと、バーをスライドさせることでライトの回転を簡単に行えるようになります

◆影色（1st ShadeMap 2nd ShadeMap / 影色1 影色2 影色3）

UTS2.0 : 1st ShadeMap 2nd ShadeMap

liltoon : 影色1 影色2 影色3

モデルに落ちる影の色を設定します。影色を厳密に決めたいときには、影として表示されるテクスチャを作成して設定できます。影を設定し始める際には、ひとまず白（RGB(255,255,255)）より少し暗いグレーにしておき、影を調整しながら色味を変えたり、影用テクスチャを作成したりすると良いです。

◆影マスク（Shading Grade Map/AO Map）

UTS2.0 : Shading Grade Map

liltoon : AO Map

前述したように、ライティングによりモデルに落ちる影が移動します。影マスクは、影の入りやすさを調整できるマスクです。白に近いほど影が落ちにくく、黒に近いほど影が落ちやすくなります。

影マスクを作成する前に、モデルの法線を調整しておきましょう。前述したように、影の入り方は「モデルの形状/法線」によっても結果が大きく変わるためです。例えば、顔は形状の凹凸が多く影の落ち方が不安定になりやすいため、球の法線を顔のモデルに転写することが多いです。【↓下図】
また、モデルの部位によってはソフトエッジとハードエッジを切り替えて設定します。

顔の法線を転写する前（左）と転写した後（右）

上記のように法線を調整して、仮で設定した影色である程度いい感じの影となってきたら、そこで初めて影マスクを設定して影の入り方をコントロールしていきます。

③光系

◆ハイライト（HighColor/反射）

デザインでハイライトに該当する部分の一例

髪の毛や金属のハイライトです。ハイライトは、光の当たる部分に作られる強い光です。後述するリムライトよりも強い光を意識して設定するとよいでしょう。
ハイライトは、「光が当たる部分に作られる」という特性上、「逆光になったときにハイライトを表示させない」という処理を行います。ハイライトをベーステクスチャに描いてしまうと、ライトの当たり方によらず常時表示されてしまい、ハイライトらしく見えづらいためそのような処理を行います。
ハイライトマスクは、ハイライトを表示したい部分を白とし、ハイライトを表示しない部分を黒とします。

UTS2.0 : HighColor

liltoon : 反射

◆matcap（MatCap/マットキャップ）
matcapは、「サンプラー」という疑似的な球に見立てた画像をモデルに反映させることができる機能です。ここでは「サンプラー」と「matcapマスク」を作成します。今回のモデルではmatcapで光沢を表現しています。

UTS2.0 : MatCap

liltoon : マットキャップ

ハイライトとmatcapの違いは、ハイライトは指定した位置にのみ表示させますが、matcapはカメラの移動で光沢の位置が移動するというのが大きな違いです。
今回デザインしたモデルではmatcapで表現する光沢がわかりづらいため、別モデルを例にmatcapの見え方を紹介します。紫の服や茶色のタイツにmatcapを適用しています。よく見ると、サンプラーの画像が光沢としてモデルに反映されていることがわかります。【↓下図】

サンプラーがモデルに光沢として適用されているのがわかります

カメラを動かすと、以下のgifのように光沢の位置も変わることがわかると思います。
matcapは光沢のある金属や服（テカリのある服など）といった、光沢の位置を固定させたくない部分に使います。特に円柱や球といった形状のものは、位置を固定するハイライトよりもmatcapを使用したほうが説得力のある絵作りとなります。【↓下図】

matcapの見え方

◆リムライト（RimLight/リムライト）

デザインでリムライトに該当する部分の一例

リムライトは、モデルの背面から当たるライト（バックライト）で作られる光の輪郭です。モデルの輪郭に光が当たって作られるため、モデルのシルエットの強調・情報量の増加に役立ちます。先述したハイライト・matcapと比較し、少し弱めに入れると自然になります。
リムライトは色を設定し、マスクでリムライトの強さをコントロールします。

UTS2.0 : RimLight

liltoon : リムライト

④全体調整・その他表現

◆全体調整
全部の要素を表示したときに、要素が不足している部分・要素が多すぎる部分などをデザインと比較し、追加・削減していきます。また、必要に応じて特殊な表現をしたい部分（例：半透明表示・自己発光・ファーシェーダーなど）の設定を行っていきます。

⑤実機確認・調整・完成

別モデルで一連の流れをまとめてみたものを再掲します【下図↓】

シェーダー設定の一連の流れ

④までで行った内容をVRChat内で確認し、必要に応じて調整して完成となります。
流れとしては比較的シンプルに感じるかもしれません。しかし、上記で挙げたようにコントロールする要素が多いため、一つ一つの要素はシンプルでも、複数の要素を同時にモデルに適用すると思うような見た目になりづらいです。少しずつ調整をする必要があるため、とても時間がかかる工程です。

とはいえ、絵作りはモデルのクオリティを左右する非常に大切な工程です！うまくいかなかった点は、次回のモデルに活かせると思いますので、少しずつシェーダーと絵作りに慣れていくことができればよいと思います。

また、絵作りにおいてはインプットが非常に大切です。クオリティの高いモデルがどのように絵作りがされているかを参考にしつつ、良いものを作れるようになっていきましょう。