ノーマルマップ合成ツール（NormalMapMerger）

無料で、

Web上で、

簡単に、

使えます！！！

↓ ご利用はこちら ↓

https://hhotatea.github.io/NormalMapMerger/

規約

本ノーマルマップ合成ツールにより生成された画像（以下「出力画像」）は、下記の条件で自由にご利用いただけます。

✅ 利用可能な範囲

個人・法人問わず、自由に 商用・非商用問わず利用・編集・再配布 できます。

出力画像の使用にあたり、クレジット表記や許諾申請は不要 です。

利用例：

ゲーム開発、3DCG制作、動画編集、印刷物、教材など

製品への同梱、商用サービスへの組み込み

❌ 禁止事項

本ツールの出力物を、第三者が作成したと偽る行為

本ツール自体を改変・再配布し、有償提供する行為

⚠️ 免責事項

本ツールの使用により生じたいかなる損害・問題についても、開発者は一切責任を負いません。

また、本ツールは予告なく仕様変更・停止される可能性があります。

🆓 ライセンス表記

必要な場合は、以下の表記をお使いください。

NormalMapMerger by@HhotateA_xR

説明

ノーマルマップ合成ツールを作りました（React + TypeScript + WebCanvas）

Unity などのゲームエンジンや 3DCG ツールで頻繁に使われる「ノーマルマップ」。 モデルの表面の凹凸を、ポリゴン数を増やすことなく表現できるため非常に便利です。 しかし、複数のノーマルマップを合成したい場面って、意外と多くありませんか？

服の「大きなシワ」と「布地の質感」を一つにまとめたい

地形の「丘やくぼみ」＋「岩の細かいディテール」を重ねたい

そんな用途のために、ノーマルマップを合成できる Web ツールを作ってみました！ ブラウザだけで完結し、インストール不要。 React + TypeScript + WebCanvas で構成されています。

原理

ノーマルマップとは、「面の向き（法線）」を RGB 画像として表現したものです。 一般に、R/G/B 成分が X/Y/Z に対応し、たとえば：

(0, 0, 1) → 正面を向いている（＝真っ青）

(1, 0, 0) → 右方向（赤っぽい）

(0, 1, 0) → 上方向（緑っぽい）

多くのノーマルマップが青みがかっているのは、「正面を向いた面」が多いからなんですね。 では、「2つのノーマルマップを合成する」とはどういう意味か、もう少し掘り下げてみましょう。

具体例

ここでは以下のように用語を定義します：

base_normal：ベースとなる法線（例：布地）

add_normal：追加したい変化（例：しわ）

result_normal：合成結果

Case 1：両方とも正面

base_normal = (0, 0, 1) add_normal = (0, 0, 1) → result_normal = (0, 0, 1)

Case 2：add_normal が正面

base_normal = (0, 1, 0)（上向き） add_normal = (0, 0, 1)（正面） → result_normal = (0, 1, 0)

add_normal は何も変化を加えないので、base_normal がそのまま使われます。

Case 3：add_normal による回転

base_normal = (0, 0, 1)（正面） add_normal = (0, 1, 0)（上向き） → result_normal = (0, 1, 0)

この場合、base_normal を「Z ベクトルを add_normal に向ける回転」で回転させることになります。

計算式

「Z ベクトルを add_normal に向ける回転」とは：

回転軸：axis = cross([0, 0, 1], add_normal)

回転角：angle = acos(dot([0, 0, 1], add_normal))

適用：rotate(base_normal, axis, angle × intensity)

このようにして、全ピクセルで法線ベクトルを合成していきます。

あとがき

このツールは React の勉強を兼ねて制作しました。 普段業務ではあまり触れない、ベクトル演算や Canvas 処理も含まれており、とても良いトレーニングになりました。 デザインや UI 調整は ChatGPT に大きく助けられました。