Ⅲ 影系

今回のモデルは、影色指定テクスチャ・影マスクを作成し設定しています

【影の設定例】
服のモデルを例にして紹介します。前述したように影の設定は難易度が非常に高いですが、工程を整理して一つずつ調整すればある程度進めやすくなります。

①
影マスクを作成する前に、Mayaでモデルの法線を調整しておきましょう。影の入り方は「モデルの法線」によっても結果が大きく変わるためです。影の設定を厳密に行ったとしても、法線が大きく崩れていると想定した影になりません。Maya上でモデルをシェーディング表示とし、法線がおかしい部分を直しつつ、モデルのパーツによりソフトエッジ/ハードエッジを設定します。【下図↓】

シェーディング表示にして、法線が明らかにおかしい部分を見つけて直す

ソフトエッジよりもハードエッジが適切な部分もあります

②
ライトの設定を行い、Unityでモデルに当たるライトを簡単に操作できるようにします。これを行っておくと、影の調整を非常に効率的に進めることができます。詳しくはコラム4回目の「影系」のディレクショナルライトの回転値にキーを打つ方法を参考にしてください。【下図↓】また、今回サンプルで配布しているUnityPackageでもこのライトの設定が確認できます。

タイムスライダでライトの回転ができるように設定しています

③
【影】にチェックを入れて影をONにします。ONにした直後は、影の設定はデフォルトの状態です。ライトを回転させてみると、影が遷移することがわかります。デフォルトでもある程度いい感じに影が設定されていますが、影の色やテイストがデザインと異なります。ここから影の色やテイストをデザインに近づけていきます。【下図↓】

デフォルトでの影遷移

デフォルトでの影の状態

デザインと近い影に合わせるのがゴールです

④
まずは影の色を設定していきます。デフォルトでは影色3が透明度0となっており、影色3の設定項目が表示されていないため、透明度を0から1に変更し影色3を表示しておきましょう（こうすることで影色3のパラメータも編集できるようになります）。【下図↓】

影色3の透明度を0から1とし、影色3を表示・パラメータを編集できるようにしておく

また、デザインではトゥーン寄りのぱっきりした影なので、いったん「ぼかし」を全て0としておきました。その後、デザインに近しい影色と境界の色を選択していきます。ライトを回転させながら雰囲気を見て影色を確認・設定していきましょう。その他のパラメータの「範囲」などはいったんデフォルトのままにしておきます。【下図↓】

ぼかしをいったん0に設定

影色と境界の色を、モデルの影色を見ながらデザインに合わせていく

ここまで調整したものが以下のgifになります。

⑤
次は影マスクを作成します。影マスクは「AOMap」に設定します。AOMapの下にいろいろなパラメータ（LODなど）がありますが、パラメータはいったんデフォルトのまま進行しましょう。【下図↓】

影マスクはAOMapに設定します。

影マスクは「白」に近いほど影が入りにくくなり、「黒」に近いほど影が入りやすくなるマスクです。影マスクはあくまで「影の入りやすさ」を設定するもので、「影マスクと同じ影が入る」というわけではありません。そのため、ライトを回転させて影の入り方を確認することがとても大切になります。
私は、影マスクの作成は以下のようにアンビエントオクルージョン（ベーステクスチャ作成の時に作成したもの）をベースにしてしています。

アンビエントオクルージョンのテクスチャを影マスクに設定してUnityで確認
→しわや落ち影などを追加したものを影マスクに設定してUnityで確認
→さらにデザインに沿ってタッチを追加したものを影マスクに設定してUnityで確認
→…
という流れを経て、影マスクを作成していきます。実際はこのようにすんなりと進むわけではなく、影マスク作成→Unityで確認→調整…という工程を何度もはさんでいます。【下図↓】

影マスクの作成フローの例

影マスク設定前

影マスク作成・設定後

影マスクを設定した状態でライトを回してみます。影にタッチが追加され、影のテイストがだいぶデザインと近くなってきました。【下図↓】

⑥
④でデフォルトのまま進めた影の「範囲」を調整し、影の入り方をさらに調整します。影マスクの明暗も影の入り方に影響を与えるため、まず影の「範囲」の数値を調整し、それでもうまくいかない場合は影マスクの明暗を見直していきます。今回は影色2のみ、範囲を少し大きくしてみました。【下図↓】

「範囲」の調整

影色2の「範囲」の数値をあげたことで、下図赤矢印のように、影色2の範囲が広くなり2影が出やすくなっています（脚の部分を見ると、範囲が広くなったことがわかりやすいです）。【下図↓】

