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

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

概要 📖 – 豊富なブレンドモードで複数 TOP を合成する

Composite TOPは、複数の TOP を加算・乗算・スクリーン・Over など豊富なブレンドモードで合成するTOPです。Operation メニューには 40 種以上の合成モードが用意されており、Photoshop ライクなブレンドを再現できます。

主な用途 🎯

2 枚以上の TOP を加算・乗算・スクリーンなどでブレンド
Over 合成によるアルファ付き UI レイヤ重ね
Screen / Add によるブルーム・グロー合成
Multiply によるマスク付き色付け
Pre-Fit / Justify による画像配置とタイリング

データフロー 🔄

入力: 複数の TOP テクスチャ (input1, input2, ...)
 ↓
Operation で指定したブレンドモード適用
 ↓
出力: 合成テクスチャ

Tips

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

リンク

まる。

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

パラメータ解説 ⚙️

Composite Page 📋

Operation `.operand` 🎛️

ブレンドモード (合成演算) の選択

項目	内部名	説明
Add	`.add`	`input1.rgba + input2.rgba`
Atop	`.atop`	`(input1.rgba * input2.a) + (input2.rgba * (1.0 - input1.a))`
Average	`.average`	`(input1.rgba + input2.rgba) / 2`
Brightest	`.brightest`	明るい側のピクセルを採用
Burn Color	`.burncolor`	カラーバーン (彩度を保ちつつ暗くする)
Burn Linear	`.burnlinear`	リニアバーン (純粋に暗くする)
Chroma Difference	`.chromadifference`	色相成分の差分
Color	`.color`	input1 の色相・彩度を input2 の明度に重ねる
Darker Color	`.darkercolor`	RGB 合計値が低い方を採用
Difference	`.difference`	`abs(input1.rgb - input2.rgb)`, alpha は常に 1.0
Dimmest	`.dimmest`	暗い側のピクセルを採用
Divide	`.divide`	`input1.rgba / input2.rgba`
Dodge	`.dodge`	カラードッジ (色を明るく飛ばす)
Exclude	`.exclude`	Difference に近いが彩度が低くなる
Freeze	`.freeze`	凍ったような硬質ブレンド
Glow	`.glow`	光彩 (Dodge より柔らかい発光感)
Hard Light	`.hardlight`	ハードライト (オーバーレイの強化版)
Hard Mix	`.hardmix`	原色のみに飽和させるハードミックス
Heat	`.heat`	熱画像風の色温度ブレンド
Hue	`.hue`	input1 の色相、input2 の彩度・明度を採用
Inside	`.inside`	`input1.rgba * clamp(input2.a, 0.0, 1.0)`
Inside Luminance	`.insideluminance`	input2 の輝度をマスクとして Inside 合成
Inverse	`.inverse`	input2 を反転して合成
Lighter Color	`.lightercolor`	RGB 合計値が高い方を採用
Luminance Difference	`.luminancedifference`	輝度の差分
Maximum	`.maximum`	`max(input1.r, input2.r), max(input1.g, input2.g), max(input1.b, input2.b), max(input1.a, input2.a)`
Minimum	`.minimum`	`min(input1.r, input2.r), min(input1.g, input2.g), min(input1.b, input2.b), min(input1.a, input2.a)`
Multiply	`.multiply`	`input1.rgba * input2.rgba`
Negate	`.negate`	input1 を否定 (絶対値差分の一種)
Outside	`.outside`	`input1.rgba * (1.0 - input2.a)`
Outside Luminance	`.outsideluminance`	input2 の輝度の反転をマスクとして Outside 合成
Over	`.over`	`(input2.rgba * (1.0 - input1.a)) + input1.rgba`
Overlay	`.overlay`	オーバーレイ (Multiply と Screen を組合せ)
Pinlight	`.pinlight`	ピンライト (硬めの加算的合成)
Reflect	`.reflect`	反射光的なハイライト合成
Screen	`.screen`	`1.0 - ((1.0 - input1.rgba) * (1.0 - input2.rgba))`
Soft Light	`.softlight`	ソフトライト (柔らかい光感)
Linear Light	`.linearlight`	リニアライト (硬めのソフトライト)
Stencil Luminance	`.stencilluminance`	input2 の輝度をステンシルとして input1 を切り抜く
Subtract	`.subtract`	`input1.rgba - input2.rgba`
Subtractive	`.subtractive`	減算ブレンド (色を暗くする)
Under	`.under`	`(input1.rgba * (1.0 - input2.a)) + input2.rgba`
Vivid Light	`.vividlight`	ビビッドライト (Color Dodge と Color Burn の組合せ)
Xor	`.xor`	`(input1.rgba * (1.0 - input2.a)) + (input2.rgba * (1.0 - input1.a))`
Y Film	`.yfilm`	Y フィルムブレンド
Z Film	`.zfilm`	Z フィルムブレンド

