トゥーンシェーディング（Toon Shading）とは

概要

3D の陰影を、なめらかなグラデーションではなく、数段の明暗にくっきり分けて塗る描き方。セルアニメやイラストのような見た目になる。輪郭線やリムライトと組み合わせることが多い。

デモ

デモを読み込んでいます

白い線をドラッグすると、通常の陰影とトゥーンシェーディングを見比べられます。段数を 2 にすると、光の当たる側と影の側の二色に分かれます。輪郭線とリムライトは右側だけに付きます。

使われる場面

アニメ調のゲームや映像
キャラクターや背景を、手描きのセル画のような見た目で動かす。
3D を下絵にしたイラストや漫画
3D で組んだ場面を、線と少ない段数の陰影に変えて、背景や小物の作画に使う。
図やアイコン
陰影を二、三段に絞って形を読み取りやすくし、図やアイコンを簡潔に見せる。

判断基準

こういうとき	こうする
アニメやイラストのような見た目にしたい	トゥーンシェーディングにし、陰影を 2〜3 段にする。段数を増やすほど通常の陰影に近づく。
影の色が単に暗いだけで、濁って見える	影の色を黒で暗くするのではなく、青や紫に寄せた別の色を指定する。
キャラクターの形が背景に埋もれる	輪郭線を足す。形を法線の方向に少し膨らませて裏面を描く方法が手軽である。
影の境目がぎざぎざしたり、細かい斑点が出たりする	法線が乱れている。モデルの分割を増やすか、影の出方を整えるために法線を編集する。
顔の影が鼻や頬に不自然に出る	顔だけ光の向きを固定する、影の出方を整えた法線を使う、影の範囲をテクスチャで指定するなど、顔用の調整をする。

こう見えたら

陰影がなめらかすぎて、アニメ調に見えない形と陰影
影の境目がぎざぎざで、斑点が出る形と陰影

指示の例

陰影がなめらかすぎて、アニメ調に見えない。トゥーンシェーディングにして、明暗を 2 段にくっきり分けて
影の色が黒っぽく濁っている。影の色を黒ではなく、少し青紫に寄せた色にして
キャラクターが背景に埋もれる。トゥーンの陰影に合わせて、細めの輪郭線を足して
影の境目がぎざぎざしている。モデルの分割を増やすか法線を整えて、境目をなめらかにして

詳細

明るさを段に分ける

通常の陰影では、面の明るさは法線と光の向きのなす角に応じてなめらかに変わる（計算は「ノーマルマップ」の項を参照）。トゥーンシェーディングは、この明るさを数段のしきい値で区切り、段ごとに決めた色で塗る。二段なら、光の当たる側と影の側がくっきり分かれ、セル画の塗りのように見える。

t = \max(0,\ \mathbf{n} \cdot \mathbf{l}), \qquad q = \min\left(\frac{\lfloor tN \rfloor}{N - 1},\ 1\right)

$N$ は段数、 $q$ は段に丸めた明るさで、 $q$ を使って明るい色と影の色を混ぜる。デモではハイライトも同じようにしきい値で区切り、ぼけのない白い点にしている。

float t = max(dot(n, l), 0.0);
float q = min(floor(t * steps) / (steps - 1.0), 1.0); // 段に丸める
vec3 color = mix(shadowColor, baseColor, q);         // 影の色は別に決める

段の境目の位置や色は、明るさを横軸にとった細長いテクスチャ（ランプテクスチャ）を読んで決める実装も多い。テクスチャを描き替えるだけで、影の色や境目のぼかし具合を調整できる。

影の色と、線と縁の光

セル画では、影は元の色を黒で暗くしたものではなく、青や紫に寄せた別の色で塗ることが多い。デモの影の色も、元の色に青紫がかった色を掛けて作っている。

トゥーンシェーディングは、輪郭線や、縁を細く光らせるリムライトと組み合わせることが多い。デモの輪郭線は、形を法線の方向に少し膨らませて、その裏面だけを暗い色で描く方法（背面法）で付けている。輪郭線の付け方は「アウトライン」の項で扱う。

見分け方と落とし穴

陰影がなめらかなグラデーションなら通常の陰影、二、三段の色の境目がくっきりしていればトゥーンシェーディングである。

段に分けると、法線のわずかな乱れも、境目のぎざぎざや細かな斑点として目立つ。通常の陰影ならなめらかにぼけて気にならない乱れなので、トゥーン向けのモデルでは、影の出方を整えるために法線を手で調整することがある。特にキャラクターの顔は、光の向きによって影が鼻や頬に不自然に出やすく、顔だけ別の方法で影を付けることが多い。

概要

デモ