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

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

概要 📖 – 矩形や角丸を生成する

Rectangle TOPは、矩形・角丸矩形をスタイル付きでレンダリングし、入力と任意のブレンドモードで合成できる生成 TOPです。Size / Center / Rotate / Fill / Border / Corner Radius / Softness といったパラメータで形状とスタイルを細かく制御でき、Comp Over Input をオンにすれば入力 TOP と 45 種以上のブレンドモードで合成できます。

主な用途 🎯

HUD・UI 用の矩形パネルやボタン背景の生成
角丸 (Corner Radius) を使ったカード型 UI・吹き出しベースの作成
マスクテクスチャ (矩形クロップ範囲や Alpha マスク) の生成
ボーダー (縁取り) 付きフレーム・枠線の描画
Softness を使ったソフトエッジの帯・グラデーション素材の生成

データフロー 🔄

入力 (任意): 1 枚の TOP テクスチャ (input1)
 ↓
Size / Center / Corner Radius を指定パラメータで矩形を描画
 ↓
Comp Over Input オン時は入力と Operation で指定した方式で合成
 ↓
出力: 矩形描画済テクスチャ

Tips

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

リンク

まる。

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

パラメータ解説 ⚙️

Rectangle Page ⚙️

Size `.size` 📏

描画する矩形の幅 (X) と高さ (Y) を指定します:

Size X (sizex): 矩形の幅
Size Y (sizey): 矩形の高さ。X と異なる値にすると縦長・横長の長方形になる

Size Unit `.sizeunit` 📐

Size の単位

項目	内部名	説明
Pixels	`.pixels`	ピクセル単位 (解像度に対する絶対値)
Fraction (0-1)	`.fraction`	解像度に対する 0〜1 の比率 (例: 0.5 で半分)
Fraction Aspect (0-1)	`.fractionaspect`	アスペクト比を考慮した 0〜1 の比率

Rotate `.rotate` 🔄

矩形全体を指定角度で回転します。斜めのフレームや傾けたパネルを作るのに使います:

Rotate (rotate): 回転角度 (度単位)

Center `.center` 🎯

矩形の中心座標。(0, 0) がキャンバス中央です:

Center X (centerx): 中心の X 座標
Center Y (centery): 中心の Y 座標

Center Unit `.centerunit` 📐

Center の単位

項目	内部名	説明
Pixels	`.pixels`	ピクセル単位
Fraction (0-1)	`.fraction`	解像度比 (-0.5 〜 0.5 を画面端とする)
Fraction Aspect (0-1)	`.fractionaspect`	アスペクト比考慮の比率

Justify Horizontal `.justifyh` ↔️

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

項目	内部名	説明
Left	`.left`	キャンバス左端寄せ
Center	`.center`	中央寄せ
Right	`.right`	右端寄せ

Justify Vertical `.justifyv` ↕️

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

項目	内部名	説明
Bottom	`.bottom`	下端寄せ
Center	`.center`	中央寄せ
Top	`.top`	上端寄せ

Fill Color `.fillcolor` 🎨

矩形の塗りつぶし色 (RGB) と Alpha を指定します:

Fill Color R / G / B (fillcolorr / fillcolorg / fillcolorb): 塗りつぶしの赤・緑・青成分 (0〜1)
Fill Alpha (fillalpha): 塗りつぶしのアルファ値 (0=透明, 1=不透明)

Border Color `.border` 🖍️

ボーダー (縁取り) の色 (RGB) と Alpha を指定します。Border Width が 0 の時は描画されません:

Border R / G / B (borderr / borderg / borderb): ボーダーの赤・緑・青成分 (0〜1)
Border Alpha (borderalpha): ボーダーのアルファ値

Background Color `.bgcolor` 🟫

矩形の外側 (背景) の色と Alpha を指定します:

Background R / G / B (bgcolorr / bgcolorg / bgcolorb): 背景の赤・緑・青成分 (0〜1)
Background Alpha (bgalpha): 背景のアルファ値 (0 にすると矩形以外が透明になる)

Multiply RGB by Alpha `.multrgbbyalpha` ✖️

オンにすると RGB 値を Alpha 値で事前乗算 (premultiplied alpha) して出力します。Over 合成等で正しい結果を得るために使います:

Multiply RGB by Alpha (multrgbbyalpha): Premultiplied Alpha の有効化トグル

Border Width `.borderwidth` 📐

ボーダー (縁取り) の幅を指定します。0 で非表示:

Border Width (borderwidth): ボーダーの幅 (単位は Border Width Unit 次第)

Border Width Unit `.borderwidthunit` 📐

Border Width の単位

項目	内部名	説明
Pixels	`.pixels`	ピクセル単位
Fraction (0-1)	`.fraction`	解像度比
Fraction Aspect (0-1)	`.fractionaspect`	アスペクト比考慮の比率

Border Offset `.borderoffset` 📏

