ノーマルマップ合成ツール（NormalMapMerger）
- ダウンロード商品ツール本体は説明文のリンクから¥ 0
- ダウンロード商品引っ越し資金の投げ銭 (Donation)¥ 500
無料で、 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 に大きく助けられました。