技術(非IT系)

法線マップとは何か?作り方と仕組みも解説!(ノーマルマッピング・3DCG・Blender・作成方法など)

当サイトでは記事内に広告を含みます

3DCGやゲーム開発を学んでいると「法線マップ(ノーマルマップ)」という言葉を必ずと言っていいほど耳にします。

「見た目はでこぼこしているのに実際のポリゴンは平らなまま?」「あの青紫色のテクスチャは何?」と不思議に思った経験はないでしょうか。

本記事では、法線マップの仕組み・ノーマルマッピングの原理・BlenderでのUV展開から作成方法・実際の使い方まで、詳しくわかりやすく解説していきます。

法線マップとは何か?まずその定義と仕組みの結論を押さえよう

それではまず、法線マップとは何かという定義と仕組みの結論から解説していきます。

法線マップ(Normal Map)とは、3Dオブジェクトの表面の各ピクセル(テクセル)における法線方向(面の向き)の情報を、RGB値(色情報)としてテクスチャ画像に記録したものです。

通常の3Dモデルでは面(ポリゴン)の法線は各面ごとに一つですが、法線マップを使うことで低ポリゴンモデルでも、あたかも高ポリゴンモデルのような凹凸・ディテールがあるように見せることができます。

ゲームや映画の3DCGで「モデルは単純なのに表面が複雑な質感を持っている」場合、法線マップがその表現を支えていると考えてよいでしょう。

法線マップが実現することは「光の当たり方をだます」ことです。

実際のジオメトリ(ポリゴン形状)は変化しないのに、各ピクセルが「自分はこの方向を向いた面のピクセルだ」という偽の法線情報を持つことで、ライティング計算が高ポリゴンモデルと同じように行われます。

その結果、レンダリングされた画像では凹凸があるように見えますが、実際の形状は変化していないため、処理負荷を大幅に抑えながら高品質な見た目を実現できるのです。

法線マップの色(RGB)と法線方向の対応

法線マップが青紫色になるのには明確な理由があります。

法線方向は XYZ の三次元ベクトルで表されますが、これをテクスチャの RGB 値に変換して保存します。

チャンネル 対応する方向 値0(黒)の意味 値255(白)の意味
R(赤) X 方向(左右) 左向き(−X) 右向き(+X)
G(緑) Y 方向(上下) 下向き(−Y) 上向き(+Y)
B(青) Z 方向(奥行き) 奥向き(−Z) 手前向き(+Z)

平坦な面では法線方向が真正面(Z軸方向、(0,0,1))を向いており、RGBに変換すると R=128、G=128、B=255 となるため、法線マップ全体が青紫色(フラットブルー)になるのです。

凹凸がある部分では法線方向が傾いてR・Gチャンネルの値も変化するため、法線マップには赤みや緑みが混じった複雑な色のパターンが現れます。

タンジェント空間・オブジェクト空間・ワールド空間の違い

法線マップには格納する法線の基準となる座標系によって複数の種類があります。

種類 基準座標系 特徴 主な用途
タンジェント空間法線マップ UV接線空間(各テクセルの接面に相対的) 最も一般的・モデルの回転・変形に対応 ゲーム・リアルタイムCG
オブジェクト空間法線マップ オブジェクトのローカル座標系 シンプル・アニメーション変形に不向き 静的オブジェクト・一部の映像向け
ワールド空間法線マップ シーンのワールド座標系 オブジェクト動作に追従できない 地形等の固定オブジェクト

現代のゲームエンジン(Unity・Unreal Engineなど)で使われる法線マップは、ほぼ例外なくタンジェント空間法線マップです。

タンジェント空間はモデルのUVマップと連動した座標系であり、モデルが動いたり回転したりしても正しく法線が計算できる点が最大の利点です。

法線マップの作成方法を詳しく確認しよう

続いては、法線マップを実際にどのように作成するかという具体的な手順と方法を確認していきます。

代表的な作成方法として「ハイポリゴンモデルからのベイク」と「グレースケール画像からの変換」の二つがあります。

ハイポリゴンからのベイク:最高品質の法線マップ作成

最も高品質な法線マップを作成する方法が、ハイポリゴン(高解像度)モデルの法線情報をローポリゴン(低解像度)モデルのUV空間に「焼き付ける(ベイク:Bake)」手法です。

Blenderでの法線マップベイクの基本手順

手順1:ハイポリゴンモデルとローポリゴンモデルを用意する

手順2:ローポリゴンモデルにUV展開を行う(UV Unwrap)

