NormalMap-Online代替 · 2Dスプライト向け法線マップ作成
NormalMap-Onlineは昔から使われている無料のノーマルマップ作成サイトです。MITライセンスでページ内のローカル処理、ノーマル・ディスプレイスメント・AO・スペキュラーのタブと3Dプレビューを備えたテクスチャ向けのツールです。StudioのTextureワークスペースも無料・ローカルですが、2Dゲームのスプライト向けに作られています。輪郭から立体を作り、ライトはGodotと同じモデル、書き出したファイルはGodotとUnityで確認済み。同じCC0素材をデフォルト設定で処理すると、結果に大きな差が出ました。
NormalMap-Online（MIT、ブラウザ内で処理）は、画像をノーマル・ディスプレイスメント・アンビエントオクルージョン・スペキュラーのマップに変換します。Strength、Level、Blur/Sharp、Sobel・Scharrのフィルター、R・G・高さの反転スイッチがあり、結果を3Dの形状に貼って見せ、別々の方向から照らした写真4枚からノーマルマップを作ることもできます。Studioのテクスチャ作業画面は2Dスプライト向けで、シルエットからの面取り、Godotに従う2Dライトのプレビュー、GL・DXの判定、検証済みのGodot 4・Unity 6書き出しがあります。同じCC0のスプライトを既定設定で比べると、あちらの出力は実際の法線からかなり遠く、赤が反転していました。
- Godot 4 2D lights検証済み· Godot 4.7.2
- PNG set + JSON通常ファイル
- Unity 6 URP 2D検証済み· Unity 6000.5.3f1 (URP 17.5)
別々の2つの仕事：表面とスプライト
NormalMap-Onlineは画像を高さマップとして扱います。明るさが高さで、選んだフィルターが勾配を求め、Strength・Level・Blur/Sharpで結果を整えます。写真に撮った表面やタイル状のテクスチャに向いています。スプライトはシルエットの所で明るさに高さの情報がないため、面取りがないと縁が平らなまま残ります。3Dから描画した小惑星では、その既定値は実際の法線から61.1°、Studioは20.0°でした。
測定では、その既定の出力は赤チャンネルが反転しており（実際の法線との相関 −0.58）、zがとても低いものでした。ページにはInvert R・Invert GのスイッチとZ Rangeの設定があるので、それで作ったスプライトが左右逆から照らされるなら、まずInvert Rを確認してください。Studioのチェックパネルは、スプライトではこうしたマップを「赤が反転」と報告し、赤を反転（X−）で直します。
レンガのテクスチャでは両ツールとも繰り返しが正確でした（ロール誤差0）。単純なタイル状テクスチャなら、違いは推定の近さ（色の画像から作ったレンガで65.6°対14.7°）と、各ツールが出せる追加のマップです。
マップの後、Studioは2Dゲームに必要なものを足します。スプライトの上でドラッグするライト、フレームごとのシート、_n と _n_dx のファイル、エンジン用バンドルです。NormalMap-Onlineはダウンロードで終わります。
- フォトメトリックステレオ
- 同じ表面を複数の方向から照らした写真から法線を復元する方法。
- Invert R / G
- XやYの符号を変えるスイッチ。誤るとスプライトが逆側から照らされます。
- 面取り（ベベル）
- 透明な縁から立ち上がる高さ。スプライトの輪郭に立体を与える部分。
できること
- 透明部分のあるスプライトは輪郭からベベルを作るので、縁にだけ法線があって内側が平らなまま、ということになりません。
- 開いたノーマルマップは使う前にチェック。OpenGLかDirectXかを信頼度つきで示し、スプライトなら赤チャンネルの反転も検出。「It is OpenGL / It is DirectX」やFlip red (X−)を押すまで何も変えません。
- プレビューはGodotの描き方どおりにライティングした2D画面（基準と1/255以内）で、点光源を8個までスプライトの上にドラッグで置けます。
- 書き出しは対象ごとのフォルダ：ライト付きのGodotシーン、Unity 6 URP 2D用インポーター、または両方の規約（_n・_n_dx）のノーマルマップと16ビットのハイトマップを含むPNG一式。
同じ素材で比べたNerulio StudioとNormalMap-Online
実際の正解ノーマルマップとの平均角度で、低いほど正確です。NormalMap-Onlineは実際のサイトで、画像を高さ入力として読み込みデフォルト設定で処理しました。
| Nerulio Studio | NormalMap-Online | |
|---|---|---|
| 小惑星（3Dモデルから描画した法線） | 20.0° | 61.1° |
| 手描きのドット絵のたいまつ | 38.1° | 87.1° |
| レンガ：カラー画像から / 8ビットのハイトマップから | 14.7° / 8.8°、ロール誤差0 | 65.6° / 77.8°、この素材ではロール誤差0 |
| デフォルト出力をStudioのチェックで読むと | OpenGL、高 | 赤が反転（相関−0.58）、zが非常に低い。「赤が反転」と表示 |
| 透明部分のあるスプライト | 輪郭からベベル、大きさに合わせて調整 | ベベルなし |
| プレビュー | Godotのライトモデルと1/255以内で一致する2Dライティング画面 | 3D形状：立方体、平面、球、円柱、ティーポット、自前の.obj |
| エンジンの設定 | ライト付きGodotシーンとUnityインポーター（どちらも検証済み） | PNGをダウンロードしてエンジン側で手作業 |
| 動作環境 | ブラウザ、ローカル、無料 | ブラウザ、ローカル、無料、MITライセンス |
この数値の出典: docs/STUDIO-TEXTURE.md (Head-to-head, 2026-09-24)
NormalMap-Onlineのほうが向いている場合
- フォトメトリックステレオ：上・左・右・下から照らした実物の写真4枚からノーマルマップを作れます。Studioにはこの機能はありません。
- ディスプレイスメントとスペキュラーのタブがそれぞれ設定付きで分かれ、自前の.objモデルを含む3D形状で確認できる。
- 「Download all」付きの一括処理で、複数のテクスチャをまとめて処理。
- MITのオープンソースなので、自分でホストしたり改造したりできる。
使い方
- テクスチャかスプライトをこのページにドロップ。TextureワークスペースがSpriteかTileable textureを提案し、すぐにマップを生成。
- NormalMap-Onlineで作ったマップを使うなら元の絵と一緒に開いてソースに選び、Checkパネルが赤の反転を示したらFlip red (X−)を押す。
- Normal・Lit・Maps表示を切り替え、テクスチャならTで3×3に並べて確認。
- Export（Ctrl+E）で_nと_n_dx入りのPNG一式、またはGodot・Unity用フォルダを書き出し。
ほかの方法
| 方法 | こんなときに向いています |
|---|---|
| NormalMap-Online | 実際の表面の写真（上・左・右・下から照らした4枚）、ディスプレイスメント・AO・スペキュラーのタブを1か所で、球・ティーポット・自分のモデルに貼ってすぐ確認、バッチモード、JPG・TIFFでの出力、自分でホストできるMITのプロジェクトがほしいとき。 |
| Nerulio Studioのテクスチャ | 透過付きのスプライト、アニメーションのシート、GodotやUnityですぐ使える結果、規約を確かめたいよそのマップ。 |
| テクスチャラボの高さ → ノーマル | Sobel・Scharr・Sobel 5×5、Wrap、OpenGL・DirectXで、高さ画像から単純な勾配のノーマルマップを作るとき。NormalMap-Onlineの中心的な機能に近いものです。 |
エンジン別の書き出しと検証方法
「検証済み」は、実際のCC0アセットから書き出したファイルを本物のエンジン・ツールで読み込み、元データと比較したという意味です。読み込んでいない形式はそのように表示します。
| 書き出し先 | ファイル | 検証 |
|---|---|---|
| Godot 4 2D lights | _lit.tscn · CanvasTexture .tres · normal / specular PNG | 検証済み Godot 4.7.2実在のCC0ケース6件をGodot（gl_compatibility）で描画し、確認した全フレームがStudioのライティングプレビューと1/255以内で一致。緑を反転した同じ描画は3.8〜37段階ずれるため、規約の誤りを検出できます。 |
| Unity 6 URP 2D | PNG · nerulio-texture.json · Editor/NerulioNormalMapImporter.cs | 検証済み Unity 6000.5.3f1 (URP 17.5)12回中12回合格（6ケース×ガンマ・リニア色空間）：URPが適用したライティングが書き出したノーマルマップと一致（平均誤差0.0037〜0.0085）。光の減衰はURP独自なので、明るさはプレビューではなくUnityの基準です。 |
| PNG set + JSON | albedo · _n (OpenGL) · _n_dx (DirectX) · 16-bit height · AO · specular · manifest | 通常ファイルどのエンジン・ツールでも使える通常ファイルで、エンジンでの実行検証はうたっていません。 |
検証の根拠
Godot 4.7.2で実在のCC0ケース6件（ドット絵、HDスプライト、繰り返しテクスチャ、読み込んだDirectXマップ）を描画し、確認した全フレームがStudioのプレビューと1/255以内。Unity 6000.5 URP 2D：12回中12回合格（6ケース×ガンマ・リニア）。規約が分かっている実在のマップでOpenGL/DirectX判定：1Kのマップ128枚で100%正解、1,562サンプル中で誤った「高」判定は0件（「緑が明るければOpenGL」という単純な規則は46%）。
制限
- フォトメトリックステレオはなく、写真からノーマルマップは作れません。
- 自分の3Dモデルでのプレビューはなく、Studioの3D表示は球か平面だけです。
- フォルダー単位のバッチ処理はありません。
- マップはPNGでのみ保存します（JPG・TIFFなし）。
- 透明な縁がない絵（繰り返しテクスチャ）では、赤の反転とDirectXの緑を区別できません。チェックパネルがそれを伝え、「赤を反転」を用意しています。
- シートはスプライト作業画面でフレームを切るまで1枚の絵としてライティングされます。テクスチャ作業画面ではフレームを切りません。
- リムライトはプレビュー専用で、Unityにはスペキュラーマップを書き出しません（Godotには書き出し）。
- Unityは独自の光の減衰を使います。書き出したノーマルマップはUnityで検証済みですが、明るさの曲線はUnityのものです。
バージョンと出典
2026-09-24にNormalMap-Onlineの実際のサイトをPlaywrightで操作し、画像を高さの入力として読み込み、既定設定で結果をダウンロードして実際の正解の法線と比べました。Nerulioは推奨設定のまま並べて測定しています。上のコントロール名は2026-09-28にそのページで読んだもので、ライセンスとローカル処理はリポジトリに記載されています。
参照した公式ドキュメント
よくある質問
NormalMap-Onlineで作ったスプライトが逆側から照らされて見えます。
今回の比較では、デフォルト出力の赤チャンネルが反転していました（正解との相関−0.58）。そのため左からの光が右からの光のように見えます。Studioのチェックはスプライトでこれを「赤が反転」と表示し、読み込み時にFlip red (X−)で直せます（取り消し可）。
NormalMap-Onlineのノーマルマップは並べたときに継ぎ目が出ますか？
今回のレンガのテクスチャでは出ませんでした（ロール誤差0、Wrapを使ったStudioと同じ）。以前の調査では別の画像で境界の帯が見えましたが、今回は再現しなかったので、ご自分のテクスチャで確かめてください。Studioの繰り返しテストは継ぎ目がなければ0を示します。
Studioでもディスプレイスメントやスペキュラーのマップは作れますか？
16ビットのハイトマップ、AO、Godot用のスペキュラーマップを書き出します。色から推定したラフネスとスペキュラーは近似値と明記しています。写真から作るフォトメトリックステレオはありません。
無料ですか？アカウントは必要ですか？
このページの機能はすべて無料で、アカウントなしで使えます。透かしや制限された書き出しはありません。
スプライトはアップロードされますか？
いいえ。Studioはこのブラウザのタブ内でデコード・パック・書き出しを行います。プロジェクトはブラウザ（IndexedDB）に自動保存され、.nerulioファイルとして保存できます。
Asepriteやエンジンのプラグインは必要ですか？
いいえ。.asepriteファイルはブラウザで読み書きします。エンジン別のバンドルには必要なものが入っています（Godotはインポート設定とシーン、UnityとGodotのタイルセットは小さなエディタースクリプト）。