BlenderのバージョンはBlender3.0、レンダラーはBlenderのEEVEEを使用します。

このページはトゥーンシェーダの作り方の後半ページです。
前半ページで組み立てたトゥーンシェーダにライトの効果を加えていきます。(;´･ω･)

キーライト・フィルライト・バックライトの効果を付ける

キーライト

次に、ライトの色をR・G・Bに分けて、よりリッチなトゥーンシェーダになるよう編集していきます。

まず、Key Lightを決定します。現在作成済みのsunLightの名前をKeyLightと書き替え、Light PropertiesでColorを赤（R100%）にします。Strengthは1.0に設定しています。

正面右側から光が当たるような角度にしました。

トゥーンシェーダの設定をしてきたオブジェクトを選択し、シェーダエディタでTabキーを押し、トゥーンシェーダのノードグループに入ります。

Shift + Aで新規にSeparate Colorノードを作成します。

Separate ColorノードをShader to RGBノードの次の位置に繋ぎ変えます。Separate ColorノードのRedアウトプットから、Multiplyノード、Color Rampノードに繋ぎます。

このシーン内の赤（R）色だけでメインカラー（Key Light）を表現できるようになりました。

フィルライト

次に、フィルライトを作成していきます。

新規に3DビューポートでShift + Aを押し、新規にsunLightを作成。sunLightの名前をFillLightと書き替えます。

FillLightの色を緑（G100%）にします。

オブジェクトを挟み込むようなイメージで、後方左側から光が当たるような角度にしました。

再び、トゥーンシェーダのノードグループの中に入り、新規にShift+AでFrameノードを作成します。

Frameノードはノードを整理して分かりやすくするための機能です。黒いボックスのようなものが作成されます。

Frameノードを選択した状態で右のNodeパネルを確認します。
NameとLabelをそれぞれKeyLightと入力し、わかりやすくしておきます。
また、Colorのチェックボックスにチェックを入れ、色を変えておきます。

Separate Colorノードのアウトプットからつながる、ColorRamp、ColorRamp、MutiplyノードをKeyLightのFrameの中にドラッグアンドドロップします。

一旦ノードが整理されました。現状の全体像は上の画像です。

ここから、FillLightから来る情報をシェーディングの方に反映させていきます。

KeyLightのFrameとFrame内のノード3つをまとめて選択し、Ctrl+C、Ctrl+Vで複製します。

複製後のFrameノードを選択、Nodeパネルの情報を書き替えます。書き換える情報は上の画像を参考にしてください。

色分けされて分かりやすくなりました。

FillLightのFrame内、上に位置するColorRampのConstantと記載のある個所をLinearに変更、色を黒と白の二色にします。おおよその色のつまみの位置は上の画像を参考にしてください。また、下に位置するColorRampの色を寒色系の色に変更します。

Separate ColorノードのGreenアウトプットをFillLightのFrameの上に位置するColorRampのインプットに繋ぎます。

次に、Group Outputの手前あたりで新規にMixノードを作成します。

MixノードのFloatと記載のある個所をColorに変更し、その下の項目をAddに変更します。上の画像のように、表示がAddノードに変化します。

KeyLightのFrame内のMultiplyノードと、Group Outputの手前のMixノードの間に、Addノードを接続します。インプットとアウトプットの繋ぎ先は上の画像を確認して下さい。また、AddノードのFacterの数値は1.0にします。

そして、FillLightのFrame内のMutiplyノードのアウトプットを、AddノードのBインプットにつなぎます。

結果、KeyLightに加えてFillLightの効果がトゥーンシェーダに反映されるようになりました。このシーン内の緑（G）色で補助ライト（Fill Light）を表現できるようになりました。

バックライト

最後に、Back Lightを追加します。

新規にsunLightを作成し、sunLightの名前をBackLightと書き替えます。

BackLightの色を青（B100%）にします。

オブジェクトの裏からオブジェクトのシルエットを出すイメージで、後方から光が当たるような角度にしました。

再び、トゥーンシェーダのノードグループの中に入り、FillLightのFrameとFrame内のノード3つをまとめて選択し、Ctrl+C、Ctrl+Vで複製します。

複製後のFrameノードを選択、Nodeパネルの情報を書き替えます。書き換える情報は上の画像を参考にしてください。

こちらも色分けされて分かりやすくなりました。

BackLightのFrame内、上に位置するColorRampの黒と白の間隔を狭くして、グラデーションが小さくなるように調整します。色の位置は上の画像を参考にしてください。また、下に位置するColorRampの色を白色に変更します。

Separate ColorノードのBlueアウトプットをBackLightのFrameの上に位置するColorRampのインプットにつなぎます。

Mixノードを新規に作成し、Group Outputの手前辺りに置きます。

MixノードのFloatと記載のある個所をColorに変更し、その下の項目をAddに変更します。上の画像のように、表示がAddノードに変化します。また、Factorを1.0に変更しておきます。

Group Outputノードの手前で、Addノードを接続します。Addノードのインプットとアウトプットの繋ぎ先は上の画像を参考にしてください。
アウトラインに濃淡をつけるためのノードの後にBack Lightの効果を付けたのは、シルエットを出すための強い光にするためです。

上の画像のように、キーライトやフィルライトに加えてバックライトが追加されました。