この段階でライトを回してみます。影色2の範囲が少し広くなっていることがわかります。【下図↓】

⑦
⑥までで、ある程度影の方向性は決まりました。デザインと比較してみたときに、「帽子・ニーソックスなどの円柱部分に入るタッチ」が不足していたため、影色指定テクスチャを作成・設定しこのタッチを表現しました。影色指定テクスチャは、ベーステクスチャをそのまま使用することもできるため、無理して作成しなくてOKです（必要であれば作成するという感じです）。【下図↓】

ピンク矢印の部分にタッチを追加したいので、影色指定テクスチャを作成しました

影色2/影色3に影色指定テクスチャを作成し設定しました

影色指定テクスチャを作成・設定したのでライトを回してみます。帽子・ニーソックスの2影の部分に横線のタッチが追加されたのがわかると思います【下図↓】

⑧影設定完了
これでいったん服の影設定が完了です。服と同じ要領で髪や肌なども影の設定を行った状態でライトを回すとこのようになります。【下図↓】

ここまで終わった状態がこちらです。【下図↓】

Ⅳ 光系

次はハイライト・matcap・リムライトなどの「光の要素」をモデルに追加していきます。この順番はやりやすい流れで大丈夫ですが、私は要素の面積が大きい順にハイライト→matcap→リムライトという流れで行いました。

◆ハイライト

ここでは髪の毛を例にして、ハイライトマスクの設定の例を紹介します。

①
デザインに沿って、ベーステクスチャにハイライトを書きます。【下図↓】

②
ハイライトマスクは「ハイライトを表示したい部分を白」「ハイライトを表示しない部分を黒」として作成します。別で作成した背景が黒一色のテクスチャに、①でベーステクスチャに作成したハイライトを持っていき白色にします。こうしてハイライトマスクが完成です。【下図↓】

③
②で作成したハイライトマスクをUnityで【反射】の「色/マスク」に設定します。また「滑らかさ」は、いったん1から0としておき、ハイライトが表示されやすいようにしておきます。ハイライトの色は「色/マスク」の横にある色のところで指定できます（デフォルトは白です）。デザインに近しい色を選択しておきましょう。【下図↓】

ここまでの設定

③まで調整した状態

④
ライトを回して確認・調整を行います。前述の通り、ハイライトは「光が当たる部分に作られる」という特性上、「逆光になったときにハイライトが表示されない」ことが確認できればOKです。また、ハイライトの強さをハイライトマスクの明暗やパラメータ（ここでは「ぼかし」を少し上げています）で調整します。これで髪の毛のハイライトは完了です。【下図↓】

ハイライトが逆光で消えていることを確認しておく

髪の毛のハイライト完了後にライトを回した様子

⑤髪の毛以外の部分のハイライトも作成し、ライトを回した状態がこちらです。

モデル全体にハイライトを設定した状態

◆matcap

matcap設定画面

今回のモデルでは、服にmatcapの光沢を入れています。その設定のフローを紹介します。

①
まず、「サンプラー」という、球が描かれているようなテクスチャを作成します。【下図↓】今回のものは自分で作成しましたが、無償配布されているサンプラーもあります（使用の際には配布元の規約に従い使わせてもらいましょう）。
自分でサンプラーを作成する場合は、MayaやUnityなどで鏡面の球体のオブジェクトを作成し、その鏡面球体にオブジェクトなどを反射させたものをレンダリングして作成することができます。サンプラーの作り方は検索すると出てきますので、ぜひ調べてみて下さい。

今回のサンプラー。情報量はあまり入れずシンプルなものにしています

②
【マットキャップ設定】→【マットキャップ】にチェックを付け、マットキャップをONにします（【マットキャップ2nd】は今回は使用しないため、チェックはつけません）。その後、「マットキャップ」にmatcapサンプラーを設定します。【下図↓】

matcapサンプラーを設定する場所

「マットキャップ」にmatcapサンプラーを設定すると、画像のように服に白い光沢がつくことが分かりますが、意図した光沢ではありません。この光沢をコントロールする「matcapマスク」を作成していきましょう。【下図↓】

matcapサンプラーのみの光沢の見た目。全体に光沢がついてしまっている

matcapサンプラーのみの光沢の見た目。全体に光沢がついてしまっている

③
前述したように、金属と革のみにmatcapで光沢を追加し、それ以外の部分には光沢が入らないようにするため、matcapマスクを作成していきます。まずは背景が黒のテクスチャを作成し、金属と革のみを白としたテクスチャを作成します。【下図↓】

