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

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

今回の授業内容

• View DirectionとNormal Vectorから角度を求める
• 内積からリムライトを実装する
• Fresnel Effectによる角度依存の反射を確認する
• Stepを使ってトゥーン風の明暗を作る
• 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ノード

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方向で表されるタンジェント空間の模式図出典: Wikimedia Commons / Public domain

法線マップだけでは、RGB で表した法線が表面上のどちらを向いているのか分かりません
基準となる座標系が必要です

タンジェント空間は、法線、接線、従法線の 3方向で作る表面ごとのローカルな座標系です

法線マップ上の法線は、この表面の座標系に基づいて解釈されます

外積で垂直な方向を作る

タンジェント空間は、法線、接線、従法線の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方向のうち、従法線を求められます
• 法線マップは、表面の細かな向きを色として保存した画像です
• これらの考え方は、キャラクター・背景・エフェクトの質感づくりに応用できます