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

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

Cross TOP の 2 入力線形補間機能を示すサムネイル

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

概要 📖 – 2枚の画像を補間する

Cross TOPは、2 つの入力 TOP を Cross 値 0〜1 で線形補間し、A/B 間のクロスフェードを軽量に行う合成 TOPです。Cross パラメータが 0 のとき Input 1 が出力され、1 のとき Input 2 が出力されます。中間値では両者が線形補間でブレンドされ、Pre-Fit Overlay と Transform パラメータで Overlay 側のサイズ・位置・回転を Fixed Layer に合わせて制御できます。

主な用途 🎯

  • 2 枚の TOP を Cross 値 0〜1 で線形補間 (Cross=0 → Input1、Cross=1 → Input2)
  • 映像クロスフェードトランジション (A → B の滑らかな切替)
  • Cross 値を 0 と 1 で切替えての 2 入力 A/B 比較
  • Pre-Fit Overlay と Justify で Overlay 側のサイズ・配置を Fixed Layer に整列
  • Cross 値を LFO CHOP / Timer CHOP で駆動した自動シーン切替

データフロー 🔄

入力: 2 枚の TOP テクスチャ (input1, input2)
 ↓
Fixed Layer の解像度に Overlay をリサイズ
 ↓
線形補間合成 (output = input1 * (1 - cross) + input2 * cross)
 ↓
出力: 補間結果テクスチャ

Tips

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

まる。
まる。

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

パラメータ解説 ⚙️

Cross Page 🔀

Cross .cross 🎚️

Cross .cross 🎚️
2 入力の混合比を 0〜1 で指定。Cross = 0 のとき出力は Input 1、Cross = 1 のとき出力は Input 2 になる。中間値では output = input1 * (1 - cross) + input2 * cross で線形補間される

Transform Page 🎯

Fixed Layer .size 📐

合成の基準となる固定レイヤを選択 (解像度・アスペクト比の基準)

項目 内部名 説明
Input 1 .input1 Input 1 を Fixed、Input 2 を Overlay として扱う。出力解像度・アスペクトは Input 1 に揃う
Input 2 .input2 Input 2 を Fixed、Input 1 を Overlay として扱う。出力解像度・アスペクトは Input 2 に揃う

Pre-Fit Overlay .prefit 📐

Overlay レイヤを Fixed レイヤに合わせる方式

項目 内部名 説明
Fill .fill Fixed の解像度・アスペクトに引き伸ばす (アスペクト無視、歪み発生)
Fit Horizontal .fithorz Fixed の横幅に合わせて引き伸ばす (上下に余白)
Fit Vertical .fitvert Fixed の縦幅に合わせて引き伸ばす (左右に余白)
Fit Best .fitbest Overlay のアスペクトを保ちつつクロップなしで最大化
Fit Outside .fitoutside Overlay のアスペクトを保ちつつ Fixed をすべて覆う (クロップあり)

Justify Horizontal .justifyh ↔️

Overlay の水平方向アラインメント

項目 内部名 説明
Left .left Overlay を Fixed の左端に揃える
Center .center Overlay を Fixed の中央に配置
Right .right Overlay を Fixed の右端に揃える

Justify Vertical .justifyv ↕️

Overlay の垂直方向アラインメント

項目 内部名 説明
Bottom .bottom Overlay を Fixed の下端に揃える
Center .center Overlay を Fixed の中央に配置
Top .top Overlay を Fixed の上端に揃える

Extend Overlay .extend 🔁

Overlay レイヤの端部処理 (境界外サンプリング方式)

項目 内部名 説明
Hold .hold エッジのピクセル値をそのまま伸ばす
Zero .zero エッジ外を 0 (透明) として扱う
Repeat .repeat エッジでタイリング (繰り返し)
Mirror .mirror エッジでミラーリング

Transform パラメータ 🎚️

Rotate .r
Overlay を回転。正値で時計回り、負値で反時計回り

Translate .t
Overlay を X / Y 方向に平行移動 (tx / ty)

Translate Unit .tunit
Translate の単位 (pixels / fraction / fractionaspect)

Scale .s
Overlay の X / Y スケール (sx / sy)

Pivot .p
Scale / Rotate の基準点 (px / py)。Transform Order の影響を受ける

Pivot Unit .punit
Pivot の単位 (pixels / fraction / fractionaspect)

