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

概要 📖 – 画像を層状に重ね合わせる

Layer TOPは、複数の TOP を「レイヤー」として束ね、各レイヤーごとに配置・回転・スケール・透明度・合成モードを指定して 1 枚の画像に合成する TOPです。Base TOP を背景キャンバスとし、Layers ページで動的に追加されるレイヤー TOP 群を Pre-Fit Overlay でキャンバスに合わせ、Operation で 47 種の合成モードからレイヤーごとに選択できます。

主な用途 🎯

• 複数 TOP をレイヤーとしてまとめて 1 枚のテクスチャに合成
• 各レイヤーごとに Translate / Rotate / Scale / Opacity を独立指定した HUD・UI 構築
• Pre-Fit Overlay と Justify でレイヤー画像を Base TOP キャンバスに合わせて配置
• 47 種の合成モード (Over / Multiply / Screen / Add / Overlay 等) からレイヤーごとに選択
• Composite TOP より少ない設定で多数レイヤーをまとめて扱える代替 OP

データフロー 🔄

入力: Base TOP (キャンバス) + Layers ページの複数 TOP
 ↓
各レイヤーに Pre-Fit Overlay / Justify / Translate / Rotate / Scale / Opacity / Operation を適用
 ↓
出力: 合成済みテクスチャ

---

パラメータ解説 ⚙️

Setup Page 📋

Fixed Layer .fixedlayer 📌

下層 (背景キャンバス) として固定するレイヤー

項目	内部名	説明
Blank Layer	.blanklayer	透明レイヤーを背景として固定 (Base TOP のみ使用)
First Input	.firstinput	最初の入力 (Base TOP) を背景レイヤーとして固定

Base TOP / レイヤー基本設定 🖼️

Base TOP .base 🎯
全レイヤーが乗る背景キャンバスとなる TOP のパス。レイヤー解像度・アスペクト比はこの Base TOP に揃えられる

Layer Resolution .layerres 📐
Base TOP が指定されていない場合に使用するキャンバスの解像度 (W × H ピクセル)

Layer Color .layercolor 🎨
Blank Layer のクリアカラー (RGB)

• R (layercolorr)
• G (layercolorg)
• B (layercolorb)

Layer Alpha .layeralpha 🔲
Blank Layer のクリアアルファ値

Enable Crop .enblcrop ✂️

レイヤーのクロッピング有効化トグル:

• Enable Crop: オンにすると各レイヤーがキャンバス境界でクリッピングされる。オフだとレイヤーの transform で範囲外に押し出してもキャンバス全域に描画される

Pre-Fit Overlay .prefit 📐

レイヤー画像を Base TOP キャンバスに収める方式

項目	内部名	説明
Per Layer	.prefitperlayer	レイヤーごとに Layers ページで個別指定
Fill	.fill	キャンバスいっぱいに引き伸ばす (アスペクト無視)
Fit Horizontal	.fithorz	横幅に合わせて収める (アスペクト保持、上下余白)
Fit Vertical	.fitvert	縦幅に合わせて収める (アスペクト保持、左右余白)
Fit Best	.fitbest	アスペクト保持で内側に収まる最大サイズ
Fit Outside	.fitoutside	アスペクト保持で外側まで覆う最小サイズ (はみ出しあり)

Justify Horizontal .justifyh ↔️

レイヤーの水平方向の整列

項目	内部名	説明
Left	.left	キャンバス左端に揃える
Center	.center	キャンバス水平中央に揃える
Right	.right	キャンバス右端に揃える

Justify Vertical .justifyv ↕️

レイヤーの垂直方向の整列

項目	内部名	説明
Bottom	.bottom	キャンバス下端に揃える
Center	.center	キャンバス垂直中央に揃える
Top	.top	キャンバス上端に揃える

Extend .extend 🔁

レイヤー画像の境界外サンプリング方式

項目	内部名	説明
Per Layer	.extperlayer	レイヤーごとに Layers ページで個別指定
Hold	.hold	境界ピクセルを引き伸ばして外側を埋める
Zero	.zero	境界外は透明 (0) 扱い
Repeat	.repeat	テクスチャをタイル状に繰り返す
Mirror	.mirror	テクスチャを鏡像反転して繰り返す

Enable Transform / Opacity トグル ✅

Enable Rotate .enblrot 🔄
レイヤーごとの回転変換を有効化

Enable Translate .enbltrans ↔️
レイヤーごとの平行移動を有効化

Enable Scale .enblscale 📏
レイヤーごとの非一様スケールを有効化

Enable Uniform Scale .enbluniscale 🔍
レイヤーごとの一様スケール (XY 同倍率) を有効化

Enable Pivot .enblpivot 📍
レイヤーごとの回転・スケール中心点指定を有効化

Enable Opacity .enblopac 🌫️
レイヤーごとの透明度を有効化

Enable Luma Level .enblluma 💡
レイヤーごとの輝度レベル調整を有効化

Operation .operand 🔗

レイヤーと下層との合成方式 (47 種の合成モード)

