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

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

Phaser POP の段階的位相補間機能を示す図

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

概要 📖 – 位相で段階的に変化

Phaser POPは、入力ジオメトリの位相属性を基準に、二つの状態の間をフラクション値で段階的に補間しスタッガーしたアニメーションを生成する POPです。各ポイントの位相に応じて補間タイミングをずらせるため、波が伝播するような段階的な動きやスムーズステップによる加減速付きの遷移を 1 ノードで作れます。

主な用途 🎯

  • 位相属性を基準にしたポイントごとの段階的アニメーション制御
  • 二つの状態の間をフラクション値で滑らかに補間するモーフ表現
  • スムーズステップ関数による加減速付きの自然な遷移
  • 位相のリバースによるスタッガー (ずらし) アニメーションの反転
  • 入力位相値の範囲リマップと出力属性へのキャスト変換

データフロー 🔄

入力: POP ジオメトリ(位相属性付き)

フラクションとエッジ設定に基づく段階的補間処理

出力: 同形状ジオメトリ(補間後の属性値)

Tips

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

まる。
まる。

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


パラメータ解説 ⚙️

Phaser Page 📋

位相スコープ .phaseattrscope 🎯

Phase Attribute Scope .phaseattrscope 🔍
Phase Attribute Scope (位相属性スコープ) — 補間タイミングの基準にする入力属性を指定します。各ポイントが持つこの値が、二状態間のどこまで進んだかを決めます。

フラクション .fract 🎚️

Fraction .fract 📈
Fraction (進行率) — 二つの状態の間をどこまで補間するかの割合を設定します。0 で開始状態、1 で完了状態となり、この値をアニメートすると段階的な遷移が生まれます。

パラメータサイズ .parsize 🔢

独立して設定可能なパラメータ値の成分数を指定

項目 内部名 説明
1 .1 1 成分 (スカラ値) で全コンポーネントに同じ値を適用
2 .2 2 成分 (例 UV 座標) を独立に制御
3 .3 3 成分 (XYZ / RGB 等) を独立に制御
4 .4 4 成分 (XYZW / RGBA 等) を独立に制御

エッジとリバース ⚙️

補間の分離エッジと進行方向を制御

Edge .edge 📐
Edge (分離エッジ) — 二つの状態の間の切り替わり境界を設定します。この値を境に、位相属性のどこで開始状態から完了状態へ移行するかが決まります。

Reverse Phase .reversephase 🔁
Reverse Phase (位相反転) — スタッガーした (ずらした) アニメーション補間の進行方向を反転します。波の伝播方向を逆向きにしたいときに使用します。

Smooth Step .smoothstep 🌊
Smooth Step (スムーズステップ) — オンにするとスムーズステップ関数で値をリマップし、補間の開始・終了に加減速が付いた滑らかな遷移になります。

キャスト .castto 🔀

出力属性の型を別の型にキャスト

項目 内部名 説明
Automatic .auto 入力型と演算結果から自動決定
Float .float 単精度浮動小数点 (float) に強制
Int .int 整数 (int) に強制

出力属性スコープ .outputattrscope 📤

補間結果を書き出す出力属性の指定

項目 内部名 説明
P .P ポイント位置 (3 成分 float)
N .N 法線ベクトル (3 成分 float)
Color .Color 色 (RGBA 4 成分)
Color.rgb .Color.rgb 色の RGB 3 成分のみ (アルファ除外)
Tex .Tex テクスチャ座標 (UV)
PointScale .PointScale ポイントスケール属性
LineWidth .LineWidth ラインの太さ属性

出力属性オーバーライド 🛡️

出力属性の型・コンポーネント数・デフォルト値・属性クラスを手動で上書き

Override Automatic Attribute .overrideautoattr 🔓
Override Automatic Attribute (自動属性上書き) — オンにすると、POP の入力とパラメータから自動決定される属性の種類を、以下の Attribute Type / Components で手動上書きできます。

Attribute Type .attrtype 🏷️
Attribute Type (属性型) — 出力属性のデータ型 (デフォルト float) を選択します。

  • float / double (単精度 / 倍精度浮動小数点)
  • int / uint (整数 / 符号なし整数)
  • Color / Color (double) (色、float / double 版)
  • Direction / Direction (double) (方向ベクトル、float / double 版)

Components .attrnumcomps 🧮
Components (コンポーネント数) — 新規カスタム属性のコンポーネント数 (1〜4) を指定します。

Default Value .attrdefaultval 🎁
Default Value (デフォルト値) — 補間で算出できないケースに使用される属性の初期値 (コンポーネントごとに最大 4 個指定可能)。

Attribute Class .attrclass 🧱
Attribute Class (属性クラス) — POP の処理対象を点属性・頂点属性・プリミティブ属性のどれにするかを (該当する場合に) 切替えます。

範囲リマップ 🎚️

