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

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

概要 📖 – 画像を任意の解像度に変換

Fit TOPは、入力 TOP を Common Page で指定した解像度に合わせて Fill / Fit Best / Fit Outside 等の方式でリサイズし、Translate / Rotate / Scale / Justify による配置調整も同時に行う TOPです。リサイズ方式は Fit パラメータで 6 種類から選択でき、アスペクト比を保持したまま余白を残す方式や、はみ出してでも外側まで覆う方式を切り替えられます。

主な用途 🎯

異なる解像度の入力テクスチャを統一サイズに揃える
アスペクト保持で Fit Best / Fit Outside / Fit Horizontal / Fit Vertical から収め方を選択
Translate / Rotate / Scale / Pivot による事前変換とリサイズの一括処理
Justify Horizontal / Justify Vertical でリサイズ後の整列方向 (左/中央/右・上/中央/下) を指定
Background Color で余白部分の塗りつぶし色を制御

データフロー 🔄

入力: 任意解像度の TOP
 ↓
リサイズ方式 (Fit) + 整列 (Justify Horizontal / Justify Vertical) で出力解像度に変換
 ↓
Translate / Rotate / Scale で事前変換
 ↓
出力: 指定解像度のテクスチャ

Tips

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

リンク

まる。

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

パラメータ解説 ⚙️

Fit Page 📋

Fit (リサイズ方式) `.fit` 📐

入力画像を出力解像度に収める方式

項目	内部名	説明
Fill	`.fill`	出力解像度いっぱいに引き伸ばす (アスペクト無視)
Fit Horizontal	`.fithorz`	横幅に合わせて収める (アスペクト保持、上下に余白)
Fit Vertical	`.fitvert`	縦幅に合わせて収める (アスペクト保持、左右に余白)
Fit Best	`.fitbest`	アスペクト保持で内側に収まる最大サイズ (余白あり、はみ出しなし)
Fit Outside	`.fitoutside`	アスペクト保持で外側まで覆う最小サイズ (はみ出しあり、余白なし)
Native Resolution	`.nativeres`	入力テクスチャの元解像度のまま等倍配置 (リサイズ無し)

水平方向の整列 `.justifyh` ↔️

Fit でアスペクト保持時にできる左右の余白に対する画像の寄せ方

項目	内部名	説明
Left	`.left`	出力キャンバス左端に揃える
Center	`.center`	出力キャンバス水平中央に揃える
Right	`.right`	出力キャンバス右端に揃える

垂直方向の整列 `.justifyv` ↕️

Fit でアスペクト保持時にできる上下の余白に対する画像の寄せ方

項目	内部名	説明
Bottom	`.bottom`	出力キャンバス下端に揃える
Center	`.center`	出力キャンバス垂直中央に揃える
Top	`.top`	出力キャンバス上端に揃える

変換順序 `.xord` 🔢

Translate / Rotate / Scale を適用する順序

項目	内部名	説明
Scale Rotate Translate	`.srt`	拡縮 → 回転 → 平行移動の順 (デフォルト)
Scale Translate Rotate	`.str`	拡縮 → 平行移動 → 回転の順
Rotate Scale Translate	`.rst`	回転 → 拡縮 → 平行移動の順
Rotate Translate Scale	`.rts`	回転 → 平行移動 → 拡縮の順
Translate Scale Rotate	`.tsr`	平行移動 → 拡縮 → 回転の順
Translate Rotate Scale	`.trs`	平行移動 → 回転 → 拡縮の順

Translate (移動) `.t` ↔️

Translate .t 🎯
Translate (平行移動) — リサイズ後の画像を X / Y 方向にずらす量を指定します。

tx (t1) — 水平方向の移動量
ty (t2) — 垂直方向の移動量

Translate Unit .tunit 📏
Translate Unit (移動の単位) — Translate の値をピクセル/フラクション (0-1) 等のどの単位で解釈するかを指定します。

Rotate (回転) `.r` 🔄

Rotate (回転) — リサイズ後の画像に与える回転角度 (度):

Rotate (回転角度): Rotate (r) — 画像の回転角度を度単位で指定 (Pivot 周りで回転)

Scale (拡縮) `.s` 📐

Scale .s 📏
Scale (拡縮) — X / Y 方向の倍率指定。1.0 で原寸、0.5 で半分、2.0 で 2 倍。

sx (s1) — 水平方向の倍率
sy (s2) — 垂直方向の倍率

Pivot (中心点) `.p` 📍

Pivot .p 🎯
Pivot (中心点) — Rotate と Scale の基準となる中心点。中心点を画像端に動かすと、回転や拡縮で画像が大きく位置ずれします。

px (p1) — 中心点の X 座標
py (p2) — 中心点の Y 座標

Pivot Unit .punit 📏
Pivot Unit (中心点の単位) — Pivot の値をピクセル/フラクション (0-1) 等のどの単位で解釈するかを指定します。

背景色 `.bgcolor` 🎨

Background Color .bgcolor 🎨
Background Color (背景色) — リサイズや移動・縮小で画像が出力キャンバスを覆いきれない場合に表示される塗りつぶし色。

R (bgcolorr) — 赤成分
G (bgcolorg) — 緑成分
B (bgcolorb) — 青成分
A (bgcolora) — アルファ成分

