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

記事更新の通知はXでアナウンス٩(๑❛ᴗ❛๑)
→ @maru6o6をフォロー

概要 📖 – 全方位画像の投影方式を変換する

Projection TOPは、キューブマップ・正距円筒・魚眼といった全方位画像の投影方式を相互に変換して出力する TOPです。Input と Output で入出力の投影方式を指定し、Rotate でマップ全体を任意の軸に回転できます。360 度動画の書き出しや環境マップ生成に役立ちます。

主な用途 🎯

キューブマップを正距円筒 (Equirectangular) に変換して 360 度動画として書き出し
正距円筒や魚眼の入力をキューブマップに変換して環境マップ・反射表現に利用
魚眼 (Fish-Eye) 出力でドームスクリーン・プラネタリウム向け映像を生成
Rotate パラメータで全方位画像を任意の軸で回転させて視点の向きを調整
Render TOP のキューブマップ出力を VR・360 配信向けフォーマットへ橋渡し

データフロー 🔄

入力: 全方位テクスチャ (キューブマップ等)
 ↓
Projection TOP (Input / Output で投影方式を指定し、Rotate で向きを調整して再投影)
 ↓
出力: 指定した投影方式の 2D テクスチャ

Tips

初心者の方は、以下日本語書籍も手元にあると安心です。

リンク

まる。

実際の案件事例まで踏み込んで紹介されていて、効率よくスキルアップするなら必携の二冊です！

パラメータ解説 ⚙️

Projection Page 📋

Input `.input` 🎛️

Input (入力の投影方式) — 入力テクスチャがどの投影方式で格納されているかを指定するメニューパラメータ。現状はキューブマップ入力が主対象で、キューブマップは Render TOP でレンダリングするか、Cube Map TOP で 2D 画像から生成できます

項目	内部名	説明
Cube Map	`.cubemap`	キューブマップ (6 面立方体テクスチャ) として入力を解釈
Equirectangular	`.equirectangular`	正距円筒図法 (緯度経度展開) として入力を解釈
Fish-Eye	`.fisheye`	魚眼 (円形画像) として入力を解釈
Dual Paraboloid	`.dualparaboloid`	デュアルパラボロイド (前後 2 枚のパラボラ投影) として入力を解釈

Output `.output` 📤

Output (出力の投影方式) — 変換後に出力する投影方式をメニューから選択します

項目	内部名	説明
Cube Map	`.cubemap`	キューブマップ (6 面立方体テクスチャ) で出力
Equirectangular	`.equirectangular`	正距円筒図法で出力。通常 2:1 のアスペクト比で、UV を緯度経度に設定した球体へのマッピングに使われ、360 度動画で広く採用される形式
Fish-Eye	`.fisheye`	魚眼で出力。画像が 2D テクスチャ内の円形に収まり (四隅は黒)、円の直径方向に FOV Angle 度ぶんの視野が収録される

FOV Angle `.fov` 📐

魚眼出力時の視野角 (Output = Fish-Eye の時のみ有効):

FOV Angle: fov (視野角) — 出力が Fish-Eye のときだけ有効になり、魚眼カメラの視野角 (度) を指定します

Rotate `.r` 🔄

マップを任意の軸まわりに回転させる角度 (X / Y / Z):

Rotate X: rx (X 軸回転) — マップ全体を X 軸まわりに回転する角度
Rotate Y: ry (Y 軸回転) — マップ全体を Y 軸まわりに回転する角度
Rotate Z: rz (Z 軸回転) — マップ全体を Z 軸まわりに回転する角度

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: 360 度動画に変換 🌐

Render TOP (Cube Map) → Projection TOP (Input=Cube Map, Output=Equirectangular) → Movie File Out TOP

Render TOP の Render Mode をキューブマップにしてシーンを 6 方向に描画し、その出力を Projection TOP に通して正距円筒へ変換すると、YouTube などで広く使われる 360 度動画フォーマットがそのまま得られる。Output を Equirectangular にするだけで緯度経度展開された 2:1 のテクスチャになる。

Render TOP を作成し Render Mode を Cube Map に設定してシーンを 6 方向レンダリング
Projection TOP を接続し Input を Cube Map、Output を Equirectangular に設定
必要に応じて Rotate Y で正面の向きを調整
出力を Movie File Out TOP に渡して 360 度動画として書き出し

Example 2: 環境マップ化 🪞