背景が黒のテクスチャを作成し、金属と革部分を白としたテクスチャ

④
matcapマスクは、白に近づくほどmatcapサンプラーが強く描画され、黒に近づくほど描画が薄くなります。光沢の強さとしては、金属＞革としたいため、革の部分を金属より少し黒く塗っておきます。【下図↓】

革の部分を少し暗めにしたテクスチャ

⑤
matcapの光沢が出てほしくない部分を黒で塗りつぶします。裏側・オブジェクトの奥まったところなどがそれに該当します（ベーステクスチャで作成したアンビエントオクルージョンを乗算で乗せるだけでもそれらしくなります）。これでmatcapマスクの作成が終了です。【下図↓】

matcapの光沢が出てほしくない部分を黒で塗りつぶしたテクスチャ

⑥
作成したmatcapマスクをUnityで設定して確認します。光沢の色をデフォルトの白から、金属と革のどちらにも合いそうな茶色系に変更し、全体を確認します。matcapはその特性から、ライトの当たり方だけではなく「モデルを見る角度」にも大きく影響します。ライトの当て方を変えつつ、いろいろな角度からモデルの光沢を確認し、光沢の強度を確認・調整します。【下図↓】

matcapの色変更とmatcapマスクの設定

matcapを調整した状態が以下になります。【下図↓】金属と革に光沢が入り、かつ金属の光沢が革より強く描画されていれば想定通りです。

matcap調整後の見た目

◆リムライト

リムライトの設定

服を例に挙げてリムライト設定のフローを紹介します。

①
Unityで【リムライト設定】の【リムライト】にチェックを入れます。すると、デフォルトのリムライトが服に表示されます。
まずはリムライトの色をデザインに近い色になるよう設定しておきます。また、今回はトゥーン調のテイストなので、いったん「ぼかし」を小さく（ここでは0.02と）しておきました。【下図↓】

リムライトの色とぼかし調整

②
リムライトは、デフォルトでモデルのどの部分も強さが一定です。服の裏面や内側・影になる部分などのリムライトは、ちらつき・違和感の原因になります。【下図↓】そのため、この部分のリムライトを消すか弱める処理をリムライトマスクを作成して行います。

リムライトを調整したい部分の一例

③
リムライトマスクもmatcapマスクと同じく、白に近づくほどリムライトが強く描画され、黒に近づくほど描画が薄くなります。私がリムライトマスクの作成をする際は、ベーステクスチャのアンビエントオクルージョンをベースにしています。アンビエントオクルージョンは、奥まった部分やモデル裏面が黒に近く出力されるため、リムライトマスクを作成するベースとして流用しやすいです。
まずアンビエントオクルージョンをリムライトマスクとして設定して、それでもリムライトが気になるところは黒で塗りつぶしてリムライトマスク作成は完了です。【下図↓】

AOをベースにしてリムライトマスクを作成した例

リムライトマスク設定場所

④
最後に、リムライトの色に少し工夫を加えます。デザインを見ると、光源側のオレンジのリムライトとは別に、光源と反対側に青白いリムライトが入っていることがわかります。これを表現します。【下図↓】

デザインのリムライト色を表現していく

「ライト方向の影響度」を0から1とすると、リムライトで設定できるパラメータが増えることが分かります。増えたパラメータの部分で、光源と逆方向のリムライトを設定できます。このリムライトの色を青白くしておきました。【下図↓】

「ライト方向の影響度」の追加設定

「ライト方向の影響度」をONにする（1にする）と、光源と逆方向のリムライトの色が設定できます

⑤
服のリムライトを調整できたら、同じように服以外のリムライトも設定していきました。ライトを回してみるとこういう感じになっています。【下図↓】

ここまで終わった状態がこちらです。【下図↓】

Ⅴ その他表現

ここまでで絵作りはほぼ完了しているのですが、味付けとして「ノーマルマップ」「発光テクスチャ」の要素を使用した例を紹介します。

◆ノーマルマップ
ノーマルマップは、光源があるモデルの凹凸を疑似的に表現するために使用します。もう少し詳しく言うと、ここまでに設定した「影系」「光系」の要素に影響を与えることができるということです。今回のモデルは、ノーマルマップを使用し「影系・光系のディテールアップと説得力の追加」を行っています。
個人的には、リムライトの形にディテールを持たせることができるのがノーマルマップの大きなメリットだと思っています。デフォルトのリムライトはモデルの輪郭に沿って均一に描画されるのが一般的ですが、ノーマルマップを使用することにより、リムライトの形にディテールを付けることができます。