Pre-Multiply RGB by Alpha .premultrgbbyalpha ✖️
Pre-Multiply RGB by Alpha (アルファによる RGB 事前乗算) — オンにすると Background Color の RGB をアルファ値で事前乗算してから合成します (プリマルチプライドアルファ運用時に必要)。

Legacy 変換 `.legacyxform` 🕰️

Legacy Transform (旧式変換行列) — 旧バージョン互換用:

Legacy Transform: Legacy Transform (legacyxform) — 旧バージョン用の変換行列構築方式に切替 (回転方向と Transform Order が反転)。旧プロジェクト互換が必要な場合のみオン

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: 素材を統一解像度に揃える 🖼️

Movie File In TOP (素材 A: 1920×1080) + Movie File In TOP (素材 B: 1280×720) → 各々 Fit TOP (1920×1080, Fit Best) → Layer TOP

異なる解像度の動画素材を後段の合成に流す前に Fit TOP で出力解像度を統一する例。Fit Best を選ぶとアスペクト比を保持したまま内側に収まる最大サイズで配置され、余白は Background Color で塗りつぶされる。

Common Page の Output Resolution を Custom Resolution にし、Resolution W/H で目標解像度を指定
Fit Page の Fit を Fit Best に設定 (アスペクト保持 + 余白あり)
Justify Horizontal / Justify Vertical で余白方向を指定 (例: 両方 Center で中央寄せ)
Background Color で余白の塗りつぶし色を指定

Example 2: 縦動画を横画面に合わせる 📺

Movie File In TOP (縦動画 1080×1920) → Fit TOP (1920×1080, Fit Outside + Translate) → 出力

スマホ撮影の縦動画 (アスペクト 9:16) を横長ディスプレイ (16:9) に映す場面で Fit Outside を使うと、画面全体を埋めるように拡大されて余白なく表示される (画面外にはみ出した部分は切り取られる)。Translate で被写体を画面内に収まる位置に微調整できる。

Fit Page の Fit を Fit Outside に設定 (画面全体を覆う最小サイズ)
Justify Vertical を Center に
Translate の ty で被写体の位置を上下に微調整

Example 3: 重い処理を低解像度で軽量化 ⚡

Render TOP (4K) → Fit TOP (1/4 解像度, Fill) → 重い後段処理 → Fit TOP (4K 復元, Fit Best) → Out TOP

高解像度のレンダ素材を Fit TOP で 1/4 解像度に縮小してから重い後段処理 (ブラー反復・GLSL シェーダ等) を行い、最後に再度 Fit TOP で元解像度に戻すと処理コストを大きく下げられる。Common Page の Output Resolution = Quarter を使えば 1 パラメータで 1/4 化できる。

縮小用 Fit TOP の Common Page Output Resolution を Quarter に
Fit は Fill で全面リサイズ
後段処理を低解像度で実行 (ブラー・歪み等)
復元用 Fit TOP の Output Resolution を Custom Resolution + 元の 4K 解像度に戻す

Info CHOP情報 📊

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

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

よくある問題と解決策 🔧

❌ Problem: アスペクト比が崩れて画像が引き伸びる
✅ Solution:

Fit を Fill 以外 (Fit Best / Fit Horizontal / Fit Vertical / Fit Outside) に切替 (Fill のみアスペクト無視で引き伸ばす)
Common Page の Output Aspect を Resolution に設定 (Use Input はアスペクト伝播事故の元)
入力 TOP 側のアスペクト設定を Anti Alias TOP 等の前段で揃えておく

❌ Problem: Background Color が表示されない (透明になる)
✅ Solution:

Background Color の A (アルファ) が 0 になっていないか確認 (1.0 で完全不透明)
Pre-Multiply RGB by Alpha がオンの場合、RGB がアルファで事前乗算されるため A=0 だと RGB も 0 になる
後段で透明部分を切り捨てる OP (Crop TOP 等) が無いか確認

❌ Problem: Translate / Rotate / Scale が反映されない、または期待と違う方向に動く
✅ Solution:

Transform Order を Scale Rotate Translate (デフォルト) 以外に変えていないか確認 (順序で結果が変わる)
Pivot の位置を確認 — 中心点が画像端にあると回転・拡縮で大きく位置ずれする
Translate Unit / Pivot Unit の単位が想定 (ピクセル / フラクション) と一致しているか確認
Legacy Transform がオンだと回転方向と順序が反転するためオフに戻す

❌ Problem: 縮小したのに画像がぼやけて見える
✅ Solution:

Common Page の Input Smoothness を Mipmap Pixels に変更 (縮小時のモアレ・ぼやけを抑制)
Common Page の Pixel Format を 16-bit float (RGBA) 以上に上げる (8 ビットでは中間階調が潰れる)
縮小用と復元用で 2 段 Fit TOP を使う場合は、中間段の解像度を上げて精度を保つ

参考資料 📚

その他 🔗

公式リソース 📖

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

まる。

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

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

↓日常垢
Instagram：＠malmal0v0

概要 📖 – 画像を任意の解像度に変換

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

Fit Page 📋

Fit (リサイズ方式) .fit 📐

水平方向の整列 .justifyh ↔️

垂直方向の整列 .justifyv ↕️

変換順序 .xord 🔢

Translate (移動) .t ↔️

Rotate (回転) .r 🔄

Scale (拡縮) .s 📐

Pivot (中心点) .p 📍

背景色 .bgcolor 🎨

Legacy 変換 .legacyxform 🕰️

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 🎨