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

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

Reorder TOP の RGBA チャンネル再配置機能を示す図

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

概要 📖 – RGBA チャンネルを再配置

Reorder TOPは、出力 RGBA の各チャンネルへ入力テクスチャの任意チャンネルを割り当て直す、チャンネル再配置専用の TOPです。Red / Green / Blue / Alpha それぞれに対して入力 1・入力 2 のどのチャンネルを流し込むかを個別に指定でき、アルファの差し替えやチャンネル複製・固定値化を 1 ノードで完結します。

主な用途 🎯

  • 出力 RGBA の各チャンネルにどの入力のどのチャンネルを割り当てるか自由に再配置
  • 2 入力間でのチャンネル合成 (入力 1 の RGB + 入力 2 のアルファ 等)
  • アルファチャンネルの差し替え・別テクスチャからのマット流し込み
  • グレースケールを単一チャンネルへ複製してマスク化
  • チャンネルを入力値・別チャンネルへ固定したフォーマット整形

データフロー 🔄

入力: 最大 2 枚の TOP テクスチャ

出力 R / G / B / A ごとに「どの入力のどのチャンネル」を割り当て

出力: 再配置後の RGBA テクスチャ

Tips

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

まる。
まる。

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


パラメータ解説 ⚙️

Reorder Page 🎨

出力チャンネルの割り当て 🎚️

出力 RGBA 各チャンネルに対し、どの入力のどのチャンネルを流し込むかを指定するパラメータ群

Output Red .outputred 🟥
Output Red (赤の供給元) — 出力画像の赤チャンネルに、どの入力のどのチャンネルを使うかを指定します。
どの入力テクスチャから値を取るかを選び、続く Output Red Channel で具体的なチャンネルを指定します。

Output Red Channel .outputredchan 🔴
Output Red Channel (赤に使うチャンネル) — 選んだ入力の中から、赤チャンネルとして流し込むチャンネルを指定します。

Ouput Green .outputgreen 🟩
Ouput Green (緑の供給元) — 出力画像の緑チャンネルに、どの入力のどのチャンネルを使うかを指定します。

Ouput Green Channel .outputgreenchan 🟢
Ouput Green Channel (緑に使うチャンネル) — 選んだ入力の中から、緑チャンネルとして流し込むチャンネルを指定します。

Ouput Blue .outputblue 🟦
Ouput Blue (青の供給元) — 出力画像の青チャンネルに、どの入力のどのチャンネルを使うかを指定します。

Ouput Blue Channel .outputbluechan 🔵
Ouput Blue Channel (青に使うチャンネル) — 選んだ入力の中から、青チャンネルとして流し込むチャンネルを指定します。

Output Alpha .outputalpha
Output Alpha (アルファの供給元) — 出力画像のアルファチャンネルに、どの入力のどのチャンネルを使うかを指定します。別テクスチャをアルファとして流し込むマット差し替えに使います。

Output Alpha Channel .outputalphachan
Output Alpha Channel (アルファに使うチャンネル) — 選んだ入力の中から、アルファチャンネルとして流し込むチャンネルを指定します。


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 最近傍ピクセルサンプリング (ピクセルアート向け、ジャギーが残る)
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 (RGB) + Ramp TOP (マット) → Reorder TOP → Over TOP

映像の RGB はそのまま使いつつ、別途用意したグラデーションマスクをアルファとして流し込み、合成時の抜き具合をコントロールする基本フロー。

  1. 入力 1 に映像テクスチャ、入力 2 にマスク用テクスチャを接続
  2. Output Red / Green / Blue を入力 1 の各チャンネルに割り当て
  3. Output Alpha を入力 2 のチャンネルに割り当ててマットを差し替え
  4. Over TOP で背景と合成

Example 2: チャンネル複製でマスク化 🩶

Movie File In TOP → Reorder TOP (R を全チャンネルへ) → Lookup TOP

単一チャンネルの値を RGBA すべてに複製してグレースケールマスクを生成し、後段のルックアップやマット処理の入力として再利用する用途。

  • 入力 1 のテクスチャを接続
  • Output Red / Green / Blue / Alpha すべてを入力 1 の同一チャンネルに割り当てて複製
  • 生成したグレースケールを Lookup TOP の検索値に利用

Example 3: 2 入力のチャンネル合成 🧩

TOP A (RGB) + TOP B (Alpha) → Reorder TOP → Null TOP

入力 1 から RGB、入力 2 からアルファを取り出して 1 枚の RGBA テクスチャにまとめ、後段で扱いやすい形式に整形する例。

  • 入力 1 に色情報テクスチャ、入力 2 にアルファ情報テクスチャを接続
  • 出力 RGB を入力 1、出力アルファを入力 2 に割り当て
  • Null TOP で出力を確定

関連オペレータ 🔗

類似機能OP 🔍

  • Channel Mix TOP — チャンネルを行列演算で重み付きミックス (単純再配置より高機能)
  • Monochrome TOP — RGB を輝度ベースで 1 チャンネルへ統合

組み合わせ推奨OP 🔄

  • Over TOP — 差し替えたアルファを使ってアルファ合成
  • Composite TOP — 再配置後の複数テクスチャをまとめて合成
  • Lookup TOP — 複製したグレースケールを検索値に利用
  • Null TOP — 出力を固定して下流の参照点にする

前処理・後処理TOP 🎯


Info CHOP情報 📊

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

代表的な取得チャンネル 📡

  • resolution_x / resolution_y: 出力テクスチャの幅・高さ (ピクセル)
  • aspectx / aspecty: 出力テクスチャのアスペクト比 (横 / 縦)
  • depth: ピクセルフォーマットのビット深度 (8 / 10 / 16 / 32)
  • num_components: 出力チャンネル数 (1=Mono / 2=Mono+Alpha or RG / 3=RGB / 4=RGBA)
  • gpu_mem_used: GPU メモリ使用量 (バイト)

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

よくある問題と解決策 🔧

❌ Problem: 出力が真っ黒・真っ白になる
✅ Solution:

  • 各 Output チャンネルの供給元 (入力) とチャンネル指定が意図通りか確認
  • 入力テクスチャが実際にそのチャンネルを持つか (RGB のみだとアルファは空) を確認
  • 上流の Level TOP で値域を確認

❌ Problem: アルファの差し替えが反映されない
✅ Solution:

  • Output Alpha の供給元が入力 2 に向いているか確認
  • 入力 2 が接続されているか、空でないかを確認
  • 後段の Over TOP がアルファを使う設定か確認

❌ Problem: 2 入力の解像度が合わず崩れる
✅ Solution:

  • Common Page の Output Resolution を片方の入力基準に固定
  • 上流で解像度を揃えてから接続
  • Composite TOP 等で事前にサイズを統一

参考資料 📚

その他 🔗

公式リソース 📖

関連記事 🔗

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