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

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

CHOP to TOP が CHOP チャンネルを TOP 画像に変換する図

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

概要 📖 – CHOPを画像に変換する

CHOP to TOPは、CHOP のチャンネルデータを TOP のピクセル配列に詰め込み、画像として GPU パイプラインへ受け渡す橋渡し TOPです。デフォルトで 32-bit float のテクスチャを生成するため CHOP の浮動小数精度がそのまま保持され、GPU シェーダ (GLSL TOP / Instancing) からサンプリング可能な形でデータを供給できます。Data Format でチャンネルを R / RG / RGB / RGBA / A / Legacy のどれにマッピングするか選び、Image Layout で長いチャンネルを折り返したり正方形配置にするか決められるため、ポイントクラウド・パーティクル属性・大量のスカラデータの受け渡しに広く使われます。

主な用途 🎯

  • CHOP チャンネルデータの可視化 (スコープ風表示・デバッグ画像化)
  • CHOP データを GPU シェーダに供給するためのテクスチャ化 (GLSL TOP の uniform / sampler ソース)
  • ポイントクラウド座標の TOP 化 (Fit to Square レイアウトで効率的に配置)
  • パーティクル・インスタンス用の per-instance データを画像形式にパッキング
  • 大規模 CHOP データの保存・受け渡し (Pixel Format を 32-bit float にして全精度維持)

データフロー 🔄

入力: CHOP チャンネル (複数サンプル × 複数チャンネル)

Data Format でチャンネルから RGBA への割り当てを決定

Image Layout で行列配置 (Row per Channel Set / Wrapped / Fit to Square)

出力: TOP 画像 (デフォルト 32-bit float、幅 = サンプル数、高さ = チャンネルセット数)

Tips

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

まる。
まる。

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


パラメータ解説 ⚙️

CHOP To Page 📁

CHOP .chop 🔗

ソースとなる CHOP の参照パス:

  • CHOP: chop 参照する CHOP のパス。同階層の CHOP なら名前のみ、別階層なら絶対パスまたは相対パスで指定

Data Format .dataformat 🎛️

CHOP チャンネルをピクセルカラーへどのように割り当てるかを決定するメニュー

項目 内部名 説明
R .r 各チャンネルが新しいスキャンライン (1 行) の Red チャンネルになる。デフォルト Image Layout では画像高さ = CHOP のチャンネル数
RG .rg 先頭 2 チャンネルが 1 行目の R+G に、続く 2 チャンネルが 2 行目の R+G にマップ。画像高さ = チャンネル数 / 2 (切り捨て)
RGB .rgb 先頭 3 チャンネルが 1 行目の R+G+B に、続く 3 チャンネルが 2 行目にマップ。画像高さ = チャンネル数 / 3 (切り捨て)
RGBA .rgba 先頭 4 チャンネルが 1 行目の R+G+B+A に、続く 4 チャンネルが 2 行目にマップ。画像高さ = チャンネル数 / 4 (切り捨て)
A .a 各チャンネルが新しいスキャンラインの Alpha チャンネルになる。デフォルト Image Layout では画像高さ = チャンネル数
Legacy .legacy 常に単一スキャンラインのみを生成する後方互換モード。4 を超えるチャンネルは無視される。1-2 チャンネルなら先頭を R/G/B/A 全部にコピー、3 チャンネルなら R/G/B にマップして A はサンプル番号 / サンプル数のランプ、4 チャンネルなら R/G/B/A にマップ

Clamp CHOP Values .clamp 📏

CHOP 値を 0-1 の範囲にクランプするかどうか:

  • Clamp CHOP Values: clamp CHOP の値を 0-1 の範囲にクランプして TOP に出力するトグル。8-bit fixed 系の Pixel Format で範囲外の値を切り詰めたいとき有効。32-bit float で負値や 1 超過の値を保持したい場合はオフにする

Image Layout .layout 🧩

画像の縦横配置の決定方式 (旧 Crop Long Channels / Fit to Square を統合したメニュー)

項目 内部名 説明
Row per Channel Set (Cropped) .rowscropped Data Format で決まる各チャンネルセットを 1 行のピクセルに変換。チャンネル長が最大テクスチャ解像度 (または Output Resolution の幅) を超えると 余分なサンプルは捨てられる。旧 Crop Long Channels=On 相当
Row(s) per Channel Set (Wrapped) .rowswrapped チャンネル長が幅を超えた場合に 新しい行へ折り返して ピクセル化。次のチャンネルセットは必ず新規行から開始。旧 Crop Long Channels=Off 相当
Fit to Square (Combine Sets) .square 全 CHOP サンプルを収める 最小の正方形テクスチャに配置。チャンネルセット間に空行を作らず連続詰めするためポイントクラウド等で効率的。空きピクセルは Extra Pixel Values で埋める

