UE5.7の標準シェーダーをアニメ調（セルルック）に
前回はUE5の強みの一つであるフォトリアルな質感を生成するためのPBRマテリアルを作成しました。
今回はトゥーン表現として広く使われる「通常色」と「影色（シェード）」のテクスチャを2枚用意する手法について説明します。2枚のテクスチャをマテリアルノードで切り替え、ライトの方向に応じて影を2階調で描画するロジックをUE5内で構築します。
おそらく2025年時点で細かい設定をそぎ落とした一番簡単（単純）な方法となります。
事前準備
キャラクターモデルと2種類のテクスチャの作成
キャラクターモデルとテクスチャー「通常色」と「影色（シェード）」の2種類を事前に準備します。
今回はVroid Studioのモデルとテクスチャを使用しました
Vroid Studioでキャラクタを生成し.VRMファイルを出力。
.VRMファイルをBlenderで読み込みます。
.fbxとテクスチャを出力しました（今回は本題ではないので手順は割愛します）。
UnrealEngine5の起動
今回はUnrealEngine5.7を使用します。
モデルとテクスチャのインポート
Vroidモデル（FBX）をUE5内のコンテンツブラウザ―にドラッグアンドドロップしてインポートします。
キャラクターの体部分に使用する通常カラーマップと影色カラーマップの2種類のテクスチャをUE5内のコンテンツブラウザ―にドラッグアンドドロップしてインポートします。
テクスチャの読み込みとシェーダーの基本設定
新規マテリアルの作成
コンテンツブラウザで右クリック → [マテリアル] を選択します。
新しいマテリアル（例：M_Toon）を作成します。
テクスチャの読み込み
ダブルクリックしてマテリアルエディタを開きます。
用意したテクスチャをマテリアルエディタに読み込み、ノードを準備します。
テクスチャにアルファチャンネルの情報がある場合
テクスチャにアルファチャンネルの情報がある場合は
- Blend Mode を Maskedに変更
- テクスチャのα→マテリアルのOpacityMask をつなぎます
VroidStdioのデータはアルファチャンネルの情報があるので適時結線してください。
前回までのPBRマテリアルの状態になりました。準備完了です。
2階調化の作成
それでは本題、マテリアルノードを繋げて、「影の塗り分けスイッチ」を作っていきましょう。
私たちが目指すのは、「光が当たっている部分」には通常色のテクスチャを、「影になっている部分」には影色のテクスチャを、自動で切り替えてくれる仕組みです。
太陽と面の向きをチェックする
まずは、モデルのどの面が太陽に照らされているかをデジタルな目で測りましょう。
マテリアルグラフ上でTabキーを押すか右クリックしてVertexNormalWSと入力します。
① 「面の正面センサー」を置く
モデルの面がどこを向いているかを教えてくれるのが、このノードです。
- ノード名:
VertexNormalWS - 直感的な役割: キャラクターのおでこや背中など、「それぞれの面の正面」を教えてくれるセンサーです。
② 「太陽光の指差し」を置く
同様にマテリアルグラフ上で右クリックしてSkyAtmosphereDirectionノードを配置します。
次に、光がどこから来ているかを教えてくれるノードを置きます。
- ノード名:
SkyAtmosphereDirection - 直感的な役割: 「太陽光の指差し」。ワールド（空間）のどこから光が差し込んでいるか、その方向を教えてくれます。
③ 「相性チェック」で繋ぐ
この２つの方向がどれだけ『相性が良いか（向き合っているか）』を測るノードを繋げます。
- ノード名:
Dot Product - 直感的な役割:「相性チェック係」。
- 「面の正面センサー」と「太陽光の指差し」の向きがピタッと合っている（光が正面から当たっている）明るい（1に近い）
- 向きが反対（光が背中から当たっている）暗い（-1に近い）
という数値を返してくれます。
- 接続:
VertexNormalWSの出力をDot Productの入力（B）へ。SkyAtmosphereDirectionの出力をDot Productの入力（A）へ。
効果の確認
プレビュー確認: このDot Productの出力をEmissiveColorに繋いでみてください。
Emissive Color(エミッシブカラー)とは
マテリアル自体を発光させる際に使用するパラメータです。通常はオブジェクトを光らせるライトとして使用します。
また、エミッシブカラーに色情報を送ると、ライトの影響を受けなくなる効果を利用して、アニメ調シェーダーでは、色情報を挿すことでカラー情報として多く使われます。
Applyをクリックしてビューポートを確認します。
キャラクターの表面に滑らかなグラデーションが現れるはずです。
これが光の当たる強さです。
影か光か「⚪️⚫️はっきりジャッジ」
アニメの影はグラデーションではありません。
クッキリとした影の線にするため、ステップ1でできた滑らかなグラデーションを、強制的に白（光）と黒（影）の2色に分けます。
① 「デジタルな目盛り」に調整する
Dot Productが出す 値は-1.0 から 1.0 です。
私たちが扱いやすい 0.0 から 1.0 の目盛りに直します。
- 接続:
Dot Productの結果側に、右クリックでAddノードを追加します。AddノードのBに 1.0 を入力します。（-1.0 → 0.0, 1.0 → 2.0 に変換）
- その結果に、
Multiplyノードを追加します。 - 0.5 を掛け算します。（0.0 → 0.0, 2.0 → 1.0 に変換）
② 影の境目を決めるパラメーターを作る
どこで影と光を分けるか、その境目（閾値）を決めます。
これは後から簡単に調整できるようにパラメーターにします。
- ノード名:
Scalar Parameter
ShadowThresholdという名前に変更します。
初期値は例えば 0.15 などにしておきましょう。
この数値が「これより明るいか暗いか」を決める境目になります。
③ 「⚪️⚫️はっきりジャッジ」ノードで強制二値化
いよいよ影の境界線を作る核心です。
- ノード名:
Step
- 直感的な役割:「⚪️⚫️はっきりジャッジ」。
- 入力値（ステップ1の結果）が境目パラメーターよりも明るい →1＝（⚪️）を出す。
- 入力値が境目パラメーターよりも暗い →0 ＝（⚫️）を出す。
- 接続:
- ステップ2の
Multiplyの結果をStepノードの入力（X）へ。 - 作成した
ShadowThresholdをStepノードの境目（Y）へ。 Stepの出力をEmissive Colorに繋いでください。
- ステップ2の
④プレビュー確認
Applyをクリックしてビューポートを確認します。
滑らかなグラデーションが消え、光と影がクッキリと分かれたアニメのような「マスキングテープ」が完成しました。
2色のテクスチャを「スイッチ」で塗り分ける
最後の仕上げです。ステップ2でできた「⚪️⚫️マスク」を使って、用意した2枚のテクスチャを切り替えます。
① テクスチャとスイッチの準備
- テクスチャノード: 2枚の
Textureノードに、通常カラーと影色カラーのテクスチャをそれぞれ設定します。
コンテンツブラウザから影色のテクスチャをマテリアルグラフ上にドラッグアンドドロップします。
マテリアルグラフ上でTabキーを押すか右クリックしてLerpと入力
スイッチノード: Lerp（リニア・インターポレート）ノードを配置します。
ノード名: Lerp
「テクスチャのスイッチ」Alphaの入力が0ならA、 1ならBを出力します。
② 接続して完成
- 接続:
- 影色テクスチャの出力を
LerpのAピンへ。 - 通常色テクスチャの出力を
LerpのBピンへ。 - ステップ2でできた
Stepノードの出力（白黒マスク）をLerpのAlphaピンへ。
- 影色テクスチャの出力を
- 最終出力:
Lerpノードの出力を、マテリアル全体のEmissive Colorピンに繋げます。
その他の設定
反射を消す
仕上げに、リアルなテカり（PBR）を完全に消し去るため、マテリアル全体のパラメーターを設定します。
Base Color黒Metallic0.0Specular0.0Roughness1.0
このマテリアルをキャラクターに適用すれば、アニメ表現が実現します。
ノーマルマップの適用
前回説明した方法でノーマルマップを適用します。
これで、太陽光が当たっている部分には通常色テクスチャが、影になっている部分には影色テクスチャが、自動でクッキリと塗り分けられる2階調トゥーンシェーダーが完成しました。
今後の課題（次章に向けて）
この基本シェーダーにはまだ「弱点」があります。特に、顔の影が濃くなりすぎたり、影の線が固すぎたりする点です。
次回は、今回作った基礎の上に、アニメ調の表現をさらに深めるテクニックに進みます。
- 顔の影を意図的に消すテクニック（表情を明るく保つ）
- 影の境界線を柔らかくするノウハウ（表現の幅を広げる）
引き続き、マテリアルノードを使いこなす楽しさを追求していきましょう。
まとめ
光の方向と面の向きをチェック (Dot Product):
- 「面の正面センサー」 (
VertexNormalWS) と 「太陽光の指差し」 (SkyAtmosphereDirection) の向きを、「相性チェック係」 (Dot Product) で測りました。これにより、モデル全体に光の強さのグラデーションが生まれました。
影か光か白黒ジャッジ (Step):
- このグラデーションに「影の境目パラメーター」というルールを与え、「白黒はっきりジャッジ」 する
Stepノードで、すべてを光（１）か影（０）の二値に強制的に変換しました。
これが、アニメ特有のクッキリとした影の境界線を生み出す核心です。
2枚のテクスチャを切り替え (Lerp):
- この白黒のマスクを 「テクスチャのスイッチ」 (
Lerp) に繋ぐことで、自動で影色テクスチャと通常色テクスチャを塗り分けさせました。
今回はPBRマテリアルと異なるアニメ調のシェーダーの基礎について学びました。もともと物理的に正しい世界の構築を使命としたCG表現が写実から離れた表現を積極的に取り入れる現在のトレンドは非常に興味深いですね。このページが皆さんのCG習得の一助になれば幸いです。
次回はアニメ調表現には欠かせないアウトライン（輪郭線）の設定です。