ノーマルマップを使用した経緯を簡単に説明します。【Ⅲ 影系】 の 「⑤影マスクを作成し設定」にて、影マスクを使用してデザインのタッチの要素を追加したと思います。【下図↓】このタッチを、影やリムライトにも追加し、全体の印象をまとめることができないかと考えました。イメージとしては、ハッチング（線状の描画）をモデル全体に少しかけてあげる感じが近いです。

タッチをリムライトや影にもタッチを入れるため、ノーマルマップを設定しました

ノーマルマップの設定について、服が例としてわかりやすいので紹介します。

①
デザインのタッチに似たテクスチャを用意します。前述したとおりタイリングテクスチャとして使用するため、上下左右に同一のものを敷き詰めても境目が目立たないテクスチャとしています。【下図↓】

作成したタイリング可能なノーマルマップ

②
ノーマルマップには【ノーマルマップ】と【ノーマルマップ2nd】がありますが、今回は【ノーマルマップ2nd】のみ使用します。この理由としては、ノーマルマップ2ndはモデルの別UVが使用できるためです。
【ノーマルマップ2nd】の「ノーマルマップ」に、①で作成したノーマルマップテクスチャを設定します。強さはデフォルトの1だと強すぎるため、いったん0.2としておきました。【下図↓】

ノーマルマップテクスチャの設定

③
②の状態では、ノーマルマップでできるタッチがかなり荒くなっています。そこで、Unity上でタイリング回数を増やし、タッチを少し細かくしてあげています。デフォルトではXYともに3なので、6としておきました。タッチが細かくなったのがわかると思います。【下図↓】

タイリング回数を変更し、タッチの細かさを小さくしました

④
③の状態ではタッチの細かさは気にならなくなりましたが、何か違和感があります。タッチの方向が想定通りになっていないのが理由です。【下図↓】

タッチ方向を右側の「想定するタッチ方向」のようにしたい。どうするか？

⑤
そこで、Mayaでノーマルマップ用のUVを展開し使用しています。これがモデルの別UVが使用できる【ノーマルマップ2nd】を使用した理由です。【下図↓】ノーマルマップ用に展開した実際のUVはMayaのシーンデータを参照してください。

⑥
Mayaでノーマルマップ用のUVを展開できたら、そのモデルをfbxとして再度書き出し、Unityのfbxに上書きし更新します。【ノーマルマップ2nd】のUVModeをUV0（規定UV）から、UV1（ノーマルマップ用に展開したUV）に変更します。こうすることで、ノーマルマップ用に展開したUVを使用し、ノーマルマップによってできるタッチの方向が想定の方向になりました。【下図↓】

タッチの方向が想定通りになりました。

⑦
現状だと、ノーマルマップでできるタッチが服全体に一律で入っている状態です。そのためノーマルマップマスクを作成し、ノーマルマップでできる質感の強弱をつけます。これまでのマスクと同じく、白に近いほどノーマルマップが強く、黒に近いほどノーマルマップが弱く描画されます。
ノーマルマップマスクが作成できたら「マスクと強度」に設定します。【下図↓】

⑧
ライトを回して確認し、タイリング回数や強度を見直したら完了です。【下図↓】

ここまで終わった状態がこちらです。【下図↓】

◆発光テクスチャ
発光テクスチャを設定するかは個人の好みの部分になると思います。このモデルでは、目（黒目とハイライト）だけを少しだけ発光するようにしています。作成・設定方法としては簡単で、ベーステクスチャの黒目とハイライト以外を黒に塗りつぶしたテクスチャを用意します。これが発光テクスチャになります。【下図↓】

【発光テクスチャ】のチェックをONにし、有効にします。その後、この発光テクスチャを【発光設定】→【発光テクスチャ】の「色/マスク」に設定し、色や強さを設定して完了です（【発光テクスチャ2nd】は今回使用していません）。目を気持ち目立たせたいときに使用したり、逆光のときに少し目を光らせたりというニュアンスを出せます。【下図↓】

発光テクスチャの設定

発光テクスチャの効果

ライトを回して、目の光り方を確認したら完了です。【下図↓】

ここまで終わった状態がこちらです。【下図↓】

Ⅵ 全体調整・実機確認

これまでに作成した要素を確認・調整していきます。色味やテイストなどをデザインと比較し調整していきましょう。全体調整が終わったら、使用想定のVRChatでの確認も行います。
これでシェーダーでの絵作りは完了です！次回は表情の作成、実機であるVRChatで使用するための設定・確認・調整をメインに行います。

ここまで終わった状態がこちらです。【下図↓】