Normal Map TOP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】

概要 📖 – 画像から法線マップ生成

Normal Map TOPは、入力画像のエッジ (傾き) を解析して凹凸を表す法線マップを生成し、バンプマッピングに使えるテクスチャを出力する TOPです。Source で評価するチャンネル (Luminance / RGB / Alpha 等) を切替え、Method と Sample Step で傾きの計算方法と検出幅を調整します。生成した法線マップは Phong MAT や PBR MAT の Bump Map 入力に渡すことで立体感を付与できます。

主な用途 🎯

• グレースケールやカラー画像からのバンプマッピング用法線マップ生成
• Phong MAT / PBR MAT への入力としての凹凸表現 (実ジオメトリを増やさず立体感を付与)
• テキスト・ロゴ・パターン画像から立体的なレリーフ風表現の作成
• ノイズ画像を法線マップ化した水面・布・金属面の擬似的な凹凸ライティング
• アルファチャンネルへのハイトマップ出力によるディスプレイスメントとの併用

データフロー 🔄

入力 TOP (画像)
 ↓
Source で評価チャンネル (Luminance / RGB / Alpha) を抽出
 ↓
周辺ピクセルとの傾き (slope) からエッジを検出
 ↓
Sample Step で参照距離を調整
 ↓
RGB に法線ベクトルをエンコード
 ↓
出力: 法線マップ (Phong MAT / PBR MAT へ)

---

パラメータ解説 ⚙️

Normal Map Page 📋

Source .source 🎯

エッジを評価するチャンネルの選択

項目	内部名	説明
Luminance	.luminance	RGB を合成した輝度 (Luminance) からエッジ (傾き) を検出。汎用デフォルト、明暗の変化を凹凸として扱いたいとき
Red	.red	赤チャンネルのみからエッジを検出 (特定チャンネルに高さ情報を入れている場合に)
Green	.green	緑チャンネルのみからエッジを検出
Blue	.blue	青チャンネルのみからエッジを検出
Alpha	.alpha	アルファチャンネルからエッジを検出。アルファをハイトマップとして使う運用に最適
RGB Average	.rgbaverage	RGB の単純平均からエッジを検出 (Luminance より色被りの影響を受けにくい)
RGBA Average	.average	RGBA 全チャンネル平均からエッジを検出。アルファを含む全成分を均等に評価

Method .method 🧮

傾きを計算する際の参照ピクセル

項目	内部名	説明
Use Previous And Current	.prevcur	直前ピクセルと現在ピクセルから傾きを計算 (後方差分)
Use Current And Next	.curnext	現在ピクセルと次ピクセルから傾きを計算 (前方差分)
Use Previous And Next	.prevnext	直前ピクセルと次ピクセルから傾きを計算 (中心差分、左右対称で滑らか)

Sample Step .offset 📏

サンプル参照距離 (大きくするほど緩やかで太い凹凸になる):

• Sample Step (offset / offset1 / offset2): Sample Step (サンプル参照距離) — 各ピクセルから何ピクセル離れた点を比較して傾きを評価するか。値 1 で隣接ピクセル比較 (細かい凹凸)、値 3 なら 3 ピクセル離れた点を参照 (緩やかで太い凹凸)。横方向 (offset1) と縦方向 (offset2) を個別指定します。

Sample Step Unit .offsetunit 📐

サンプル距離の単位:

• Sample Step Unit: Sample Step Unit (距離単位) — Sample Step の値をどの単位で解釈するかを設定します。ピクセル基準にすると解像度依存、画像比率基準にすると解像度に依存しない見た目に保てます。

Heightmap in Alpha Channel .heightmap 🗻

アルファチャンネルへのハイトマップ出力 (法線 + 高さを 1 枚に格納):

• Heightmap in Alpha Channel: Heightmap in Alpha Channel (アルファへのハイトマップ出力) — オンにすると、RGB に法線ベクトルをエンコードしつつ、アルファチャンネルに元の高さ情報 (ハイトマップ) を格納します。後段でディスプレイスメントと法線マップを同時に使いたいときに便利です。

---

Common Page 🔧

Output Resolution .outputresolution 🖼️

出力解像度の決定方式

項目	内部名	説明
Use Input	.useinput	入力 TOP の解像度をそのまま継承
Eighth	.eighth	入力解像度の 1/8
Quarter	.quarter	入力解像度の 1/4
Half	.half	入力解像度の 1/2
2X	.2x	入力解像度の 2 倍
4X	.4x	入力解像度の 4 倍
8X	.8x	入力解像度の 8 倍
Fit Resolution	.fit	指定解像度に縦横比を保持して収める
Limit Resolution	.limit	指定解像度を上限としてクランプ
Custom Resolution	.custom	Resolution パラメータで任意指定

