ノーマルマップ変換器 —— 画像から凹凸を作る【ブラウザで動く / 同じ店に無料の道具あり / Y+ Y− 両対応 / Unity / VRChat】

手持ちの画像を、明るさ = 高さとして読んでノーマルマップに変えるブラウザの道具です。

HTML を 1 枚ダブルクリックするだけで動きます。導入も通信も要りません。

この道具の計算は、別に書いた参照実装と 1 画素ずつ突き合わせてあります。検算用の画像 64×64 を 4 通りのつまみで

変換した 12,288 バイトが、4 通りとも参照実装と 1 バイトも違いませんでした(2026-09-17 の実測)。

同じ突き合わせを、同梱の「自己検算」ボタンでお手元のブラウザでも実行できます。

■ できること

・PNG / JPEG / WebP を読み、接空間のノーマルマップを PNG で書き出す

・強さ(白と黒の差を何画素分の高さと見るか)/ ぼかし / 高さの向き / G の向き / 端の扱い を、その場で見ながら決める

・陰影プレビューの上をドラッグして光の向きを回し、凹凸が正しい向きに出ているか確かめる

・タイル(並べて使う柄)と 端を伸ばす(1 枚で使う絵)を切り替える

■ G の向き

Unity のマニュアルには「Unity uses Y+ normal maps, sometimes known as OpenGL format.」とあります(2026-09-17 に確認)。

この道具は Y+ を既定にし、Y−(DirectX 系)も 1 押しで書き出せます。

差し込む先が決めることなので、分からないときは両方書き出して、凹凸が正しく見えるほうをお使いください。

■ できないこと(買う前に読んでください)

・写真から本当の凹凸は推定できません。明るさを高さと見なすだけです

・影が焼き込まれた写真は、その影がそのまま凹凸になります。金属の反射や透明なものも高さとしては読めません

・高さ画像そのものは入っていません(手持ちの画像を変換する道具です)

・Unity のエディタ拡張ではありません。書き出した PNG をご自分で読み込んでください

・長辺 2048 を超える画像は、処理の前に 2048 まで縮めます

■ 買わなくていい人

・すでに Substance / Materialize などをお使いで、不満が無い方

・ノーマルマップを「素材として」ほしい方(これは変換する道具で、素材集ではありません)

■ 動作

・Chrome / Edge / Firefox の最近の版。読み込んだ画像はブラウザの中だけで処理され、どこにも送信されません

・再配布と転売はできません。商用の制作にはお使いいただけます

同じ作者の布地テクスチャ(ノーマルは Y+ で入っています)

変換しないでそのまま使えるノーマルマップが要るときは、同じ店に布地の詰め合わせがあります。

16 柄 × 6 色、すべて 2048×2048 の PNG。柄ごとに カラー(6 色)・ノーマル(Y+ / Unity・OpenGL)・ラフネス・AO・ORM の 5 種類が入って、全部で 160 枚です。

柄は数式で計算して書き出していて、その生成器も同梱しているので、同じ柄を後から何解像度でも作り直せます。

継ぎ目の無い布地テクスチャ 16柄×6色 2048px —— PBR 5マップ 全160枚(生成器同梱)/ ¥3,000

https://samupi.booth.pm/items/8869573