項目	内部名	説明
Per Layer	.opperlayer	レイヤーごとに Layers ページで個別指定
Add	.add	下層 + レイヤー (加算合成、明るくなる)
Atop	.atop	下層のアルファ範囲内にレイヤーを乗せる (Porter-Duff Atop)
Average	.average	下層とレイヤーの平均 (50%/50% ブレンド)
Brightest	.brightest	各ピクセルで明るい方を採用 (Lighten)
Burn Color	.burncolor	Color Burn (下層をレイヤー色で焼き込み)
Burn Linear	.burnlinear	Linear Burn (下層 + レイヤー – 1)
Chroma Difference	.chromadifference	色差分 (彩度成分の差分)
Color	.color	下層の輝度を保ちレイヤーの色相・彩度を適用
Darker Color	.darkercolor	ピクセル単位で暗い色を採用
Difference	.difference	|下層 – レイヤー| (絶対差分)
Dimmest	.dimmest	各ピクセルで暗い方を採用 (Darken)
Divide	.divide	下層 / レイヤー (除算合成、明るく飛ぶ)
Dodge	.dodge	Color Dodge (下層をレイヤー色で覆い焼き)
Exclude	.exclude	Exclusion (Difference より柔らかい反転合成)
Freeze	.freeze	Freeze ブレンド (Hardlight 派生)
Glow	.glow	Glow ブレンド (発光風の加算系合成)
Hard Light	.hardlight	Hard Light (Overlay の上下反転版)
Hard Mix	.hardmix	Hard Mix (彩度の高い 8 色に圧縮)
Heat	.heat	Heat ブレンド (熱マップ風合成)
Hue	.hue	下層の輝度・彩度を保ちレイヤーの色相を適用
Inside	.inside	Porter-Duff Inside (下層のアルファ内側のみレイヤー表示)
Inside Luminance	.insideluminance	下層の輝度をマスクとして Inside 合成
Inverse	.inverse	Inverse ブレンド (反転加算)
Lighter Color	.lightercolor	ピクセル単位で明るい色を採用
Luminance Difference	.luminancedifference	輝度の差分
Maximum	.maximum	下層とレイヤーの最大値 (Brightest と同義)
Minimum	.minimum	下層とレイヤーの最小値 (Dimmest と同義)
Multiply	.multiply	下層 × レイヤー (乗算合成、暗くなる)
Negate	.negate	Negate ブレンド (色反転合成)
Outside	.outside	Porter-Duff Outside (下層のアルファ外側のみレイヤー表示)
Outside Luminance	.outsideluminance	下層の輝度をマスクとして Outside 合成
Over	.over	標準のレイヤー合成 (Porter-Duff Over、デフォルト)
Overlay	.overlay	Overlay (下層の輝度に応じて Multiply / Screen を切替)
Pinlight	.pinlight	Pinlight (レイヤー輝度に応じて Lighten / Darken)
Reflect	.reflect	Reflect ブレンド (光沢風合成)
Screen	.screen	Screen (1 – (1-下層) × (1-レイヤー)、明るくなる)
Soft Light	.softlight	Soft Light (柔らかい Overlay)
Linear Light	.linearlight	Linear Light (Linear Burn / Linear Dodge の組合せ)
Stencil Luminance	.stencilluminance	下層の輝度をステンシルとして Inside/Outside 切替
Subtract	.subtract	下層 – レイヤー (減算合成)
Subtractive	.subtractive	Subtractive ブレンド (減算色合成)
Under	.under	Porter-Duff Under (下層をレイヤーの後ろに置く)
Vivid Light	.vividlight	Vivid Light (Color Burn / Color Dodge の組合せ)
Xor	.xor	Porter-Duff Xor (下層とレイヤーのアルファ排他)
Y Film	.yfilm	Y Film ブレンド (フィルム風輝度合成)
Z Film	.zfilm	Z Film ブレンド (フィルム風深度合成)

---

Layers Page 📚

Layer / TOP 🎯

Layer .lay 🔢
動的に追加されるレイヤー数の指定。レイヤー番号ごとに専用パラメータブロックが展開され、それぞれに TOP 入力・Pre-Fit Overlay・Operation・Translate・Rotate・Scale・Opacity・Luma Level が用意される

TOP .lay0top 🖼️
各レイヤー番号 (lay0top / lay1top / …) で個別に指定する TOP のパス。Setup ページで Enable した変換系トグルに対応するパラメータがこのレイヤーブロック内で有効化される

---

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: HUD オーバーレイ (複数 UI 要素を 1 枚に集約) 🎮

Render TOP (背景シーン) + 複数 Text TOP / Image TOP → Layer TOP (各レイヤーに Translate / Opacity) → 出力

3D レンダ結果を背景キャンバスとし、その上にスコア・体力ゲージ・ミニマップ等の TOP をレイヤーごとに位置指定して 1 枚の最終映像に合成する HUD の基本構成。Composite TOP より少ない設定でレイヤー単位の Translate / Opacity をまとめて管理できる。

