NormalMap-Online代替 · 2Dスプライト向け法線マップ作成
NormalMap-Onlineは昔から使われている無料のノーマルマップ作成サイトです。MITライセンスでページ内のローカル処理、ノーマル・ディスプレイスメント・AO・スペキュラーのタブと3Dプレビューを備えたテクスチャ向けのツールです。StudioのTextureワークスペースも無料・ローカルですが、2Dゲームのスプライト向けに作られています。輪郭から立体を作り、ライトはGodotと同じモデル、書き出したファイルはGodotとUnityで確認済み。同じCC0素材をデフォルト設定で処理すると、結果に大きな差が出ました。
- Godot 4 2D lights検証済み· Godot 4.7.2
- PNG set + JSON通常ファイル
- Unity 6 URP 2D検証済み· Unity 6000.5.3f1 (URP 17.5)
できること
- 透明部分のあるスプライトは輪郭からベベルを作るので、縁にだけ法線があって内側が平らなまま、ということになりません。
- 開いたノーマルマップは使う前にチェック。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用フォルダを書き出し。
エンジン別の書き出しと検証方法
「検証済み」は、実際の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%）。
制限
- 透明な縁がない絵（繰り返しテクスチャ）では、赤の反転とDirectXの緑を区別できません。チェックパネルがそれを伝え、「赤を反転」を用意しています。
- シートはスプライト作業画面でフレームを切るまで1枚の絵としてライティングされます。テクスチャ作業画面ではフレームを切りません。
- リムライトはプレビュー専用で、Unityにはスペキュラーマップを書き出しません（Godotには書き出し）。
- Unityは独自の光の減衰を使います。書き出したノーマルマップはUnityで検証済みですが、明るさの曲線はUnityのものです。
よくある質問
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のタイルセットは小さなエディタースクリプト）。