手順3:ローポリゴンモデルのマテリアルに空の画像テクスチャノードを追加し、ベイク先の画像を作成する

手順4:ハイポリゴン・ローポリゴン両モデルを選択し、ローポリゴンをアクティブにする

手順5:レンダープロパティ → ベイク → タイプを「法線」に設定、Selected to Active を有効にする

手順6:ベイクを実行 → 法線マップ画像が生成される

手順7:画像を PNG または EXR ファイルとして保存する

この手法では、ゲームキャラクターや小道具などのハイポリゴンスカルプト(ZBrushなどで作成したリアルな彫刻)の表面の細かな凹凸・しわ・傷などの情報をすべてローポリゴンの法線マップに転写できます。

ゲーム業界ではこのベイク作業がほぼ必須のワークフローとして定着しており、キャラクターの肌・衣服のシワ・金属部品の細かい刻印などがすべてこの手法で表現されています。

グレースケール(ハイトマップ)からの法線マップ変換

ハイポリゴンモデルがない場合でも、グレースケールの高さ情報(ハイトマップ)から法線マップを生成することができます。

ハイトマップは明るい部分が高く(凸)、暗い部分が低い(凹)という情報をグレースケールで表したテクスチャです。

ハイトマップから法線マップへの変換は、隣接ピクセルの高さ差分から傾き(勾配)を計算することで行われます。

ハイトマップから法線マップへの変換原理

各ピクセル (x,y) の法線ベクトルは、x方向・y方向の高さ勾配から計算します。

∂h/∂x ≈ (h(x+1,y) − h(x−1,y)) ÷ 2(x方向差分)

∂h/∂y ≈ (h(x,y+1) − h(x,y−1)) ÷ 2(y方向差分)

法線ベクトル n=(−∂h/∂x, −∂h/∂y, 1) を正規化して RGB に変換します。

Substance Painter・GIMP(法線マップフィルタ)・Photoshop(NDO2プラグイン等)・xNormalなどが対応しています。

この方法は簡単に法線マップを作れますが、品質はベイク法に比べて劣ります。

タイルテクスチャ(石畳・コンクリート・木目など)の法線マップ作成には手軽で十分な場合も多く、環境・背景テクスチャの制作で広く活用されています。

SubstanceおよびAI利用による法線マップ生成

現代のテクスチャ制作では、Adobe Substance 3D Painterや Substance 3D Designer などのツールが法線マップ生成の主流となっています。

Substance Painter では3Dモデルに直接ペイントしながら、リアルタイムで法線マップを含む全テクスチャセット(アルベド・粗さ・メタリック・AOなど)を同時に管理・書き出しできます。

さらに近年は AIを使った法線マップ生成も実用化が進んでおり、単一の写真や2D画像から深度情報を推定して法線マップを自動生成するツール(NVIDIA Canvasや各種オープンソースモデル)が登場しています。

法線マップの使い方と3DCGエンジンへの適用方法を見ていこう

続いては、作成した法線マップを実際のゲームエンジン・レンダラーで使う際の適用方法と注意点を見ていきます。

UnityおよびUnreal Engineでの法線マップの設定

ゲームエンジンへの法線マップの適用は、マテリアル設定から行います。

エンジン 設定場所 テクスチャタイプ設定 注意点
Unity マテリアル → Normal Map スロット インポート設定で「Normal map」を選択 sRGBをオフにする・DXT5nmフォーマット推奨
Unreal Engine マテリアルエディタ → Normal ピン テクスチャ設定で「TC_Normalmap」を選択 DXT5(BC5)フォーマット使用・sRGBをオフ
Blender(Cycles・EEVEE) シェーダーノード → 法線マップノード カラースペースを「Non-Color」に設定 法線マップノードを必ず使用する

法線マップをインポートする際に最も重要なのはカラースペース(色空間)の設定です。

法線マップはカラー画像ではなくベクトルデータとして扱われるため、sRGB(ガンマ補正あり)ではなくリニア(ガンマ補正なし)または Non-Color として読み込む必要があります。

この設定を間違えると法線マップが正しく機能せず、表面が歪んで見えたり光の計算が不正確になったりします。

DirectXとOpenGLの法線マップの向き(G チャンネルの反転)

法線マップには DirectX 形式と OpenGL 形式という2種類があり、G チャンネル(Y方向)の向きが反転しています。

DirectX系(Unreal Engine・Substance Painterのデフォルト)は Y軸が下向き(G値が小さいほど上)であり、OpenGL系(Unity・Blender)は Y軸が上向き(G値が大きいほど上)です。

DirectX ↔ OpenGL の変換方法