キーライト・フィルライト・バックライトの効果を付ける手続きは以上で完了です。お疲れ様でした。最後にノードの整理を行います。レンダリング結果としては変化ないため、きれいに管理したい場合はここから先に進んでください。

ノード整理

アウトラインを作っているノードを整理します。

上記4つのノードをまとめていきたいと思います。

Shift + Aで新規にframeノードを作成し、アウトラインを作る4つのノードをまとめます。

frameノードを選択、シェーダーエディタ右側のNodeタブを開きます。frameのNameとLabelに「Outline」と記入します。

frameの名前が「Outline」となり、わかりやすくなりました。

次に、ここまでのシェーダの組み立て作業はノードグループの中でおこなってきましたが、よく調整するであろうパラメータをノードグループの外に出していき、調整しやすくしていこうと思います。

連なるノードの先頭にあるGroup Inputノードを見つけます。

Group Inputノードの接続をすべて外します。

シェーダーエディタ右側のGroupタブを開きます。インプットやアウトプットの作成・削除ができるウィンドウです。

+ ボタンを押します。すると、新しいインプットの項目が作成されます。

作成されたインプットを選択し、下記項目の設定ンぐをおこないます。

・Type：Float
・Name：OutlineValue（と記入）
・Default：10

そうすると、Group Inputノードの接続先にOutlineValueという項目ができました。

一度Tabキーを押してノードグループの外に出ます。

NodeGroup.001ノードにOutlineValueというパラメータが作成されました。

このような手続きでパラメータをノードグループの外に出していきます。

再びTabキーを押してノードグループの中に入ります。

Group Inputノードを移動し、Outlineのframe内に入れます。そしてMultiplyノードの10と数値設定していた箇所に、Group InputノードのOutlineValueアウトプットを接続します。

これで、ノードネットワーク内で管理していたパラメータがノードネットワークの外で管理できるようになりました。

Tabキーを押してノードネットワークから出て、OutlineValueの数値を変更するとレンダリング結果に反映されることが確認できます。数値は10に戻しておきます。

次に、アウトラインの色を変更するためのパラメータをノードネットワークの外に出していきたいと思います。Tabキーでノードネットワークの中に入り、シェーダーエディタ右側のGroupタブを開きます。

+ ボタンを押して新規にインプットを作成し、上の画像のように設定を変更します。
・Type：Color
・Name：OutlineColor
・Default：黒に近い茶色に指定

Group InputノードにOutlineColorという名前のインプットが追加されます。

Group InputノードをCtrl + C、Ctrl + Vで複製します。複製されたGroup InputノードもOutlineのframe内に入れておきます。

Group InputのOutlineColorアウトプットを、Outlineのフレーム外のMixノードのAインプットに繋ぎます。

Tabキーを押してノードネットワークから出ると、OutlineColorという名前の色を設定できるパラメータが追加されました。色は黒に近い茶色に設定しておきます。

次に、同じ手続きで一気に3つのパラメータを外に出していきます。
Tabキーを押して再度ノードネットワーク内に入ります。

Groupタブで3つインプットを作ります。

①KeyLightの色を決めるパラメータ
・Type：Color
・Name：KeyLightColor
・Default：白色に指定

②FillLightの色を決めるパラメータ
・Type：Color
・Name：FillLightColor
・Default：白色に指定

③BackLightの色を決めるパラメータ
・Type：Color
・Name：BackLightColor
・Default：白色に指定

Group Inputを複製してきて、KeyLightのframe内に入れます。
上の画像の下にあるColorRampノードと差し替えていきたいですが、ColorRampノードを消すと色が一時的になくなってしまうので、一旦ColorRampノードをCtrl + Cでコピーしておきます。

Tabキーを押してノードネットワークから出たら、NodeGtoup.001ノードの手前辺りでCtrl + Vで複製します。

複製してできたColorRampノードをKeyLightColorインプットに繋ぎます。

再びTabキーでノードネットワークに入り、古い方のColorRampは削除します。そして、KeyLightColorアウトプットをMultiplyノードのBインプットに繋ぎます。

そうすると、ノードネットワークの外でColorRampを使うことができるようになります（確認してみてください）。

KeyLightのカラーと同じ手続きで、FillLightとBackLightも同様に行います。
同じ作業になるため説明は割愛しますが、画像を以下に載せておきます。

■FillLight

FillLightの設定完了です。次にBackLightです。

■BackLight

BackLightも完了です。

以上でノードネットワークの外に色とアウトラインに関するパラメータを出したため、セッティングが楽になりました。細かい調整をする場合はノードネットワークの中に入るといったイメージです。

レンダリング結果に問題ないことが分かります。

最後に、テクスチャをベースカラーに当て込みたい場合を説明します。
ここまでの手続きが完了していたら手続きは非常にシンプルです。

ノードネットワークの外でShift + A、新規にImage Tectureノードを作成し、そのノードにあるファイルのアイコンをクリック、画像を選択して読み込みます。そしてColorRampがあった個所に差し替えて繋ぎなおします。以上で上の画像のようにベースカラー画像が入ります。

ライトの向きや、細かいパラメータ調整をして見え方を詰めていけば完成です。

以上、Blenderで作るトゥーンシェーダでした(;´･ω･)