シェーダー基礎

Appearance

第08回 内積とフレネル、外積と法線マップ ​

前回: 第07回 ベクトル演算とライティング / 次回: 第09回 影表現の基礎

角度で変わる 見え方を作る ​

視線、法線、光の関係を 表現に使う ​

見る角度で 印象は変わります ​

前回の振り返り ​

ベクトル演算で光の向きを扱いました ​

  • 第07回では、法線、ライト方向、視線方向を扱いました
  • Dot Product を使い、法線とライト方向の近さから 簡易的な明るさを作りました
  • この考え方はランバート反射に近く、 視線方向は考慮していませんでした
  • Reflect や Refract によって 方向ベクトルを変化させる考え方にも触れました
  • 今回は視線方向との内積からフレネル表現へ進み、 接線空間と法線マップの考え方も扱います

今回の授業で扱うこと ​

角度の違いを見た目に変える ​

  • 視線方向と法線の関係
  • フレネル効果
  • リムライト
  • トゥーン風の段階的な明暗
  • 法線マップの役割
  • 接線空間と外積の関係
  • 角度情報を使って、質感や演出を制御する方法

今回の授業内容 ​

フレネル、リムライト、法線マップ ​

  • View Direction と Normal Vector
  • 内積による角度マスク
  • Fresnel Effect ノード
  • Cross Product と接線空間
  • Normal Map と Tangent Space
  • 授業内課題

なぜ視線方向を扱うのか ​

観測される光を考える ​

  • 前回扱ったランバート反射では、 法線とライト方向から明るさを求めました
  • ですが現実の物体の光の反射は一律ではありません 光の入射方向に対して、様々な方向に反射されます
  • そして、物体の表面で反射した光は、カメラに届いて初めて観測されます つまり、質感表現では光源の方向だけでなく視線の方向も重要になります

View Direction ​

視線方向を表すベクトル ​

  • View Direction は、表面からカメラへ向かう方向を表すベクトルです

  • 法線と視線方向が近いほど、面を正面から見ていることになります 法線と視線方向が直角に近いほど、面を横から見ていることになります

  • 同じ面でも、カメラの位置や向きが変わると View Direction の値も変わります

  • 視線方向を使うと、反射や透明感のような 観測角度に依存する質感を扱えます

  • リムライトやフレネルのような、 輪郭側を強調する演出にも応用できます

リムライト ​

輪郭を明るく見せる ​

  • リムライトは、背後からライトを当てることで 物体の縁を明るくする表現で 現実世界の映画撮影などでも使われる技法です
  • CG では、視線方向と法線の内積を使うことで 輪郭に近い部分を取り出せます
  • キャラクターを背景から分離したり 魔法、オーラ、強調などの表現に使えます

物体の輪郭 ​

わずかに明るく見える理由 ​

画像
リムライトの適用例 暗闇の中でも輪郭が見て取れ、 印象的な絵作りにつながる

  • 光が当たっていないはずの部分でも、 物の輪郭が明るく見えることがあります
  • 周囲からの反射光や環境光、散乱などが 複雑に影響し、輪郭部に光が当たるためです
  • こうした「光が回り込んだような見え方」を、 CGでは演出的に強調することがあります
  • その代表的な表現がリムライトです

リムライトの実装例 ​

視線方向と法線の内積から求める ​

  • Dot(Normal, View Direction) を計算すると 面をどの角度から見ているかが分かります
  • 正面に近いほど値は大きくなり 輪郭に近いほど値は小さくなります
  • ですがこれでは視線をライトとして照らしているような表現になりますので One Minus を使って反転し、輪郭側ほど大きい値に変換します
  • これだけでリムライトの表現が可能です エッジを強調したい場合は、さらに Power で調整します

演出から物理へ ​

輪郭の見え方をもう少し深く考える ​

  • リムライトは、輪郭を見やすくするための 演出的な表現として使われます
  • 一方で、現実の材質でも見る角度によって反射の強さが変わります 特に浅い角度では、表面の反射が強く見えます
  • この反射率の変化を扱うことで、より物理的な質感表現が可能になります

より正確な表現を求める ​

反射と屈折の割合の変化 ​

入射角によって反射と屈折の割合が変わる模式図
入射角によって屈折と反射の割合が変わる 画像はAI生成

  • 物質に光が当たると、一部は表面で反射し、 一部は物質の内側へ進みます
  • 入射角によって、反射側と屈折側に分かれる 光の割合が変わります
  • つまり、光の入射角と反射率の関係を 数式化できれば、物質の質感をよりリアルに 表現できます

フレネルの式 ​

角度によって変わる反射率の式 ​

  • フレネルの式（Fresnel equations）は、 入射角によって変わる光のエネルギーの反射率を表す物理式です
  • 屈折率や入射角を考慮して反射率を決めることで、 物質の質感をより自然に表現できます
  • ただし厳密な式は複雑なため、ゲーム等では近似式が使われます 近似式の一つに Schlick の近似があります

$$ R(\theta) = R_0 + (1 - R_0)(1 - \cos\theta)^5 $$

  • $R_0$ は正面からの反射率、$\theta$ は入射角です

フレネル効果と具体例 ​

浅い角度ほど反射が目立つ ​

  • フレネル効果は、見る角度によって反射の強さが変わる現象です
  • 水面やガラスは、正面から見るより 浅い角度で見たほうが反射が強く見えます
  • Shader Graph には Fresnel Effect ノードがあります
  • 授業では、この性質をリムライトや発光表現にも応用します

Fresnel Effect ノード ​

Power で輪郭の出方を調整する ​