Legacy Transform .legacyxform
旧バージョンのトランスフォーム行列ロジック (回転方向・順序が反転)。新規プロジェクトではオフのままが推奨

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: Edit > Preferences > TOPs の 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, 2-bit Alpha, fixed (RGBA) .rgb10a2fixed 10-10-10-2 ビット固定小数 (バンディング抑制)
16-bit fixed (RGBA) .rgba16fixed 16 ビット固定小数 RGBA
11-bit float (RGB), Positive Values Only .rgba11float 11-11-10 ビット浮動小数 RGB (正値のみ、アルファ常に 1、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: 2 動画素材の自動クロスフェード切替 🎞️

Movie File In TOP (素材 A) → input1, Movie File In TOP (素材 B) → input2 → Cross TOP (Cross param = LFO CHOP) → 出力

Cross パラメータを LFO CHOP の 0〜1 ランプで駆動し、2 つの映像素材を一定周期で自動的にクロスフェード切替する VJ 用の基本構成。Fixed Layer を Input 1 に固定すれば出力解像度・アスペクトが素材 A に揃うため、後段の合成パイプラインが安定する。

  1. 2 つの Movie File In TOP を Cross TOP の input1 / input2 に接続
  2. LFO CHOP を作成し Type を Ramp、Range を 0〜1 に設定
  3. Cross TOP の Cross パラメータに LFO CHOP の出力チャンネルをドラッグ&ドロップで参照
  4. Fixed Layer を Input 1 に固定し、Common Page の Output Aspect を Resolution に設定してアスペクト伝播事故を防止

Example 2: Render出力のA/B比較切替 🔀

Render TOP (シェーダ A) → input1, Render TOP (シェーダ B) → input2 → Cross TOP (Cross param = 0 または 1) → 出力

Cross パラメータを 0 と 1 でトグルすることで、2 つのシェーダ / 設定違いのレンダ結果を瞬時に切替えて A/B 比較できる。中間値 0.5 にすれば両者の重ね合わせも一目で確認可能。Composite TOP の Cross Dissolve 演算と同等の結果を専用ノード単発で得られる。

  • 比較したい 2 つの Render TOP を input1 / input2 に接続
  • Cross パラメータをショートカット (Ctrl + クリック) で 0 ↔ 1 切替できるようにキーバインドを割り当て
  • 中間値 0.5 を試して両者の差分が視覚的に確認できる構図を確保
  • Common Page の Pixel Format を 16-bit float (RGBA) 以上にして HDR 値の比較が飽和しないようにする

Example 3: Timer CHOP 駆動のシーントランジション ⏱️

Render TOP (シーン A) → input1, Render TOP (シーン B) → input2 → Cross TOP (Cross param = Timer CHOP fraction) → 出力

Timer CHOP の fraction チャンネル (0〜1 のランプ) を Cross に紐づけ、トリガーで指定秒数かけて A → B にスムーズに遷移するシーントランジション。Pre-Fit Overlay を Fit Best に設定すると、解像度が違うシーン間でもアスペクトを保ちつつ正しく合成される。

  1. Timer CHOP を作成し Length をトランジション秒数 (例 2 秒) に設定
  2. Cross TOP の Cross パラメータに op('timer1')['fraction'] を Python 参照式で設定
  3. Pre-Fit Overlay を Fit Best にしてアスペクト保持クロップなし合成に
  4. Timer の Start パルスをトリガー (キー押下や DAT イベント) に紐付けて、任意のタイミングでトランジション開始

関連オペレータ 🔗

類似機能OP 🔍

  • Composite TOP — Operation = Cross Dissolve で同等。40 種以上の合成モードを切替可
  • Add TOP — 2 入力の加算合成専用 (線形補間ではなく単純加算)
  • Multiply TOP — 2 入力の乗算合成専用
  • Over TOP — アルファ付き Porter-Duff Over 合成専用
  • Switch TOP — Index で N 入力から 1 つを離散選択 (補間なし、Cross とは目的が異なる)

組み合わせ推奨OP 🔄

  • LFO CHOP — Cross パラメータを周期的に駆動して自動クロスフェード
  • Timer CHOP — fraction でトリガー式のシーントランジション
  • Movie File In TOP — 2 入力の映像素材ソース
  • Render TOP — 3D シーンの A/B 比較・トランジション元として頻出
  • Level TOP — クロスフェード前後で輝度・コントラストを揃える

前処理・後処理TOP 🎯

Info CHOP情報 📊

Cross 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: Cross 値を変えても出力が変化しない / Input 1 のみ表示される
✅ Solution:

  • Cross パラメータが 0 に固定されていないか確認 (0 のとき出力は Input 1 のみ)
  • Input 2 のソース TOP が空 / 真っ黒だと中間値でも見た目の変化が小さい場合があるため、ソース内容を確認
  • Cross に CHOP 参照式を入れた場合、参照先 CHOP が実際に 0〜1 を出力しているか CHOP Viewer で確認

❌ Problem: Overlay が引き伸ばされて歪む / クロップされる
✅ Solution:

  • Pre-Fit Overlay が Fill になっていないか確認 (Fixed サイズに強制ストレッチされる)
  • Pre-Fit Overlay を Fit Best または Fit Outside に変更してアスペクト保持
  • Common Page の Output Aspect を Resolution に固定し、上流のアスペクト伝播事故を遮断

❌ Problem: 解像度が違う 2 入力を Cross するとどちらかが小さく中央に置かれる
✅ Solution:

  • Fixed Layer をどちらの入力に揃えるか明示 (デフォルトは Input 1)。出力解像度・アスペクトは Fixed Layer 側に揃う
  • Overlay 側のサイズを Fixed に合わせたければ Pre-Fit Overlay を Fit Best 等で拡縮
  • 両入力の解像度を事前に揃えるには上流に Resolution TOP を挟むのが確実

❌ Problem: Cross をアニメーションすると階段状にカクつく / 滑らかでない
✅ Solution:

  • Common Page の Pixel Format を 16-bit float (RGBA) 以上にして補間階調を確保
  • 駆動側の LFO CHOP / Timer CHOP のサンプリングレートが低くないか確認 (Project FPS と一致させる)
  • Input Smoothness を Interpolate Pixels に設定し、Overlay 側のリサンプリング段でのジャギーを軽減

参考資料 📚

その他 🔗

公式リソース 📖

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