位相属性値の範囲 [from Low, from High] を別の範囲 [to Low, to High] に線形写像

From Low .fromlow ⬇️
From Low (元範囲の下限) — リマップ前の位相属性値が取りうる最小値を指定します。

From High .fromhigh ⬆️
From High (元範囲の上限) — リマップ前の位相属性値が取りうる最大値を指定します。

To Low .tolow ⤵️
To Low (出力範囲の下限) — リマップ後の値域の最小値を指定します。

To High .tohigh ⤴️
To High (出力範囲の上限) — リマップ後の値域の最大値を指定します。


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 Cd) を指定。指定外の属性は破棄される
  • 用途: 下流で不要な属性を切り落として分岐ブランチを軽量化、メモリ・帯域を節約

実践アイデア 💡

Example 1: 波状に伝播する出現アニメ 🌊

Grid POP → Phaser POP (Phase Scope P.x + Fraction animated) → Render TOP

グリッド状ポイントの X 座標を位相基準にして Fraction を時間でアニメートし、左から右へ波が伝わるようにポイントが段階的に出現する構成。スタッガーした登場演出の基礎となるフローです。

  1. Grid POP で平面状のポイント群を生成
  2. Phaser POP の Phase Attribute Scope に位置 (P) の成分を指定し、各ポイントへ位相を割り当て
  3. Fraction を 0→1 で時間アニメートし、Edge で切り替わり境界を調整
  4. Smooth Step をオンにして登場の加減速を滑らかにする

Example 2: 二状態間の段階的モーフ 🎯

Noise POP → Phaser POP (Output Scope P + Fraction) → Render TOP

ノイズで生成した位相属性を基準に、ポイント位置 (P) を開始状態から完了状態へ Fraction の割合で補間する例。各ポイントの補間タイミングがずれることで、均一でない有機的なモーフ表現になります。

  1. Noise POP でポイントごとに異なる位相値を生成
  2. Phaser POP の Output Attribute Scope に P を指定し補間対象を位置にする
  3. Fraction を上げて開始状態から完了状態へ段階的に遷移させる

Example 3: 逆方向のスタッガー演出 🔁

Pattern POP → Phaser POP (Reverse Phase + Smooth Step) → Render TOP

Pattern POP で並べたポイントに対し Reverse Phase をオンにして補間の進行方向を反転し、通常とは逆向きに波がほどけていくスタッガーアニメーションを作る用途。退場演出やループ装飾に応用できます。

  1. Pattern POP で規則的なポイント配列を生成
  2. Phaser POP の Reverse Phase をオンにして補間方向を反転
  3. Smooth Step を併用して各ポイントの遷移を滑らかにする

関連オペレータ 🔗

類似機能OP 🔍

  • Blend POP — 複数入力の属性をブレンドして中間状態を生成
  • Math Mix POP — 重み付きで複数属性を混合
  • ReRange POP — 属性値の範囲リマップに特化
  • Math POP — 属性値に加算・乗算・関数変換を適用

組み合わせ推奨OP 🔄

  • Noise POP — ノイズで位相属性を生成してから Phaser POP に通す
  • Attribute POP — 位相用のカスタム属性を追加してから補間
  • Pattern POP — 規則的なポイント配列を作って段階補間の素材にする
  • Feedback POP — 前フレームの補間結果を蓄積して残像表現

前処理・後処理POP 🎯


Info情報 📊

Phaser POPは Info CHOP による詳細情報取得に対応しています。

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: エラー数

トラブルシューティング ⚠️

よくある問題と解決策 🔧

❌ Problem: 補間アニメーションが進まない
✅ Solution:

  • Fraction を時間でアニメートしているか確認 (固定値では遷移しません)
  • Phase Attribute Scope に各ポイントで異なる値を持つ属性を指定しているか確認
  • 上流に位相属性が無い場合は Noise POPAttribute POP で先に属性を生成

❌ Problem: 全ポイントが同時に動いてしまう
✅ Solution:

  • Phase Attribute Scope に位置 (P) など各ポイントで差がある属性を指定してずれを作る
  • From Low / From High で位相値の範囲を入力データに合わせて調整
  • Edge の値を変えて切り替わり境界の分布を調整

❌ Problem: 遷移がカクついて滑らかでない
✅ Solution:

  • Smooth Step をオンにして加減速付きのリマップを有効化
  • From / To の範囲が適切で出力値が急変していないか確認
  • 下流に Math POP を挟んで値域を整える

❌ Problem: 出力型がシェーダ側で扱いにくい
✅ Solution:

  • Cast to で Float / Int に明示的に変換
  • Override Automatic Attribute を有効化し Attribute Type を固定
  • Components でコンポーネント数を明示しシェーダ側の vec3 / vec4 と合わせる

参考資料 📚

その他 🔗

公式リソース 📖

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