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

※当サイトにはプロモーションリンクが含まれます。

Crop TOP の画像切り出し機能を示すサムネイル

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

概要 📖 – 画像の四辺位置指定による領域切り出し

Crop TOPは、画像の上下左右の境界位置を指定して任意の矩形領域だけを切り出す TOPです。切り出し座標は Fraction (アスペクト比基準・画像基準) と Pixels の単位を切替えて指定でき、枠外のピクセル処理は Hold / Zero / Repeat / Mirror から選択可能です。

主な用途 🎯

  • テクスチャアトラスからの個別スプライト切り出し (UI アイコン・ゲームスプライト)
  • 映像ソースの黒帯除去・レターボックス削除によるアスペクト比補正
  • 高解像度入力から関心領域 (ROI) のみを切り出して GPU 処理負荷を削減
  • Crop 位置を時間でアニメさせるパン&スキャン演出
  • GLSL TOP / Composite TOP 等の後段に渡す前処理として領域を絞り込む

データフロー 🔄

入力: TOP テクスチャ
 ↓
Crop Left / Right / Bottom / Top で四辺の境界位置を指定
 ↓
Extend で枠外ピクセル処理を選択 (Hold / Zero / Repeat / Mirror)
 ↓
出力: 切り出されたテクスチャ

Tips

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

まる。
まる。

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

パラメータ解説 ⚙️

Crop Page 📋

Crop Edges ✂️

Crop Left .cropleft ⬅️
切り出し領域の左端の位置。Crop Left Unit で単位を切替えられる

  • 値 (cropleft)
  • 単位 (cropleftunit): Fraction (Aspect) / Fraction (Image) / Pixels

Crop Right .cropright ➡️
切り出し領域の右端の位置。Crop Right Unit で単位を切替えられる

  • 値 (cropright)
  • 単位 (croprightunit): Fraction (Aspect) / Fraction (Image) / Pixels

Crop Bottom .cropbottom ⬇️
切り出し領域の下端の位置。Crop Bottom Unit で単位を切替えられる

  • 値 (cropbottom)
  • 単位 (cropbottomunit): Fraction (Aspect) / Fraction (Image) / Pixels

Crop Top .croptop ⬆️
切り出し領域の上端の位置。Crop Top Unit で単位を切替えられる

  • 値 (croptop)
  • 単位 (croptopunit): Fraction (Aspect) / Fraction (Image) / Pixels

Extend .extend 🧩

切り出し領域の外側にあるピクセルの処理方式

項目 内部名 説明
Hold .hold タイルの端のピクセル値をそのまま外側まで引き延ばす
Zero .zero タイルの外側を 0 (黒・透明) にする
Repeat .repeat タイルの内容を端で繰り返して敷き詰める
Mirror .mirror タイルの内容を端で鏡像反転して敷き詰める

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 (atlas.png) → Crop TOP (Fraction Image) → 出力スプライト

1 枚のテクスチャアトラスに複数の UI アイコンや小スプライトを並べておき、Crop TOP で個別の領域だけを切り出して使い回す定番フロー。GPU リソース効率と読み込み回数の削減に有効。

  1. Movie File In TOP でテクスチャアトラスを読み込む
  2. Crop TOP の各 Unit を Fraction (Image) に設定
  3. Crop Left / Crop Right / Crop Bottom / Crop Top で切り出したいスプライトの 4 辺位置を 0〜1 で指定
  4. Common Page の Output Resolution = Custom Resolution + Resolution W/H でスプライトの出力サイズを揃える

Example 2: 映像の黒帯除去 (レターボックス削除) 📺

Movie File In TOP (16:9 with letterbox) → Crop TOP → Output (4:3 等)

上下や左右に黒帯が入った映像ソースから、本来の映像領域だけを切り出してアスペクト比を整える用途。撮影素材やアーカイブ映像のフォーマット変換で頻繁に使うパターン。

  1. 映像の黒帯の正確なピクセル数を確認
  2. Crop TOP の各 Unit を Pixels に設定し、上下の黒帯ピクセル数を cropbottom / croptop に入力
  3. Extend は Zero または Hold を選択 (どちらでも切り出し領域内には影響しない)
  4. Common Page の Output Aspect を Resolution に設定して新しいアスペクトを確定