Resolution .resolution 📐

カスタム解像度の幅・高さ指定 (Output Resolution = Custom 等の時のみ有効):

• Resolution W: 出力幅 (ピクセル単位)。Output Resolution が Custom Resolution / Fit Resolution / Limit Resolution の時に有効
• Resolution H: 出力高 (ピクセル単位)。同上

Resolution Menu .resmenu 📋

よく使う解像度プリセットのドロップダウン:

• Resolution Menu: NTSC / PAL / HDTV 720 / HDTV 1080 / 4K UHD 等のプリセットから選択すると Resolution W / Resolution H が自動セットされる

Use Global Res Multiplier .resmult 🔢

プロジェクト全体の解像度倍率の適用:

• Use Global Res Multiplier: Project Settings の Global Resolution Multiplier をこの TOP に適用するかどうか。プロトタイプを低解像度で動かしつつ最終出力で一括フル解像度化する運用に便利

Output Aspect .outputaspect 📏

出力アスペクト比の決定方式

項目	内部名	説明
Use Input	.useinput	入力 TOP のアスペクトを継承 (伝播事故の元、非推奨)
Resolution	.resolution	解像度から自動導出 (推奨デフォルト)
Custom Aspect	.custom	Aspect1 / Aspect2 で手動指定

Aspect .aspect 📐

カスタムアスペクト比の指定 (Output Aspect = Custom Aspect の時のみ有効):

• Aspect1: 横方向アスペクト値 (Output Aspect = Custom Aspect の時のみ有効)
• Aspect2: 縦方向アスペクト値 (同上)

Input Smoothness .inputfiltertype 🎚️

入力テクスチャのサンプリング方式

項目	内部名	説明
Nearest Pixel	.nearest	最近傍ピクセルサンプリング (ピクセルアート向け、ジャギーが残る)
Interpolate Pixels	.linear	バイリニア補間 (滑らか、デフォルト)
Mipmap Pixels	.mipmap	ミップマップ補間 (縮小時のモアレ抑制、わずかにコスト高)

Fill Viewer .fillmode 🖥️

ビューア内でのテクスチャの収め方

項目	内部名	説明
Use Input	.useinput	入力 TOP の Fill Viewer 設定を継承
Fill	.fill	ビューアいっぱいに引き伸ばす (アスペクト無視)
Fit Horizontal	.width	横幅に合わせて収める (上下に余白)
Fit Vertical	.height	縦幅に合わせて収める (左右に余白)
Fit Best	.best	アスペクト保持で内側に収まる最大サイズ
Fit Outside	.outside	アスペクト保持で外側まで覆う最小サイズ (はみ出しあり)
Native Resolution	.nativeres	テクスチャのネイティブ解像度のまま等倍表示

Viewer Smoothness .filtertype 🎛️

ビューア表示時のサンプリング方式

項目	内部名	説明
Nearest Pixel	.nearest	最近傍ピクセルサンプリング (ピクセル単位での確認向け)
Interpolate Pixels	.linear	バイリニア補間 (滑らか、デフォルト)
Mipmap Pixels	.mipmap	ミップマップ補間 (縮小ビュー時のモアレ抑制)

Passes .npasses 🔁

オペレータの反復実行回数:

• Passes: TOP の処理を何パス繰り返すかの整数値。前回パスの結果が次回パスの入力になる。反復処理に利用

Channel Mask .chanmask 🎨

処理対象のチャンネルマスク (R/G/B/A 個別トグル):

• Channel Mask: R / G / B / A 各チャンネルのオン/オフトグル。オフのチャンネルは TOP の処理を受けず入力値がそのまま通過

Pixel Format .format 🎨

出力テクスチャのピクセルフォーマット (ビット深度・チャンネル構成)