ボーダーが形状の縁を超えてはみ出す比率を 0〜1 で指定します。実効的に半径が radius + borderoffset * borderwidth になります:

Border Offset (borderoffset): 0 でボーダーが内側、1 で完全に外側に伸びる

Corner Radius `.cornerradius` ⬜

矩形の四隅を丸めるための半径を指定します。0 で直角、値を大きくするほど角丸が強くなり、十分大きくするとスタジアム型 (両端が半円) になります:

Corner Radius (cornerradius): 角丸の半径 (単位は Corner Radius Unit 次第)。カード型 UI や吹き出しベースに利用

Corner Radius Unit `.cornerradiusunit` 📐

Corner Radius の単位

項目	内部名	説明
Pixels	`.pixels`	ピクセル単位
Fraction (0-1)	`.fraction`	解像度比
Fraction Aspect (0-1)	`.fractionaspect`	アスペクト比考慮の比率

Anti-Alias `.antialias` ✨

オンにすると矩形の輪郭にアンチエイリアシングが適用され、ジャギーが軽減されます:

Anti-Alias (antialias): エッジのスムーズ化トグル

Softness `.softness` 🌫️

矩形エッジと背景色をブレンドする量を指定します。値が大きいほど輪郭がぼやけ、ソフトな帯やグラデーションのような表現になります:

Softness (softness): ぼかし量 (単位は Softness Unit 次第)

Softness Unit `.softnessunit` 📐

Softness の単位

項目	内部名	説明
Pixels	`.pixels`	ピクセル単位
Fraction (0-1)	`.fraction`	解像度比
Fraction Aspect (0-1)	`.fractionaspect`	アスペクト比考慮の比率

Output Page 📤

Comp Over Input `.compoverinput` 🔀

オンにすると入力 TOP と矩形の描画結果を Operation で指定した方式で合成します。オフだと矩形単独の出力になります:

