写真やハイトマップをアップロードするだけで、ノーマルマップを自動生成。 光を当てたプレビューで仕上がりを確認しながら、Unity・Unreal Engine向けの緑チャンネルを切り替えられます。
このツールはブラウザの中だけで動いています。入力した内容が、外部に送信されることはありません。入力内容は外部に送信されません。
詳しくノーマルマップ生成ツールとは？画像から凹凸を自動計算する仕組み
本ツールは、写真やハイトマップ（グレースケール画像）をアップロードするだけで、明るさの変化を凹凸情報として解析し、ノーマルマップを自動生成できる無料のオンラインツールです。3Dモデルの表面に細かな凹凸を表現したいものの、 専用のテクスチャ制作ソフトを用意するほどではない、というシーンで活躍します。
生成したノーマルマップは、光源の角度を自由に操作できるライティングプレビューでその場で確認できるため、実際に3Dモデルへ適用する前に凹凸の見え方を把握できます。 凹凸の強さやノイズを抑える「ぼかし」、タイル状に繰り返し使うテクスチャ向けのシームレス（継ぎ目なし）処理にも対応しています。
最大の特徴は、UnityとUnreal Engineで定義が異なる緑チャンネル（Y軸）をワンクリックで切り替えられる点です。どちらのエンジン向けに書き出すかを選ぶだけで、凹凸の向きが反転する問題を未然に防げます。
こんなシーンで便利です
メタバース・ゲーム制作でのテクスチャ素材作り
布地や石壁、肌の質感などの写真から、手軽にノーマルマップを生成。3Dモデルの質感表現を底上げするための下準備として活用できます。
Unity・Unreal Engineへの実装前チェック
使用するエンジンに合わせて緑チャンネルの向きを切り替えてから書き出すことで、現場で起きがちな「凹凸が逆になる」トラブルを防げます。
タイリング（繰り返し）テクスチャの継ぎ目確認
地面やレンガ壁など、敷き詰めて使うテクスチャ向けに、ラップ処理とタイリングプレビューで継ぎ目の目立ちやすさをその場で確認できます。
3DCGを学ぶ学生の演習・課題制作
ノーマルマップの仕組みを、強さやぼかしのパラメータを動かしながら視覚的に学べます。授業の課題やポートフォリオ制作の素材作りにも使えます。
使い方は簡単 4ステップ
- ノーマルマップにしたい画像（写真またはグレースケールのハイトマップ）をドラッグ&ドロップ、またはファイル選択で読み込みます。
- 「強さ」「ぼかし」のスライダーを動かし、凹凸の出方を調整します。写真の場合は高さ情報として使うチャンネル（輝度・赤・緑・青）も選べます。
- 「Unity（OpenGL）」「Unreal Engine（DirectX）」のボタンで、使用するゲームエンジンに合わせて緑チャンネルの向きを選択します。
- ライティングプレビューで光の角度を動かしながら仕上がりを確認し、問題なければPNG形式でダウンロードします。
※タイル状に使うテクスチャの場合は、エッジ処理を「ラップ（タイリング対応）」に切り替え、タイリングプレビューで継ぎ目を確認してから書き出すと安心です。
ご利用時の注意点
- 処理負荷軽減のため、プレビューは画像の長辺を一定サイズに縮小して計算しています。ダウンロード時は、より高い解像度で再計算してから書き出すため、プレビューよりも精細な仕上がりになります。
- 緑チャンネル（Y軸）の扱いは、使用するシェーダーやプラグインの設定によって異なる場合があります。書き出したノーマルマップは、実際に使用するエンジン・シェーダー上で最終確認することをおすすめします。
- 極端にノイズの多い写真や、明暗差が少ない写真は、凹凸が意図通りに表現されないことがあります。その場合は「ぼかし」を強めにするか、コントラストを調整した画像を事前にご用意ください。
- 完全無料・安全：アップロードした画像は一切サーバーに送信されず、すべてブラウザ内（メモリ上）で処理されます。ページを閉じればデータは即座に消去されます。
Unity・Unreal Engineの緑チャンネル（Y軸）対応表
主要なゲームエンジン・用途別に、一般的に採用されている緑チャンネルの向きの目安をまとめました。実際の挙動はシェーダーやインポート設定により変わる場合があります。
| ゲームエンジン・用途 | 一般的な形式 | 緑チャンネルの向き |
|---|---|---|
| Unity（Standard / URP / HDRP） | OpenGL形式 | +Y（上向き） |
| Unreal Engine | DirectX形式 | −Y（下向き・反転） |
| Blender（デフォルト設定） | OpenGL形式 | +Y（上向き） |
| Substance Painter / Designer（既定） | OpenGL形式 | +Y（上向き） |
| 3ds Max 標準マテリアル | DirectX形式 | −Y（下向き・反転） |
【判断に迷ったときの確認方法】
ノーマルマップをエンジンに読み込んだ際、凹凸が意図と逆（出っ張りが凹んで見える、またはその逆）に表示される場合は、緑チャンネルの向きが合っていない典型的なサインです。本ツールで緑チャンネルの設定を切り替えて再書き出しし、見え方が正しくなるかを確認してください。
※上表はあくまで一般的な既定設定の目安です。プロジェクトやシェーダーのカスタム設定によっては異なる場合があるため、最終的には実機・実エンジン上での見え方を優先してください。
ノーマルマップの仕組みと、制作現場で押さえておきたいポイント
写真からノーマルマップを作る際に知っておきたい基礎知識と、現場でつまずきやすいポイントを解説します。
結論：ノーマルマップは「高さの変化」を色（RGB）に変換したテクスチャ
ノーマルマップは、表面の各点における法線ベクトル（面が向いている方向）を赤＝X軸、緑＝Y軸、青＝Z軸としてRGBカラーに格納したテクスチャです。
ハイトマップ（高さマップ）の明るさの変化を読み取り、隣り合うピクセルとの高低差から法線の傾きを逆算することで、ポリゴン数を増やさずに細かな凹凸をライティングで表現できます。これにより、ゲームやメタバースのような、処理負荷を抑えつつ質感を高めたい用途で広く使われています。
緑チャンネル（Y軸）の向きが逆転する理由と、見分け方
ノーマルマップの緑チャンネルの向きが逆転する理由は、OpenGL系とDirectX系でテクスチャ座標系のY軸の扱いが異なるためです。同じ凹凸データでも、どちらの座標系を前提にエンコードするかによって緑チャンネルの明暗が反転します。
見分け方としては、同じノーマルマップを異なるエンジンに読み込んだ際、出っ張っているはずの部分が凹んで見える（またはその逆）場合、緑チャンネルの向きが合っていない可能性が高いというのが実務上の目安です。
強さ・ぼかしの調整が、見た目の質感に与える影響
「強さ」を上げすぎると、本来は滑らかな起伏であるはずの部分が不自然にギザギザとしたノイズに見えることがあります。逆に弱すぎると、凹凸がほとんど感じられない平坦な仕上がりになります。
写真由来のハイトマップは微細なノイズを含みやすいため、「ぼかし」を軽くかけてから強さを調整すると、自然な質感に近づけやすくなります。
タイリングテクスチャでノーマルマップの継ぎ目を目立たせないコツ
地面やレンガ壁のように繰り返し敷き詰めて使うテクスチャでは、画像の端で凹凸の計算が不連続になると、タイルを並べた際に継ぎ目が目立ってしまいます。
この問題を避けるには、画像の端と反対側の端をつなげて計算する「ラップ（タイリング対応）」のエッジ処理を使用し、あらかじめタイリングプレビューで継ぎ目の見え方を確認してから書き出すことが実務上のコツです。
よくある失敗と対策
緑チャンネルの向きを確認せずに書き出し、エンジン上で凹凸が反転して見える
UnityとUnreal Engineで緑チャンネルの向きが異なることを知らずにノーマルマップを書き出し、実際にモデルへ適用したところ、出っ張っているはずの部分が凹んで見えるなど、意図と逆の陰影になってしまう失敗です。
💡 対策・解決策を見る▼
強さを上げすぎてノイズが目立ち、不自然な凹凸になってしまう
写真由来のハイトマップに対して「強さ」を過度に上げた結果、本来なだらかであるべき部分までギザギザとしたノイズが強調され、不自然な質感になってしまう失敗です。
💡 対策・解決策を見る▼
タイリング用テクスチャをクランプ処理のまま書き出し、継ぎ目が目立ってしまう
地面やレンガ壁などタイル状に繰り返し使うテクスチャを、端の処理が「クランプ」のままノーマルマップ化してしまい、実際に敷き詰めた際に境界線がくっきりと見えてしまう失敗です。
💡 対策・解決策を見る▼
明暗差の少ない写真をそのまま使い、凹凸がほとんど感じられない仕上がりになる
全体的に明るさが均一なコンクリートや紙などの写真をそのまま読み込み、強さを調整しても凹凸がほとんど表現されない、のっぺりとした仕上がりになってしまう失敗です。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.ノーマルマップとは何ですか、なぜ緑チャンネル（Y軸）の向きに注意が必要なのですか
A. ノーマルマップは、ポリゴン数を増やさずに表面の凹凸をライティングで表現するためのテクスチャで、RGBの各チャンネルに法線ベクトルのX・Y・Z成分を格納したものです。問題は緑チャンネル（Y軸）の向きの定義がゲームエンジンによって異なる点で、OpenGL系（Unityなど）とDirectX系（Unreal Engineなど）では上下が反転しています。向きが合っていないと、凹凸が意図と逆（出っ張りが凹んで見える）に表示されてしまうため、使用するエンジンに合わせた緑チャンネルの切り替えが欠かせません。
Q.UnityとUnreal Engineでは、どちらの緑チャンネルの向きを選べばよいですか
A. 一般的に、UnityはOpenGL形式（緑チャンネルが+Y、通常のノーマルマップ）、Unreal EngineはDirectX形式（緑チャンネルが-Y、反転）を標準として扱います。本ツールでは「Unity（OpenGL / +Y）」「Unreal Engine（DirectX / −Y）」のボタンで切り替えるだけで、緑チャンネルの反転処理を自動で行います。なお、使用するシェーダーやプラグインの設定によって扱いが変わる場合があるため、実際に書き出したノーマルマップをエンジン上で確認することをおすすめします。
Q.写真（カラー画像）からでもノーマルマップは作れますか、それともグレースケールのハイトマップが必要ですか
A. どちらからでも作成できます。カラー写真を読み込んだ場合は、輝度・赤・緑・青のいずれかのチャンネルを高さ情報として自動抽出してからノーマルマップを計算します。すでにグレースケールのハイトマップ（高さマップ）をお持ちの場合は、そのまま読み込んでいただければ明るさがそのまま高さとして扱われます。
Q.タイリング（繰り返し）するテクスチャ用にシームレスなノーマルマップを作れますか
A. はい。「エッジ処理」を「ラップ（タイリング対応）」に切り替えると、画像の端を反対側の端とつなげて凹凸を計算するため、タイル状に並べたときの継ぎ目が目立ちにくいノーマルマップを生成できます。あわせて「タイリングプレビュー」をオンにすると、生成結果を2×2に並べた状態でその場で継ぎ目を確認できます。
Q.アップロードした画像が外部に送信される心配はありませんか
A. 一切ありません。本ツールは画像の読み込みからノーマルマップの計算、プレビュー描画まですべてお使いのブラウザ内（Canvas処理）だけで行う完全ローカル処理型です。画像が当サイトのサーバーへ送信されることはなく、ページを閉じればデータはメモリ上から消去されます。未公開のゲーム素材でも安心してご利用いただけます。
Q.凹凸がうまく表現されない、または意図と逆に見える場合はどう調整すればよいですか
A. まず「強さ」のスライダーを上げると凹凸がはっきりします。写真のノイズで凹凸が荒く出る場合は「ぼかし」を少し強めると滑らかになります。出っ張りと凹みが逆に感じる場合は「高さを反転」をオンにしてください。それでも向きが合わない場合は、緑チャンネルの設定（Unity／Unreal Engine）が使用エンジンと一致しているかをご確認ください。
Q.生成したノーマルマップはどのような形式でダウンロードできますか
A. PNG形式でダウンロードできます。プレビューに反映されているすべての設定（強さ・ぼかし・緑チャンネルの向き・エッジ処理）を反映した状態で画像として書き出されるため、ダウンロード後すぐにUnityやUnreal Engine、Blenderなどの3DCGソフトに読み込んでご利用いただけます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。