項目	内部名	説明
Use Input	.useinput	入力 TOP のフォーマットを継承
8-bit fixed (RGBA)	.rgba8fixed	標準 8 ビット固定小数 RGBA (デフォルト、軽量)
sRGB 8-bit fixed (RGBA)	.srgba8fixed	sRGB ガンマ補正済 8 ビット RGBA
16-bit float (RGBA)	.rgba16float	16 ビット浮動小数 RGBA (HDR・中間処理向け)
32-bit float (RGBA)	.rgba32float	32 ビット浮動小数 RGBA (最高精度、メモリ大)
10-bit RGB with 2-bit Alpha	.rgb10a2fixed	10-10-10-2 ビット固定小数 (バンディング抑制)
16-bit fixed (RGBA)	.rgba16fixed	16 ビット固定小数 RGBA
11-bit float (RGB)	.rgb11float	11-11-10 ビット浮動小数 RGB (アルファなし、HDR 軽量)
16-bit float (RGB)	.rgb16float	16 ビット浮動小数 RGB (アルファなし)
32-bit float (RGB)	.rgb32float	32 ビット浮動小数 RGB (アルファなし)
8-bit fixed (Mono)	.mono8fixed	8 ビット固定小数モノクロ
16-bit fixed (Mono)	.mono16fixed	16 ビット固定小数モノクロ
16-bit float (Mono)	.mono16float	16 ビット浮動小数モノクロ
32-bit float (Mono)	.mono32float	32 ビット浮動小数モノクロ
8-bit fixed (RG)	.rg8fixed	8 ビット固定小数 R+G 2 チャンネル
16-bit fixed (RG)	.rg16fixed	16 ビット固定小数 R+G
16-bit float (RG)	.rg16float	16 ビット浮動小数 R+G
32-bit float (RG)	.rg32float	32 ビット浮動小数 R+G
8-bit fixed (A)	.a8fixed	8 ビット固定小数アルファ単体
16-bit fixed (A)	.a16fixed	16 ビット固定小数アルファ単体
16-bit float (A)	.a16float	16 ビット浮動小数アルファ単体
32-bit float (A)	.a32float	32 ビット浮動小数アルファ単体
8-bit fixed (Mono+Alpha)	.monoalpha8fixed	8 ビット固定小数モノクロ+アルファ
16-bit fixed (Mono+Alpha)	.monoalpha16fixed	16 ビット固定小数モノクロ+アルファ
16-bit float (Mono+Alpha)	.monoalpha16float	16 ビット浮動小数モノクロ+アルファ
32-bit float (Mono+Alpha)	.monoalpha32float	32 ビット浮動小数モノクロ+アルファ

---

実践アイデア 💡

Example 1: テキストを立体レリーフ化 🪧

Text TOP → Normal Map TOP → Phong MAT → Geometry COMP → Render TOP

Text TOP で作った文字やロゴ画像を Normal Map TOP に通して凹凸を表す法線マップを生成し、Phong MAT のバンプマップ入力に渡すことで、平面のジオメトリに彫り込んだようなレリーフ表現を作るフロー。実際の頂点を増やさずに立体感を出せるため軽量です。

1. Text TOP に文字やロゴを描画し Normal Map TOP に接続
2. Source = Luminance に設定 (文字の明暗から凹凸を作る)
3. Sample Step を 2 – 3 に上げて凹凸のエッジを少し緩やかにする
4. Normal Map TOP の出力を Phong MAT の Bump Map 入力に割り当てる
5. 板状の Geometry COMP に Phong MAT を割り当て Render TOP でライティングと共にレンダリング

Example 2: ノイズで擬似的な凹凸面 🌊

Noise TOP → Normal Map TOP → PBR MAT → Geometry COMP → Render TOP

Noise TOP のパターンを Normal Map TOP で法線マップ化し、PBR MAT のバンプマップ入力に渡すことで、水面・布・たたいた金属面のような擬似的な凹凸ライティングを作るフロー。Noise のアニメーションをそのまま流せば動く凹凸面になり、ライトの当たり方がリアルタイムに変化します。

1. Noise TOP でパターンを生成し Normal Map TOP に接続
2. Source = Luminance、Method = Use Previous And Next (中心差分で滑らかな凹凸)
3. Sample Step で凹凸の細かさを調整 (小さいほど細かいシワ)
4. 出力を PBR MAT の Bump Map 入力に渡す
5. Geometry COMP に割り当て Render TOP でライティング込みでレンダリング

---

関連オペレータ 🔗

類似機能OP 🔍

• Emboss TOP — 輝度差から立体的なエンボス効果を生成 (Normal Map と同じ傾き原理だが結果がレリーフ画像)
• Edge TOP — 周辺ピクセルの差分からエッジを抽出 (法線へのエンコードはせず輪郭画像を出力)

組み合わせ推奨OP 🔄