Movie File In TOP (Equirectangular) → Projection TOP (Input=Equirectangular, Output=Cube Map) → Phong MAT (Environment Map)

市販の HDRI などは正距円筒形式で配布されることが多い。これを Projection TOP でキューブマップに変換すると、Phong MAT の環境マップスロットや Environment Light COMP の IBL 光源として扱いやすくなり、反射する金属表現が手軽に作れる。

Movie File In TOP で正距円筒の HDRI / 360 画像を読み込み
Projection TOP を接続し Input を Equirectangular、Output を Cube Map に設定
出力をマテリアルの環境マップスロットや Environment Light COMP に接続

Example 3: ドームスクリーン向け魚眼出力 🐟

Render TOP (Cube Map) → Projection TOP (Output=Fish-Eye, FOV Angle=180) → Projector

プラネタリウムやドームスクリーンでは魚眼投影の映像が必要になる。Projection TOP の Output を Fish-Eye にして FOV Angle を 180 付近に設定すると、円形に収まったドーム用マスター映像が得られる。Rotate で天頂方向を合わせられる。

シーンをキューブマップでレンダリングして Projection TOP に入力
Output を Fish-Eye に設定し FOV Angle をドームの仕様 (180 度など) に合わせる
Rotate X / Rotate Z でドームの天頂方向と向きを調整して投影機へ出力

Info CHOP情報 📊

Projection TOP は Info CHOP による詳細情報取得に対応しています。

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: エラー数

TOP 固有情報 🖼️

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

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

よくある問題と解決策 🔧

❌ Problem: 出力が真っ黒・崩れた見た目になる
✅ Solution:

Input が実際の入力テクスチャの投影方式と一致しているか確認 (キューブマップ入力にキューブマップを与えているか等)
キューブマップ入力は Render TOP のキューブマップ出力か Cube Map TOP で正しく生成されているか確認
入力テクスチャの解像度・アスペクト比が極端でないか確認 (正距円筒は 2:1 が標準)

❌ Problem: FOV Angle を変えても出力が変化しない
✅ Solution:

FOV Angle は Output が Fish-Eye のときだけ有効になるため Output 設定を確認
Output が Cube Map / Equirectangular の場合は FOV Angle が無視される仕様であることを確認
魚眼の視野角を変えたい場合は Output を Fish-Eye に切替えてから FOV Angle を調整

❌ Problem: 全方位画像の向き・天地が合わない
✅ Solution:

Rotate X / Rotate Y / Rotate Z でマップ全体を回転させて正面・天頂方向を調整
入力ソース側 (Render TOP のカメラ向き等) の座標系を確認してから Projection TOP の Rotate を補正
正距円筒 ↔ キューブマップ変換では座標系の前提が異なるため、Rotate で 90 度単位の補正が必要なケースがある

参考資料 📚

その他 🔗

公式リソース 📖

この記事はLLMと共に内容を執筆、更新しています。
最新バージョンとの項目差異など、情報の不一致を見つけた心優しい方はXもしくはInsta、メールなどよりサイト管理者までご連絡ください😎

まる。

お仕事のご依頼はDM又はメールにて。
━━━━━━━━━━━━━━━━━
Python/Touchdesigner/M5Stackをこよなく愛すフルスタックエンジニア。
専門は生理心理学、趣味はヨガやサウナ、EMS電気風呂などヘルスケア全般。
脳波や筋電、心拍を中心とした生体情報のセンシング＆インタラクティブアートづくりがライフワーク。

普段はワントゥーテンという会社で空間演出エンジニアをしています。
リファラル採用お繋ぎできますので、我こそはという尖った方は経歴と希望職種添えてDMください(エンジニア以外、営業職等もOK)。
ご飯行きましょう。

↓日常垢
Instagram：＠malmal0v0

概要 📖 – 全方位画像の投影方式を変換する

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

Projection Page 📋

Input .input 🎛️

Output .output 📤

FOV Angle .fov 📐

Rotate .r 🔄

Common Page 🔧

Output Resolution .outputresolution 🖼️

Resolution .resolution 📐

Resolution Menu .resmenu 📋

Use Global Res Multiplier .resmult 🔢

Output Aspect .outputaspect 📏

Aspect .aspect 📐

Input Smoothness .inputfiltertype 🎚️

Fill Viewer .fillmode 🖥️

Viewer Smoothness .filtertype 🎛️

Passes .npasses 🔁

Channel Mask .chanmask 🎨

Pixel Format .format 🎨