1. Layer TOP を作成し Base TOP に背景となる Render TOP を指定
2. Enable Translate / Enable Opacity をオンにしてレイヤー単位制御を有効化
3. Layers ページで Layer 数を増やし、各レイヤーに UI 要素の TOP を TOP パラメータで接続
4. 各レイヤーの Translate でキャンバス内の配置を指定、Opacity でフェード表現を追加

Example 2: レイヤーごとのアニメーション (回転する 3 枚カード) 🔄

3 枚の Image TOP → Layer TOP (Enable Rotate / Enable Translate) → 出力

Enable Rotate と Enable Translate をオンにしたうえで各レイヤーの Rotate / Translate に absTime.seconds ベースの式を流し、レイヤーごとに異なるタイミングで回転・移動するモーションデザインを 1 OP で組み立てる例。

• Setup ページで Enable Rotate / Enable Translate / Enable Pivot をオン
• Layers ページで 3 レイヤー追加し、それぞれに異なる Image TOP を接続
• 各レイヤーの Rotate に absTime.seconds * 30 + 120 * me.digits 等を Export してレイヤー毎にタイミングを変える
• Operation を Over にして通常のレイヤー合成、または Add / Screen で発光風に

Example 3: ブレンドモードによる多重露光合成 🎨

複数 Movie File In TOP → Layer TOP (Operation=Per Layer + Layers ごとに合成モード切替) → 出力

Setup ページの Operation を Per Layer にし、Layers ページで各レイヤーごとに Screen / Multiply / Overlay 等を切り替えることで、Photoshop 風の多重露光・ブレンド合成を実現する。47 種類の合成モードから用途に応じて選択できる。

• Setup ページで Operation を Per Layer に設定
• Layers ページで 3 レイヤー以上追加
• 各レイヤーの Layers ページ側 Operation をそれぞれ Screen / Multiply / Overlay 等に切替
• Layer Color / Layer Alpha で背景の色味を調整して最終トーンを揃える

---

関連オペレータ 🔗

類似機能OP 🔍

• Composite TOP — 複数 TOP の合成 (タイル状の並べ替え・合成モード指定)
• Over TOP — 2 入力の Porter-Duff Over 合成 (シンプル合成)
• Multiply TOP — 2 入力の乗算合成

組み合わせ推奨OP 🔄

• Render TOP — 3D シーンを背景キャンバスとして Layer TOP に流し込む
• Text TOP — テキスト UI を 1 レイヤーとして上に重ねる
• Movie File In TOP — 動画ファイルをレイヤーソースとして使用
• Transform TOP — Layer TOP の前段で個別レイヤーを事前変換
• Level TOP — 合成後の輝度・コントラスト調整
• Crop TOP — レイヤー側でクロップしてから Layer TOP に渡す

前処理・後処理TOP 🎯

• 前処理: Constant TOP、Movie File In TOP、Render TOP、Text TOP、Transform TOP
• 後処理: Level TOP、Blur TOP、Feedback TOP、GLSL TOP、Out TOP

---

Info CHOP情報 📊

Layer 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: レイヤーごとの Rotate / Translate / Scale が反映されない
✅ Solution:

• Setup ページの Enable Rotate / Enable Translate / Enable Scale をオンにしたか確認 (これらがオフだとレイヤー側の値が無視される)
• Enable Pivot をオンにして回転・スケールの中心点を意図した位置に設定
• Layers ページで該当レイヤーの値が 0 のまま動かしていないか確認

❌ Problem: レイヤー画像がキャンバスからはみ出る・引き伸ばされる
✅ Solution:

• Pre-Fit Overlay を Fit Best または Fit Outside に設定してアスペクト比を保持
• Justify Horizontal / Justify Vertical で整列方向を指定
• Enable Crop をオンにしてキャンバス境界で切り取り、はみ出しを抑制

❌ Problem: Operation を変えてもレイヤーが期待通りにブレンドされない
✅ Solution:

• Setup ページの Operation を Per Layer にし、Layers ページで各レイヤーごとに Operation を指定
• レイヤー TOP のアルファチャンネルが期待値か事前に Feedback TOP ではなく Constant TOP / Level TOP で確認
• Enable Opacity がオフだと透明度が無視されるためオンに切替

❌ Problem: レイヤー枚数が多くパフォーマンスが落ちる
✅ Solution:

• Common Page の Output Resolution を Half / Quarter に下げて後段で拡大
• Common Page の Pixel Format を 8-bit fixed (RGBA) に下げる (HDR 不要なら)
• 頻繁に更新しないレイヤーは Feedback TOP でキャッシュしてから Layer TOP に渡す

---

参考資料 📚

その他 🔗

• TouchDesigner Wiki — Category:TOPs
• TouchDesigner Wiki — Pixel Formats 解説
• TouchDesigner Wiki ホーム
• TouchDesigner 公式 Forum
• Facebook — TouchDesigner Help Group

公式リソース 📖

• TouchDesigner公式ドキュメント – Layer TOP
• TouchDesigner公式ドキュメント – Composite TOP (代替合成 OP)
• TouchDesigner公式ドキュメント – Render TOP (背景キャンバス参照)

その他の記事はこちら

---