画像

  • Shader Graph には Fresnel Effect ノードが あり、視線方向と法線からフレネル効果の値を 簡単に作ることができます
  • 法線と視線方向の内積を計算し、Power で 調整することで輪郭の出方をコントロール しています
  • Power の値を操作して、結果がどのように 変わるかを試してみましょう

法線マップとは ​

法線の方向を表すテクスチャー ​

タイルの色テクスチャー、法線マップ、適用結果
タイルの画像とその法線マップの適用例 画像はAI生成

  • 法線マップは、表面の細かな向きを RGB の値として保存したテクスチャーです
  • X が赤、Y が緑、Z が青の成分に対応し、 ピクセルの色がその部分の法線方向を表します
  • モデルの頂点数を増やさずに 細かな凹凸のような陰影を作れます
  • 石、布、皮膚、金属、床など様々な質感の 表現に使われる、CGの基本的な技術です

法線マップの注意 ​

画像を色ではなく方向として扱う ​

画像
Texture Type を Normal map に設定することで Unity が法線マップとして正しく扱えるようになる

  • 法線マップは通常の色画像ではありません RGB を色ではなく法線方向として扱います
  • RGBは 0 ~ 100% の値ですが 法線の方向は-1~+1の範囲で表されるため 正しく扱うための指定が必要です
  • Unity ではテクスチャーの Import Settings で Texture Type を Normal map に設定します

タンジェント空間 ​

表面ごとのローカルな座標系 ​

接線、従法線、法線の3方向
接線、従法線、法線の3方向で表される タンジェント空間の模式図 出典: Wikimedia Commons / Public domain

  • 法線マップだけでは、RGB で表した法線が 表面上のどちらを向いているのか分かりません 基準となる座標系が必要です
  • タンジェント空間は、法線、接線、従法線の 3方向で作る表面ごとのローカルな座標系です
  • 法線マップ上の法線は、この表面の座標系に 基づいて解釈されます

外積の活用 ​

2つの方向から垂直な方向を作る ​

  • タンジェント空間は、法線、接線、従法線の3方向で構成されます
  • 面の法線は、頂点ごとに定義された法線が補間されて得られるため 描画ピクセルごとにタンジェント空間を計算する必要があります
  • 接線は、UV展開の方向を手がかりに用意するのが一般的です
  • 外積 は、2つのベクトルの両方に垂直なベクトルを返す演算です 接線と法線が分かれば、外積 で従法線の向きを求められます
  • こうして三方向がそろうことで、法線マップの法線を 正しく解釈できるようになります

法線マップとライティング ​

面の向きを細かく変える ​

  • ライティングに使う法線方向を細かく変えることで 凹凸があるように見せるのが法線マップの役割です
  • 法線マップは、実際の形状を変えるわけではありません ライトの当たり方を変えることで、見た目を変える技術です
  • 石の表面、木の板、布のシワ、皮膚の細かい凹凸など 多くの質感表現に欠かせない技術ですが 法線マップだけでは厚みのある物体の表現には限界があります

実習 ​

フレネルと法線マップを試す ​

角度で変わる表現を 作ってみましょう ​

実習1 ​

リムライトを作る ​

  1. Normal Vector と View Direction を追加する
  2. 2つのノードの Space をそろえる
  3. Dot Product で内積を計算する
  4. One Minus で輪郭側が明るくなる値にする
  5. Power で輪郭の幅を調整する
  6. リム色と Multiply し、Base Color または Emission に足す

実習2 ​

Fresnel Effect ノードを使う ​

  1. Fresnel Effect ノードを追加する
  2. Power をプロパティ化する
  3. 出力に色を掛ける
  4. Emission に接続し、発光表現にする
  5. Power を変えて輪郭の太さを確認する

実習3 ​

トゥーン風の明暗を作る ​

  1. 法線とライト方向の内積を作る
  2. Step で明暗を2段階に分ける
  3. Lerp で明るい色と影色を混ぜる
  4. しきい値をプロパティ化する
  5. 必要に応じてリムライトを足す

実習4 ​

法線マップを使う ​

  1. 法線マップ用のテクスチャーを用意する
  2. Texture Type を Normal map に設定する
  3. Shader Graph でテクスチャーを読み込む
  4. Normal 入力へ接続する
  5. ライトを当てて凹凸感を確認する

授業内課題 ​

フレネルを使い、必要に応じて 法線マップも組み合わせた マテリアルを作成してください ​

角度による変化を 見せられるかがポイント ​

課題の条件 ​

以下を満たしてください ​

  • View Direction または Fresnel Effect を使っている
  • 角度によって色、発光、透明度のいずれかが変化する
  • 強さや範囲をプロパティで調整できる
  • Step または Smoothstep で値を加工している
  • 法線マップを使う場合は、 Import Settings を Normal map に設定している
  • スクリーンショットまたは動画で、角度による変化が確認できる

この回の到達目標 ​

  • 視線方向と法線の関係から、見る角度で見え方が変わることを説明できる
  • フレネル効果をリムライトや発光表現に応用できる
  • 外積と接線空間の関係を説明できる
  • 法線マップが色ではなく向きを保存した画像であることを説明できる
  • 法線マップを使って、表面の細かな凹凸感を作れる

今回のまとめ ​

角度情報を質感に変える ​

  • 視線方向と法線の内積を使えば、面が輪郭寄りか正面寄りかを判定できます
  • フレネルは、見る角度に応じて反射や発光の強さを変える表現です
  • 外積を使うと、接線空間を支える3方向のうち、従法線を求められます
  • 法線マップは、表面の細かな向きを色として保存した画像です
  • これらの考え方は、キャラクター・背景・エフェクトの質感づくりに応用できます

おつかれさまでした！ ​

次回予告 第09回 影表現の基礎 ​

ついに シャドウマップの 登場だ ​