Comp Over Input (compoverinput): 入力と合成するかのトグル

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`	Color Burn 合成 (彩度の高い焼き込み)
Burn Linear	`.burnlinear`	Linear Burn 合成 (リニア空間での焼き込み)
Chroma Difference	`.chromadifference`	クロマ差分合成
Color	`.color`	Color ブレンドモード (色相+彩度を上に重ねる)
Darker Color	`.darkercolor`	より暗い色を採用
Difference	`.difference`	`abs(input1.rgb - input2.rgb)`、Alpha は常に 1.0
Dimmest	`.dimmest`	より暗いピクセルを採用
Divide	`.divide`	`input1.rgba / input2.rgba`
Dodge	`.dodge`	覆い焼き合成
Exclude	`.exclude`	除外合成
Freeze	`.freeze`	Freeze 合成
Glow	`.glow`	Glow 合成
Hard Light	`.hardlight`	ハードライト合成
Hard Mix	`.hardmix`	ハードミックス合成
Heat	`.heat`	Heat 合成
Hue	`.hue`	Hue ブレンドモード (色相のみ重ねる)
Inside	`.inside`	`input1.rgba * clamp(input2.a, 0, 1)`
Inside Luminance	`.insideluminance`	輝度を使った Inside 合成
Inverse	`.inverse`	Inverse 合成
Lighter Color	`.lightercolor`	より明るい色を採用
Luminance Difference	`.luminancedifference`	輝度差分合成
Maximum	`.maximum`	各チャンネルの最大値を採用
Minimum	`.minimum`	各チャンネルの最小値を採用
Multiply	`.multiply`	乗算合成
Negate	`.negate`	ネガティブ合成
Outside	`.outside`	`input1.rgba * (1.0 - input2.a)`
Outside Luminance	`.outsideluminance`	輝度を使った Outside 合成
Over	`.over`	`(input2.rgba * (1.0 - input1.a)) + input1.rgba`
Overlay	`.overlay`	オーバーレイ合成
Pinlight	`.pinlight`	ピンライト合成
Reflect	`.reflect`	Reflect 合成
Screen	`.screen`	`1.0 - ((1.0 - input1.rgba) * (1.0 - input2.rgba))`
Soft Light	`.softlight`	ソフトライト合成
Linear Light	`.linearlight`	リニアライト合成
Stencil Luminance	`.stencilluminance`	輝度ステンシル合成
Subtract	`.subtract`	`input1.rgba - input2.rgba`
Subtractive	`.subtractive`	Subtractive 合成
Under	`.under`	`(input1.rgba * (1.0 - input2.a)) + input2.rgba`
Vivid Light	`.vividlight`	ビビッドライト合成
Xor	`.xor`	`(input1.rgba * (1.0 - input2.a)) + (input2.rgba * (1.0 - input1.a))`
Y Film	`.yfilm`	Y Film 合成
Z Film	`.zfilm`	Z Film 合成

Swap Order `.swaporder` 🔁

オンにすると input1 と input2 の合成順序を入れ替えます (Over 等の非可換演算で結果が変わる):

Swap Order (swaporder): Input1 と Input2 の役割を反転

実践アイデア 💡

Example 1: 角丸カード背景 🔲

Rectangle TOP (Corner Radius 大) → Composite TOP → Text TOP

Rectangle TOP に Corner Radius を設定すると、角の丸いカード型の背景パネルが 1 枚で作れます。Composite TOP で上に Text TOP を重ねれば、HUD やダッシュボードのカード UI が完成します。

Rectangle TOP を作成し、Fill Color を任意のパネル色に設定
Corner Radius を 30〜60 px に設定して角を丸める
Background Alpha を 0 にして背景を透明化
Anti-Alias をオンにして角丸のエッジを滑らかに
後段に Composite TOP を置き、Text TOP をパネルの上に重ねる

Example 2: 枠線フレーム描画 🖼️

Movie File In TOP → Rectangle TOP (Comp Over Input) → 出力

Fill Alpha を 0、Border Width と Border Alpha を設定すると、塗りのない枠線だけの矩形になります。Comp Over Input をオンにして入力映像に重ねれば、フレーム枠やセーフエリアガイドを描画できます。

Rectangle TOP の input1 に Movie File In TOP を接続
Fill Alpha を 0 にして塗りを消す
Border Width を 8 px、Border Alpha を 1 に設定
Comp Over Input をオンにし、Operation を Over に
Size をセーフエリアに合わせて調整

Example 3: 矩形マスク ✂️

Rectangle TOP (Mono Alpha) → Composite TOP (Multiply) → Crop TOP

矩形を白塗り・背景透明で生成すると、特定領域だけを通す Alpha マスクになります。Composite TOP の Multiply で映像と掛け合わせれば、矩形範囲だけを残すマスク処理ができます。

Rectangle TOP を作成し、Fill Color を白 (1, 1, 1)、Fill Alpha を 1 に設定
Background Alpha を 0 にして矩形外を透明化
Softness をわずかに上げてマスク境界をぼかす (任意)
Crop TOP や Composite TOP の Multiply で映像に適用
Size / Center で切り抜き範囲を調整

Info CHOP情報 📊

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

Fill Alpha が 0 になっていないか確認
Background Alpha が 1 のままだと背景に隠れている場合があるため、必要に応じて 0 に
Size が極端に小さい (0 付近) になっていないか確認
Output Aspect を Resolution に固定し、上流からのアスペクト伝播事故を遮断

❌ Problem: 角丸が効かない / 直角のまま
✅ Solution:

Corner Radius が 0 になっていないか確認
Corner Radius Unit が Fraction のままで実効値が極小になっていないか確認、Pixels に切替えて試す
Anti-Alias をオンにして角丸のエッジを滑らかに
Size に対して半径が大きすぎるとスタジアム型 (両端半円) になるため、半径を Size の半分以下に調整

❌ Problem: ボーダーが表示されない
✅ Solution:

Border Width が 0 になっていないか確認
Border Alpha が 0 になっていないか確認
Border Width Unit が Fraction のままで実効値が極小になっていないか確認、Pixels に切替えて試す
Border Offset が極端な値だと縁からはみ出して切れている可能性があるため 0〜1 の範囲で調整

❌ Problem: 矩形が意図せず歪む / 比率が崩れる
✅ Solution:

Size X と Size Y の値が意図通りか確認
Size Unit を Fraction Aspect (0-1) に切替えるとアスペクト比が考慮される
Common Page の Output Aspect を Resolution に固定 (上流のアスペクト伝播事故を遮断)
Output Resolution を Custom Resolution + 目的の解像度に固定

❌ Problem: エッジがギザギザでアンチエイリアスが効かない
✅ Solution:

Anti-Alias がオンになっているか確認
Softness をわずかに上げて (0.001〜0.01) 輪郭を 1px 程度ぼかすとジャギーが目立たなくなる
Output Resolution を高めに設定し、後段で縮小するスーパサンプリング戦略を取る
Common Page の Input Smoothness を Interpolate Pixels に変更

参考資料 📚

その他 🔗

公式リソース 📖

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

まる。

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

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

↓日常垢
Instagram：＠malmal0v0

概要 📖 – 矩形や角丸を生成する

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

Rectangle Page ⚙️

Size .size 📏

Size Unit .sizeunit 📐

Rotate .rotate 🔄

Center .center 🎯

Center Unit .centerunit 📐

Justify Horizontal .justifyh ↔️

Justify Vertical .justifyv ↕️

Fill Color .fillcolor 🎨

Border Color .border 🖍️

Background Color .bgcolor 🟫

Multiply RGB by Alpha .multrgbbyalpha ✖️

Border Width .borderwidth 📐

Border Width Unit .borderwidthunit 📐

Border Offset .borderoffset 📏

Corner Radius .cornerradius ⬜

Corner Radius Unit .cornerradiusunit 📐

Anti-Alias .antialias ✨

Softness .softness 🌫️

Softness Unit .softnessunit 📐