3DCGやゲーム開発で「リアルな凹凸感を出したい」と思ったことはありませんか？ポリゴン数を増やさずにディテールを追加できるノーマルマップは、現代のゲームグラフィックスには欠かせないテクニックです。このガイドでは、ノーマルマップの仕組みから、ブラウザだけで無料生成する方法まで解説します。
ノーマルマップとは？
ノーマルマップ（法線マップ）は、3Dメッシュの各ピクセルにおける表面の向き（法線ベクトル）をRGBカラーとして記録したテクスチャです。レンダリング時にライティング計算でこの情報を使うことで、実際にはフラットなポリゴンでも、ザラザラした石の表面や金属の打ち傷のような凹凸をリアルに表現できます。
ノーマルマップの色の意味は次のとおりです：
- R（赤）：X軸方向（左右）の法線成分
- G（緑）：Y軸方向（上下）の法線成分
- B（青）：Z軸方向（奥行き・手前方向）の法線成分
ノーマルマップが全体的に青紫色（#8080FF）に見えるのは、大半のピクセルの法線がまっすぐカメラ側を向いているためです。
ノーマルマップが必要な場面
- ゲーム開発：低ポリゴンモデルにディテールを追加。Unreal Engineでのリアルな壁・地面テクスチャ、Unityでのキャラクタースキンなど
- Blenderレンダリング：プリンシプルBSDFのNormal入力に接続して、布・皮革・コンクリートなどの質感を向上
- VR／ARコンテンツ：ポリゴン数を抑えてパフォーマンスを確保しつつ、視覚的なリッチさを維持
- ウェブ3D（Three.js・Babylon.js）：ブラウザレンダリングの負荷を下げながらリアルな質感を実現
オンラインツールでのノーマルマップ生成手順
- QuickTools ノーマルマップ生成ツールを開く
- ハイトマップ（白黒の凹凸画像）またはカラーテクスチャをドロップかクリックで読み込む
- Strength（強度）スライダーで凹凸の深さを調整する（推奨：石なら高め、布なら低め）
- Blur（ブラー）スライダーでノイズを除去し、なめらかな法線にする
- プレビューで左が元画像、右がノーマルマップであることを確認する
- 「Download Normal Map」ボタンでPNGをダウンロードする
強度・ブラーの設定ガイド
Strength（強度）の目安
Strengthは法線の傾きの急峻さを決めます。数値が高いほど凹凸がシャープに、低いほどなだらかになります。
- 0.5〜2.0：布・レザー・塗装面などなめらかな素材
- 2.0〜5.0：木材・プラスチック・コンクリートなど中程度の凹凸
- 5.0〜15.0：岩・レンガ・錆びた金属などザラザラした素材
Blur（ブラー）の目安
Blurはソーベルフィルター適用前に画像をぼかすことで、ピクセル単位のノイズを滑らかにします。
- 0〜2：細かいディテールを維持したいシャープなテクスチャ
- 3〜6：スキャンした写真テクスチャや中程度のノイズがある画像
- 7〜10：荒いノイズ除去や非常になめらかな法線が必要な場合
各3Dソフトへのインポート方法
Blenderの場合
- マテリアルのノードエディターを開く
- 「Image Texture」ノードを追加し、ダウンロードしたノーマルマップを読み込む
- Colorspace を「Non-Color」に変更（重要：リニア変換を防ぐため）
- 「Normal Map」ノードを追加し、Image TextureのColorをNormal MapのColorに接続
- Normal MapのNormalをプリンシプルBSDFのNormalに接続
Unityの場合
- ノーマルマップPNGをProjectウィンドウにインポート
- テクスチャのInspectorで「Texture Type」を「Normal map」に変更してApply
- マテリアルの「Normal Map」スロットにドラッグ＆ドロップ
Unreal Engineの場合
- Content BrowserにノーマルマップPNGをインポート
- テクスチャアセットを開き、「Compression Settings」を「Normalmap (DXT5, BC5 on DX11)」に設定
- マテリアルエディターの「Normal」ピンに接続
ハイトマップとノーマルマップの違い
よく混同されますが、ハイトマップ（高さマップ）は白黒の輝度で凹凸の高さを表したテクスチャです。ノーマルマップ生成ツールはこのハイトマップから法線方向を計算してRGBへ変換します。一方、ノーマルマップはすでに法線ベクトルが色として格納されており、ライティング計算に直接使える状態です。
Blenderなど一部のソフトでは、ハイトマップを「ディスプレイスメントマップ」として使って実際にメッシュを変形させることもできますが、リアルタイムゲームではパフォーマンス上の理由からノーマルマップが広く使われます。
よくある質問
カラーテクスチャからノーマルマップを生成できますか？
はい、可能です。カラー画像は輝度（明暗）に変換されてからソーベルフィルターが適用されます。ただし、元画像に色のコントラストがあっても凹凸が正確に反映されるとは限りません。最も精度が高いのは、グレースケールのハイトマップを使う方法です。
生成したノーマルマップが暗すぎる・青一色に見えます
Strengthを上げてみてください。元画像のコントラストが低い場合、法線の変化が小さくなり青一色に近いマップになります。また、Blenderで読み込む際にColorspaceがsRGBになっていると正しく表示されません。必ず「Non-Color」に設定してください。
DirectX形式とOpenGL形式の違いは何ですか？
Y軸（緑チャンネル）の向きが逆になります。DirectX形式は緑が下向き（DX座標系）、OpenGL形式は緑が上向きです。UnrealEngineはデフォルトでDirectX形式、BlenderはOpenGL形式を使用します。間違ったフォーマットを使うと、光の当たり方が逆になるので注意が必要です。