Extra Pixel Values (RGBA) .rgba 🎨

Image Layout の都合で発生する未使用ピクセルに埋め込む RGBA 値 (デフォルト (0, 0, 0, 0)):

  • Red: rgba1 余りピクセルの R 値
  • Green: rgba2 余りピクセルの G 値
  • Blue: rgba3 余りピクセルの B 値
  • Alpha: rgba4 余りピクセルの A 値。(0, 0, 0, -1) 等の負値を埋めたい場合は Pixel Format を 32-bit float に切替

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 ResolutionCustom 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 最近傍ピクセルサンプリング (ピクセル単位で正確、CHOP データを 1 サンプル = 1 ピクセルとして扱うとき推奨)
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 テクスチャのネイティブ解像度のまま等倍表示 (CHOP データを正確に確認したいとき推奨)

Viewer Smoothness .filtertype 🎛️

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

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

Passes .npasses 🔁

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

  • Passes: TOP の処理を何パス繰り返すかの整数値。前回パスの結果が次回パスの入力になる。CHOP to TOP では通常 1 で十分

Channel Mask .chanmask 🎨

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

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

Pixel Format .format 🎨

出力テクスチャのピクセルフォーマット (CHOP to TOP では 32-bit float 系がデフォルトかつ推奨)

項目 内部名 説明
Use Input .useinput 入力 TOP のフォーマットを継承
8-bit fixed (RGBA) .rgba8fixed 標準 8 ビット固定小数 RGBA (CHOP 値が 0-1 範囲に収まり、メモリを節約したいとき)
sRGB 8-bit fixed (RGBA) .srgba8fixed sRGB ガンマ補正済 8 ビット RGBA
16-bit float (RGBA) .rgba16float 16 ビット浮動小数 RGBA (HDR・中間処理向け)
32-bit float (RGBA) .rgba32float 32 ビット浮動小数 RGBA (CHOP 精度をそのまま保持する デフォルト推奨)
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: CHOP データを GPU シェーダへテクスチャ供給 🖥️

Noise CHOP / Math CHOP → CHOP to TOP (Data Format=R, Pixel Format=32-bit float) → GLSL TOP (sampler2D としてサンプリング) → 出力テクスチャ

CHOP で生成・加工した時系列データやパラメータ列を GPU シェーダ側でサンプリングしたい場合の基本フロー。Pixel Format を 32-bit float (RGBA) にしておくことで CHOP の浮動小数精度をそのまま GLSL TOP まで持ち込めます。

  1. Noise CHOPMath CHOP で必要なチャンネルデータを準備
  2. CHOP to TOP を配置し CHOP パラメータにソース CHOP のパスを指定
  3. Data FormatR に設定 (1 チャンネル = 1 行のシンプルなマッピング)
  4. Pixel Format32-bit float (RGBA) に設定して精度を保持
  5. 下流の GLSL TOPsampler2D としてバインドし、シェーダ内で texelFetch() または texture() でサンプリング

Example 2: ポイントクラウドを Fit to Square で TOP 化 ☁️

SOP to CHOP (P 属性抽出) → CHOP to TOP (Data Format=RGB, Image Layout=Fit to Square) → Geometry COMP / GLSL TOP

数千〜数万点のポイントクラウドや SOP 頂点位置を GPU 側で扱う場合、Fit to Square レイアウトを使うと最小の正方形テクスチャに効率良く詰め込めます。位置はテクスチャ内のピクセル順に並ぶため、Geometry COMP で per-instance position として参照できます。

  1. SOP to CHOP でジオメトリの P 属性 (tx/ty/tz) を CHOP チャンネル化
  2. CHOP to TOP を配置し Data FormatRGB に (tx/ty/tz が 1 ピクセルの RGB に対応)
  3. Image LayoutFit to Square (Combine Sets) に切替えると正方形テクスチャに収まる
  4. 余りピクセルが気になる場合は Extra Pixel Values で識別用の値 (例: A=-1) を埋める (Pixel Format を 32-bit float にすれば負値も格納可)
  5. Geometry COMP の Instance Translate Op として参照、または GLSL TOP 内で texelFetch() で per-point 取得

Example 3: 音声波形を画像化して Feedback TOP で残像表示 🌊