入力選択 🎚️

TOP .top
接続された入力に加え、ここに記述した TOP も合成対象に含める。ramp* のようなワイルドカードも可

Preview Grid .previewgrid
全ブレンドモードの効果をグリッド表示するプレビュー機能

Select Input .selectinput
合成を行わず指定インデックスの入力のみをそのまま通過させる

Input Index .inputindex
Select Input 有効時にスルーパスする入力のインデックス

Swap Operation Order .swaporder
入力ペアの順序を入れ替える (A op B → B op A)。Over や Hard Light のような順序依存の演算で重要

Transform Page 🎯

Fixed Layer `.size` 📐

合成の基準となる固定レイヤを選択

項目	内部名	説明
Input 1	`.input1`	Input 1 を Fixed、もう一方を Overlay として扱う
Input 2	`.input2`	Input 2 を Fixed、もう一方を Overlay として扱う

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`	Fixed の左端に揃える
Center	`.center`	Fixed の中央に配置
Right	`.right`	Fixed の右端に揃える

Justify Vertical `.justifyv` ↕️

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

項目	内部名	説明
Bottom	`.bottom`	Fixed の下端に揃える
Center	`.center`	Fixed の中央に配置
Top	`.top`	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 Units .tunit
Translate の単位 (pixels / fraction / fractionaspect)

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

Pivot .p
Scale / Rotate の基準点 (px / py)

Pivot Units .punit
Pivot の単位

Translate Step .tstep
3 つ目以降の入力 (index 2-) を累積的に平行移動。タイリングに利用

Translate Step Units .tstepunit
Translate Step の単位

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: 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: アルファ付き UI レイヤを背景に Over 合成 🖼️

Movie File In TOP (背景) → input1, Constant TOP (UI) → input2 → Composite TOP (Over)

Operation を Over に設定するとアルファ付きの上レイヤを背景に重ねる Photoshop 的なレイヤ合成になります。

input1 に背景映像 (Movie File In TOP) を接続
input2 に UI / オーバーレイ要素を接続
Composite TOP の Operation を Over に設定
必要に応じて Pre-Fit Overlay で Overlay のサイズ合わせを調整

Example 2: Translate Step を使った画像タイリング 🔲

複数の Movie File In TOP (input1-9) → Composite TOP (Translate Step + Pre-Fit nativeres)

Translate Step を使うと 3 つ目以降の入力を累積的にずらして配置でき、グリッドサムネイル表示が 1 OP で実現できます。

3 枚以上の TOP を input2 以降に順番に接続
Pre-Fit Overlay を nativeres 相当に設定し各入力のネイティブ解像度を維持
Translate Step X/Y を bar 幅 + gap に合わせて設定

Info CHOP情報 📊

Composite 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:

Pre-Fit Overlay が Fill になっていないか確認 (Overlay を Fixed サイズに引き伸ばす)
Pre-Fit Overlay を Fit Best または nativeres 系に変更
Common Page の Output Resolution を Custom Resolution に固定

❌ Problem: Over 合成しているのに上レイヤが見えない
✅ Solution:

Swap Operation Order を切替えて input1/input2 の順番を確認
Fixed Layer の選択が想定と逆になっていないか確認
上レイヤの Pixel Format がアルファチャンネルを持つか確認 (RGBA 系)

❌ Problem: 複数入力のタイリングが等間隔にならない
✅ Solution:

Translate Step の単位 (tstepunit) を pixels に固定
Pre-Fit Overlay を nativeres 系にして各入力の解像度を保持
Justify Horizontal / Justify Vertical でアンカー位置を調整

参考資料 📚

公式リソース 📖

コミュニティ 💬

TouchDesigner Forum

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

まる。

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

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

↓日常垢
Instagram：＠malmal0v0

概要 📖 – 豊富なブレンドモードで複数 TOP を合成する

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

Composite Page 📋

Operation .operand 🎛️

入力選択 🎚️

Transform Page 🎯

Fixed Layer .size 📐

Pre-Fit Overlay .prefit 📐

Justify Horizontal .justifyh ↔️

Justify Vertical .justifyv ↕️

Extend Overlay .extend 🔁

Transform パラメータ 🎚️

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 🎨