G チャンネルを反転するだけで変換できます。

Photoshop:チャンネルパレットで G チャンネルを選択 → Ctrl+I で反転

Blender:ノードで Separate RGB → G を Math(1−x)で反転 → Combine RGB

Substance Painter:書き出し設定でエンジンに応じたプリセットを選択

異なるツール間でアセットを共有する際には法線マップの形式(DirectX/OpenGL)を必ず確認しましょう。

間違えた場合、表面に光が当たる方向が逆になり、凸部分が凹部分に・凹部分が凸部分に見える「法線反転」の症状が現れます。

法線マップとディスプレイスメントマップの違い

法線マップと似た概念に「ディスプレイスメントマップ(Displacement Map)」があります。

両者の根本的な違いは以下のとおりです。

比較項目 法線マップ ディスプレイスメントマップ
実際の形状変化 なし(見た目だけ) あり(頂点を実際に動かす)
シルエットへの影響 なし(輪郭は平坦なまま) あり(輪郭も変化)
処理コスト 低い 高い(細分化が必要)
用途 表面の細かいディテール 大きな形状変形・地形

法線マップは「光の見た目をだます」のに対し、ディスプレイスメントマップは「実際に形状を変える」という根本的な違いがあります。

高品質なレンダリングでは両者を組み合わせ、大きな形状変化はディスプレイスメントで・細かいディテールは法線マップでという使い分けが一般的です。

法線マップ作成のコツと品質向上のポイント

続いては、法線マップを高品質に仕上げるためのコツと、品質問題を解決するためのポイントを確認していきます。

UV展開と法線マップ品質の関係

法線マップの品質はUV展開(UV Unwrap)の質に大きく依存します。

UV展開とは、3Dモデルの表面を2Dの平面に「展開」してテクスチャを貼り付けるための作業です。

法線マップのベイクにおいてUV展開で特に重要なポイントは以下のとおりです。

UV アイランドの重なりをなくすこと(重なりがあるとベイクが正しく行われない)、重要なパーツ(顔・手など)のUVを広く取ること(テクセル密度を確保して法線の解像度を上げる)、UV境界(シーム)の位置を目立たない場所に配置すること(法線マップのシームラインが見えにくくなる)という三点が特に重要です。

ベイク時のケージ設定とレイ投影の調整

ハイポリゴンからのベイクで「法線の投影がずれて見える(ベイクエラー)」という問題が起きる場合、ケージ(Cage)設定の調整が有効です。

ケージとはローポリゴンモデルを外側に膨らませた「包み込む形状」であり、ハイポリゴンへの法線投影の範囲をこのケージで制限します。

Blenderでは「Extrusion(押し出し)」と「Max Ray Distance(最大レイ距離)」で調整でき、ハイポリゴンとローポリゴンのずれが大きいほどこの値を大きくする必要があります。

ただし値が大きすぎると意図しない箇所の法線が取り込まれて乱れが生じるため、必要最小限の押し出し量に調整することが品質向上のコツです。

法線マップのフィルタリングとミップマップ処理

法線マップをゲームエンジンで使用する際、テクスチャのミップマップ(MipMap:異なる解像度のテクスチャを事前に作成して距離に応じて切り替える技術)と法線の正規化に関する注意が必要です。

通常の色テクスチャのミップマップは隣接ピクセルを単純平均しますが、法線マップを単純平均すると法線ベクトルの大きさが1未満になり(正規化が崩れ)、光の計算が不正確になります。

これを解決するためにLEAN マッピング・CLEAN マッピング・RNM(Reoriented Normal Mapping)などの改善手法が提案されており、最新のゲームエンジンではBC5(2チャンネル圧縮)フォーマットを使ったミップマップ処理が標準化されています。

まとめ

本記事では、法線マップの定義(法線方向をRGBで表したテクスチャ)と仕組みから始まり、RGBと方向の対応・タンジェント空間・ベイクによる作成手順・ハイトマップからの変換・UnityやUnreal Engineへの適用・DirectX/OpenGL形式の違い・ディスプレイスメントマップとの使い分け・UV展開のコツ・ケージ設定・ミップマップ処理まで包括的に解説しました。

法線マップは「光をだますことで低ポリゴンモデルに高精細な質感を与える」という3DCG表現の核心技術であり、ゲーム・映画・建築ビジュアライゼーションなどあらゆるリアルタイムCG・プリレンダーCGで活用されています。

BlenderやSubstanceなどのツールを使いながら実際に手を動かすことで、本記事で解説した仕組みがより深く理解できるでしょう。