• Phong MAT — 生成した法線マップを Bump Map 入力に渡して凹凸ライティング (Normal Map の主要な出力先)
• PBR MAT — 物理ベースレンダリングのバンプマップとして法線マップを利用
• Render TOP — 法線マップを適用した MAT をジオメトリにレンダリングして最終映像化
• Displace TOP — アルファに出力したハイトマップをディスプレイスメントとして併用

前処理・後処理TOP 🎯

• 前処理: Blur TOP、Noise TOP、Monochrome TOP
• 後処理: Level TOP、Render TOP、Composite TOP

---

Info情報 📊

Normal Map TOP は Info CHOP / Info DAT に接続することで出力テクスチャの解像度・ピクセルフォーマット・クック情報を取得できます。法線マップの解像度を後段のシェーダで参照したり、サンプル距離を解像度に応じて動的に切替えたいときに使います。

TOP固有情報 🖼️

• resx: TOP の出力解像度 X (ピクセル単位)
• resy: TOP の出力解像度 Y (ピクセル単位)
• aspectx: アスペクト比 X
• aspecty: アスペクト比 Y
• depth: 3D テクスチャ / テクスチャ配列の深度 (2D テクスチャでは 1)
• gpu_memory_used: TOP が消費している GPU メモリ量 (MB 単位)

汎用オペレータ情報 🔄

• total_cooks: プロセス開始からのクック回数
• cook_time: 最後のクック時間 (ミリ秒)
• cook_frame: 最後にクックされたフレーム番号
• warnings: 警告数
• errors: エラー数

テクスチャ情報 🖼️

• resx: 出力テクスチャの横幅 (ピクセル単位)
• resy: 出力テクスチャの縦幅 (ピクセル単位)
• aspectx: アスペクト比の横成分
• aspecty: アスペクト比の縦成分
• depth: ピクセルフォーマットのビット深度
• gpu_memory_used: この TOP が消費している GPU メモリ量 (バイト)

クック情報 ⚙️

• total_cooks: ノードがクックされた累積回数
• cook_time: 直近フレームのクック時間 (ミリ秒)
• cook_frame: 直近にクックされたフレーム番号
• cooked_this_frame: 現フレームでクック済かどうか (0/1)

---

トラブルシューティング ⚠️

よくある問題と解決策 🔧

❌ Problem: 法線マップを当てても凹凸が見えない / 立体感が出ない
✅ Solution:

• MAT 側の Bump Map 入力に Normal Map TOP の出力が正しく割り当てられているか確認
• Phong MAT / PBR MAT のバンプ強度 (Bump Scale 等) が 0 になっていないか確認
• ライトが当たっていないと凹凸は見えないため Render TOP のシーンに Light COMP を配置
• Sample Step が小さすぎて傾きがほぼ平坦になっていないか確認 (2 – 3 に上げてみる)

❌ Problem: 凹凸がギザギザでノイズっぽい
✅ Solution:

• 前段に Blur TOP を挟んで入力を軽くぼかしてから Normal Map TOP に渡す
• Method を Use Previous And Next (中心差分) に切り替えて左右対称で滑らかな傾きにする
• Sample Step を上げて細かいノイズより大きな起伏を優先
• 入力のビット深度を上げる (8 ビットだと階調不足で段差が出やすい)

❌ Problem: 凹凸の向きが逆 (へこみと出っ張りが反転している)
✅ Solution:

• MAT 側の法線マップの Y 方向の解釈 (OpenGL 形式 / DirectX 形式) が合っているか確認
• 入力画像の明暗を反転させて高さの解釈を逆にする (前段に Level TOP で反転)
• Source で評価しているチャンネルが意図したハイトマップになっているか確認

❌ Problem: アルファに高さを出したいのに出力されない
✅ Solution:

• Heightmap in Alpha Channel がオンになっているか確認
• 後段の Pixel Format がアルファを保持するフォーマット (RGBA 系) になっているか確認
• ディスプレイスメントで使う場合はアルファをそのまま参照できる経路になっているか確認

---

参考資料 📚

その他 🔗

• TouchDesigner Wiki — Category:TOPs
• TouchDesigner Wiki — Pixel Formats 解説
• TouchDesigner Wiki ホーム
• TouchDesigner 公式 Forum
• Facebook — TouchDesigner Help Group

公式リソース 📖

• TouchDesigner公式ドキュメント – Normal Map TOP
• TouchDesigner公式ドキュメント – Phong MAT (法線マップの主要な出力先)
• TouchDesigner公式ドキュメント – PBR MAT (物理ベースレンダリングでの利用)

その他の記事はこちら

---