Audio Device In CHOP → Math CHOP (正規化) → CHOP to TOP (Data Format=R, Pixel Format=8-bit fixed) → Feedback TOP → 出力ビジュアル

リアルタイム音声波形を視覚化するクラシックなパターン。CHOP to TOP で各サンプルを 1 列のピクセルに変換し、Feedback TOP で 1 フレームずつスクロールさせることで時系列の波形画像が得られます。Pixel Format は 8-bit fixed で十分なため軽量。

  1. Audio Device In CHOP でマイク等からオーディオを取得
  2. Math CHOP-1〜1 の波形を 0〜1 に正規化 (Multiply 0.5 + Add 0.5)
  3. CHOP to TOPData FormatRPixel Format8-bit fixed (Mono) に設定
  4. 下流に Feedback TOP + Transform TOP を接続し、毎フレーム 1 ピクセル横にずらして合成
  5. 壁面投影やビジュアルの背景レイヤーとして使う

関連オペレータ 🔗

類似機能OP 🔍

  • TOP to CHOP — 逆方向の変換 — TOP のピクセル値を CHOP チャンネルに取り出す

組み合わせ推奨OP 🔄

  • GLSL TOP — CHOP to TOP の出力を sampler2D としてバインドし GPU シェーダで参照
  • SOP to CHOP — ジオメトリ属性を CHOP 経由で TOP テクスチャに変換するパイプライン上流
  • Feedback TOP — CHOP to TOP の時系列データを 1 フレームずつ蓄積して波形画像化
  • Math CHOP — CHOP to TOP に渡す前段でチャンネル値を 0-1 範囲に正規化

前処理・後処理TOP 🎯


Info情報 📊

TOP は Info CHOP / Info DAT に接続することで解像度・ピクセルフォーマット・クック情報を取得できます。CHOP to TOP の場合、出力テクスチャのサイズと 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: エラー数

Common TOP Info Channels 📊

  • resx: 出力テクスチャの横幅 (ピクセル単位)。Data Format と CHOP サンプル数の関係を確認
  • resy: 出力テクスチャの縦幅 (ピクセル単位)。Image Layout の効果を確認
  • aspectx: アスペクト比の横成分
  • aspecty: アスペクト比の縦成分
  • depth: ピクセルフォーマットのビット深度
  • gpu_memory_used: この TOP が消費している GPU メモリ量 (バイト)

Common Operator Info Channels 📡

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

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

よくある問題と解決策 🔧

❌ Problem: CHOP の値が画像で 0 または 1 にクランプされて見える
✅ Solution:

  • Clamp CHOP Values がオンになっていないか確認 (オンだと 0-1 範囲外の値が切り詰められる)
  • Pixel Format8-bit fixed 系になっていないか確認。CHOP の浮動小数精度を保持するには 32-bit float (RGBA) 等の float 系を選択
  • 前段で Math CHOP を入れて意図的に 0-1 範囲に正規化するか、Multiply / Add で適切なレンジに変換

❌ Problem: 長いチャンネルが途中で切れて画像に出ない
✅ Solution:

  • Image LayoutRow per Channel Set (Cropped) になっていると、テクスチャ最大幅 (通常 32768) または Custom Resolution の幅を超えたサンプルが 捨てられる
  • Image LayoutRow(s) per Channel Set (Wrapped) に切り替えると余分なサンプルが新しい行に折り返される
  • ポイントクラウドのように位置情報が重要でない場合は Fit to Square (Combine Sets) を使うと最小正方形テクスチャに収まる

❌ Problem: GLSL TOP からサンプリングしたら値がぼやけている / 隣のサンプルと混ざる
✅ Solution:

  • Input SmoothnessInterpolate Pixels (linear) になっているとサンプル間がバイリニア補間されて混ざる。Nearest Pixel に切替
  • GLSL TOP 側でも sampler の filter を GL_NEAREST に揃える、または texelFetch() でピクセル整数座標アクセス
  • Fill ViewerNative Resolution にして実際のピクセル配置を視覚確認

❌ Problem: チャンネル名が r0 / g0 なのに想定と違うピクセル位置に入る
✅ Solution:

  • Data Format はチャンネル名ではなく CHOP 内の順序 でグループ化する。Data Format=RGBA なら先頭 4 チャンネルが順に R/G/B/A になる
  • 前段で Shuffle CHOPReorder CHOP でチャンネル順序を意図通りに並べ替え
  • デバッグ時は Pixel Format32-bit float + Fill Viewer = Native Resolution でピクセル値を直接確認

参考資料 📚

その他 🔗

公式リソース 📖

この記事は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をコピーしました