概要 📖 – 矩形の点群を生成する
Rectangle POPは、指定したサイズと向きで矩形の点群を生成し、線・面・三角形などの接続形状で出力する POPです。Connectivity で出力プリミティブの種類 (点・線・三角形・四辺形) を選択でき、Orientation で配置する平面 (XY / YZ / ZX) やカメラ正対を切り替えられます。Round Corners をオンにすると角丸の矩形を作ることもでき、Anchor / Translate / Rotate / Scale で配置を細かく制御できます。
主な用途 🎯
- 平面的な矩形ポイントジオメトリの生成
- UI 背景パネルや板ポリゴンの土台作り
- 角丸の矩形シェイプの生成 (Round Corners)
- カメラに正対する板 (ビルボード) の生成
- GLSL POP / Texture Map POP 検証用のテスト平面準備
データフロー 🔄
入力: (任意の bounds 用 POP)
↓
Rectangle POP（Size と Orientation で矩形を配置、Connectivity で接続形状を決定）
↓
出力: 矩形の点群＋指定プリミティブを持つ POP
初心者の方は、以下日本語書籍も手元にあると安心です。
実際の案件事例まで踏み込んで紹介されていて、効率よくスキルアップするなら必携の二冊です！
パラメータ解説 ⚙️
Rectangle Page 📋
Connectivity .surftype 🔗
矩形の点をどのプリミティブで接続するかを決めるメニュー
| 項目 | 内部名 | 説明 |
|---|---|---|
| None | .none |
接続を行わず、点のみを出力 (プリミティブなし) |
| Point Primitives | .point |
各点を独立した Point プリミティブとして出力 |
| Lines | .lines |
隣接する 2 点ごとに独立した Line プリミティブを出力 |
| Line Strips | .linestrips |
連続したラインストリップとして接続出力 (輪郭をひと続きの線に) |
| Triangles | .triangles |
矩形を 2 つの三角形に分割して出力 |
| Quadrilaterals | .quads |
矩形を 4 頂点の四辺形プリミティブとして出力 |
入力 bounds 📐
Modify Bounds .modifybounds 🧭
– Modify Bounds (バウンディング上書き) — 入力 POP が接続されている場合にのみ有効
– オン時は入力 POP のバウンディングボックスを基準にして、下記の Size / Translate / Rotate / Scale 等で更に矩形の形状を変形させる
Orientation .orient 🧭
矩形をどの平面に向けて配置するかを決めるメニュー
| 項目 | 内部名 | 説明 |
|---|---|---|
| XY plane | .xy |
XY 平面に沿って矩形を配置 (正面向きの板) |
| YZ plane | .yz |
YZ 平面に沿って矩形を配置 (側面向きの板) |
| ZX plane | .zx |
ZX 平面に沿って矩形を配置 (床・天井向きの板) |
| Fill Camera View | .cam |
指定カメラに正対し、ビューを埋めるように矩形を配置 (ビルボード) |
カメラ設定 🎥
Camera .camera 📷
– Camera (カメラ指定) — Fill Camera View 時に正対させる対象のカメラコンポーネントを指定
Dist from Camera .distfromcam 📏
– Dist from Camera (カメラからの距離) — カメラに正対させたときの、カメラから矩形までの距離を設定
Camera Aspect .cameraaspect 🖼️
– Camera Aspect (投影アスペクト比) — 投影に用いるアスペクト比
– 内部名 cameraaspectx / cameraaspecty の 2 成分で指定
サイズと角丸 📦
Size .size 📏
– Size (3D サイズ) — 生成する矩形の大きさ
– 内部名 sizex / sizey の 2 成分で幅・高さを指定
Round Corners .roundcorners 🔘
– Round Corners (角丸の有効化) — 矩形の四隅を丸める機能を有効化するトグル
Corner Radius .cornerradius ⭕
– Corner Radius (角丸の半径) — 角丸矩形における四隅の丸みの半径を設定
Corner Sides .cornersides 🔢
– Corner Sides (角丸の分割数) — 丸めた角を構成する辺の数を設定 (値が大きいほど滑らかな曲線)
アンカー位置 📍
Anchor U .anchoru ↔️
– Anchor U (U 方向アンカー) — 左端・中央・右端のいずれを原点 0 に揃えるかを指定
– 矩形を原点基準で配置する際の整列基準として使用
Anchor V .anchorv ↕️
– Anchor V (V 方向アンカー) — 下端・中央・上端のいずれを原点 0 に揃えるかを指定
トランスフォーム 🧮
Translate .t ➡️
– Translate (平行移動) — 生成された点群を XYZ 軸方向に平行移動
– 内部名 tx / ty / tz の 3 成分
Rotate .r 🔄
– Rotate (回転) — 各点を XYZ 軸まわりに回転 (角度は度数法)
– 内部名 rx / ry / rz の 3 成分
Uniform Scale .scale 🔍
– Uniform Scale (一様スケール) — 全軸に均等に作用するスケール係数
– 1.0 が等倍、0.5 で半分、2.0 で 2 倍
出力属性の制御 🎨
Normal .normal 🧭
– Normal (法線属性) — 法線属性を生成するかと、生成する場合の属性クラスを選択
– None を選ぶと法線属性は生成されない
Texture Coordinates .texture 🗺️
– Texture Coordinates (UV 座標属性) — UV テクスチャ座標を生成するかと、生成する場合の属性クラスを選択
– None を選ぶと UV 属性は生成されない
Texture Fit .texturefit 🖼️
テクスチャ座標を矩形に対してどう合わせるかを決めるメニュー
| 項目 | 内部名 | 説明 |
|---|---|---|
| Fill | .fill |
矩形いっぱいに UV を引き伸ばして敷き詰める (アスペクト比は無視) |
| Fit Best | .best |
アスペクト比を保ったまま矩形内に収まる範囲で UV を最大化 |
| Fit Outside | .outside |
アスペクト比を保ったまま矩形を覆い尽くすように UV を拡大 (はみ出し分はトリミング) |
Common Page 🔧
Bypass .bypass 🚫
POP の処理をスキップして入力をパススルーする設定:
- オン: 最初の入力 (input1) をそのまま出力にパススルー、POP 内部の処理を無効化
- 用途: デバッグ時に特定 POP の効果を一時的に外して比較する際に使用
Free Extra GPU Memory .freeextragpumem 🧠
蓄積した GPU メモリの解放:
- Free Extra GPU Memory パルス: 出力ポイント数が増減を繰り返した際に確保されたままの GPU メモリを明示的に解放するパルスパラメータ
- 用途: 出力サイズが大きく変動した後、未使用メモリを返却して VRAM を節約
Delete Input Attributes .delinputattrs 🗑️
出力属性の絞り込みパターン:
- Delete Input Attributes パターン: 出力に残したい属性名のパターン (例:
P N uv) を指定。指定外の属性は破棄される - 用途: 下流で不要な属性を切り落として分岐ブランチを軽量化、メモリ・帯域を節約
実践アイデア 💡
Example 1: UI 背景パネルの生成 🟦
Rectangle POP (Connectivity=Triangles) → Texture Map POP → Render TOP
Rectangle POP の Connectivity を Triangles に設定して塗りつぶせる矩形メッシュを作り、Texture Map POP でテクスチャを貼って UI パネルや背景ボードとして使う基本フロー。Size で縦横比を、Anchor U/V で原点位置を整えれば、画面レイアウトに合わせた板を素早く用意できる。
- Rectangle POP の
Connectivityを Triangles に設定して面を作る Sizeでパネルの幅・高さを指定Texture Coordinatesを生成し、Texture Fitで UV の合わせ方を選択Anchor U/Anchor Vで原点基準の整列位置を調整- Texture Map POP でテクスチャを貼り、Render TOP に出力
Example 2: カメラ正対ビルボード 🎥
Rectangle POP (Orientation=Fill Camera View) → Render TOP
Orientation を Fill Camera View に設定し、Camera で対象カメラを指定すると、常にカメラへ正対する板 (ビルボード) を生成できる。Dist from Camera でカメラからの距離を、Camera Aspect で投影アスペクト比を整えれば、ビュー全面を覆う背景板や、視点に追従するラベル板として使える。
- Rectangle POP の
Orientationを Fill Camera View に設定 Cameraに正対させたいカメラコンポーネントを指定Dist from Cameraでカメラから板までの距離を設定Camera Aspectで投影アスペクト比を調整しビューに合わせる- 後段で描画して視点に追従するビルボードとして確認
Example 3: 角丸シェイプの作成 🔘
Rectangle POP (Round Corners=On) → Transform POP → Render TOP
Round Corners をオンにすると四隅が丸い矩形を生成できる。Corner Radius で丸みの大きさ、Corner Sides で曲線の滑らかさを調整すれば、角丸ボタンやカード型の UI シェイプが作れる。後段の Transform POP で複数配置すれば、まとまったカードレイアウトの土台になる。
- Rectangle POP の
Round Cornersをオンにする Corner Radiusで四隅の丸みの半径を設定Corner Sidesを増やして角の曲線を滑らかにConnectivityを Triangles にして塗りつぶせる面にする- Transform POP で配置を整え Render TOP に出力
関連オペレータ 🔗
類似機能OP 🔍
- Circle POP — 円・楕円形状のポイントジオメトリを生成 (矩形に対する円形版)
- Grid POP — 行・列・スライス数で規則的な格子点群を生成 (矩形を細分した版)
- Plane POP — 平面 1 枚を生成 (角丸やカメラ正対のない単一面)
- Box POP — 立方体形状のポイントジオメトリを生成 (矩形の立体版)
- Line POP — 1 次元のライン点列を生成 (矩形の輪郭ではなく単一線)
組み合わせ推奨OP 🔄
- Transform POP — 生成した矩形を後段で平行移動・回転・スケールするための定番後処理
- Math POP —
P等の属性を算術変換して矩形を歪ませる・正規化する - Noise POP — 矩形の点に Perlin / Simplex 等のノイズで変位を加える
- Attribute POP — Color / カスタム属性を点ごとに付与してから後段に渡す
- Convert POP — プリミティブタイプを別形式に変換 (例: Triangles → Quads)
- Copy POP — 矩形の各点をテンプレートにして別ジオメトリをインスタンス配置
前処理・後処理POP 🎯
Info POP情報 📊
Rectangle POP は Info CHOP / Info DAT による詳細情報取得に対応しています。
POP固有情報 ✨
num_verts: POP に含まれる頂点 (vertex) 数num_points: POP に含まれるポイント数num_prims: POP に含まれるプリミティブ数
汎用オペレータ情報 🔄
total_cooks: プロセス開始からのクック回数cook_time: 最後のクック時間 (ミリ秒)cook_frame: 最後にクックされたフレーム番号cook_abs_frame: 最後にクックされた絶対フレーム番号 (アプリケーション起動からの累積)cook_start_time: 最後のクック開始時刻 (ミリ秒)cook_end_time: 最後のクック終了時刻 (ミリ秒)cooked_this_frame: 現フレームでクックされたか (0 / 1)warnings: 警告数errors: エラー数
出力ポイント・属性情報 🧬
num_points: 生成された出力ポイント数 (Connectivity と Round Corners の設定に依存)num_point_attribs: 出力 POP の point 属性数 (Normal / Texture Coordinates の有無で増減)num_vertex_attribs: 出力 POP の vertex 属性数num_prim_attribs: 出力 POP の primitive 属性数num_prims: 生成プリミティブ数 (Connectivity の選択により決定)
トラブルシューティング ⚠️
よくある問題と解決策 🔧
❌ Problem: 面が出ず点や線しか出てこない
✅ Solution:
Connectivityが None や Lines になっていないか確認 (塗りつぶせる面が必要なら Triangles または Quadrilaterals を選択)- 下流の Render TOP がプリミティブを描画する設定 (Surface 等) になっているか確認
- 前段に Convert POP を入れてプリミティブタイプを揃える
❌ Problem: 角丸にならない / 角が丸まらない
✅ Solution:
Round Cornersがオンになっているか確認Corner Radiusが 0 のままだと丸みが付かないため、適切な半径値を設定Corner Sidesが小さすぎると角がカクついて見えるため、値を増やして曲線を滑らかに
❌ Problem: カメラに正対しない / 板がカメラを向かない
✅ Solution:
Orientationが Fill Camera View に設定されているか確認Cameraに正対させたいカメラコンポーネントが正しく指定されているか確認Dist from Cameraが 0 等の極端な値で板が見えなくなっていないか確認
❌ Problem: VRAM 使用量が増えてパフォーマンスが落ちる
✅ Solution:
Corner Sidesを上げすぎて点数が増えていないか確認 (角丸の分割数は必要最小限に)- Common Page の
Delete Input Attributesで下流に不要な属性を残さず、必要なものだけ通す - Common Page の Free Extra GPU Memory パルスで未使用 VRAM を返却
参考資料 📚
その他 🔗
- TouchDesigner Wiki — POP 概要
- TouchDesigner Wiki — Category:POPs
- TouchDesigner Wiki ホーム
- TouchDesigner 公式 Forum
- Facebook — TouchDesigner Help Group
公式リソース 📖
- TouchDesigner公式ドキュメント – Rectangle POP
- Attribute – TouchDesigner 属性概念ページ
- Transform POP – 矩形後段で移動・回転・スケールに使用
- Texture Map POP – 矩形にテクスチャ座標を割り当てる関連 POP