Example 3: パン&スキャン (時間でアニメする切り出し位置) 🎬

Movie File In TOP → Crop TOP (Translate アニメ) → Output

高解像度ソースから一部分を切り出しつつ、Crop の境界座標を時間でアニメさせてカメラがパン・ズームしているかのような演出を作る手法。Ken Burns 効果の TOP 版。

  • Crop TOP の Unit を Fraction (Image) に設定
  • cropleft / cropright に absTime.seconds * 0.05 等のアニメ式を Export
  • Common Page の Output Resolution = Custom Resolution で出力サイズを固定し、Crop 範囲だけが動く演出に
  • 後段に Resolution TOP や Fit TOP を入れて最終出力サイズに揃える

関連オペレータ 🔗

類似機能OP 🔍

  • Fit TOP — アスペクト保持で領域に収めるリサイズ系 TOP
  • Resolution TOP — 出力解像度のみを変更する TOP (切り出しはしない)
  • Transform TOP — テクスチャを平行移動・回転・スケールできる汎用変換 TOP

組み合わせ推奨OP 🔄

  • Movie File In TOP — アトラス・映像素材の読み込み元として Crop の前段で使用
  • Composite TOP — 切り出したスプライトを他レイヤと合成
  • Layer TOP — 切り出した UI 要素を画面にレイアウトして重ね合わせ
  • GLSL TOP — Crop で限定した小領域だけにシェーダ処理を適用してコスト削減

前処理・後処理TOP 🎯

Info CHOP情報 📊

Crop 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 共通の Info CHOP チャンネル 📊

  • resolution_w: 出力テクスチャの横ピクセル数 (Crop 後の幅)
  • resolution_h: 出力テクスチャの縦ピクセル数 (Crop 後の高さ)
  • aspect_x: 出力テクスチャの横アスペクト値
  • aspect_y: 出力テクスチャの縦アスペクト値
  • depth: テクスチャの色深度 (ピクセルフォーマットに依存)

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

よくある問題と解決策 🔧

❌ Problem: 出力が真っ黒 / 期待した領域が出ない
✅ Solution:

  • Crop Left ≥ Crop Right または Crop Bottom ≥ Crop Top になっていないか確認 (領域が反転すると出力なし)
  • 各 Unit が想定通りか確認 (Fraction (Image) なら 0〜1、Pixels なら入力解像度内の値)
  • Extend を Hold に切替えて領域外の挙動を見て差分を確認

❌ Problem: Unit を切替えると位置が大きくずれる
✅ Solution:

  • Fraction (Aspect) と Fraction (Image) の違いを確認 (Aspect は縦横比基準、Image は画像全体基準)
  • 入力テクスチャが正方形でない場合は Fraction (Image) の方が予測しやすい
  • ピクセル精度が必要な場合は Pixels を使用しソース解像度を意識して指定

❌ Problem: 出力解像度が期待と違う
✅ Solution:

  • Common Page の Output Resolution 設定を確認 (Use Input だと入力解像度のままで Crop 範囲だけが意味を持つ)
  • 切り出し領域そのもののピクセル数で出力したい場合は Output Resolution を Custom Resolution + 期待値に設定
  • アスペクト比を保ちたい場合は後段に Fit TOP を入れる

❌ Problem: 切り出し領域外のピクセルが意図せず映る
✅ Solution:

  • Extend を Zero に設定して領域外を黒 (透明) にする
  • Hold ではエッジのピクセル値が外側まで引き延ばされるため意図しない色帯になる場合あり
  • Repeat / Mirror はタイル繰り返しのため、単独切り出し用途では避ける

参考資料 📚

その他 🔗

公式リソース 📖

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


まる。

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

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

↓日常垢
Instagram：＠malmal0v0

まる。をフォローする
その他の記事はこちら
Math Combine POP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
ZED Select TOP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
ZED POP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
Window COMP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
Widget COMP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】

タイトルとURLをコピーしました