postfx-router

ポストプロセスルーター

後処理の要件に応じて、3 つの特化スキルに振り分けます。

ルーティングプロトコル

1. 分類 — ユーザーのリクエストからエフェクトの種類を特定します
2. 照合 — 以下のシグナル照合ルールを適用します
3. 組み合わせ — 本番シーンの多くでは、2～3 個のスキルを組み合わせます
4. 読み込み — 実装前に、照合した SKILL.md ファイルを読みます

クイックルート

ティア 1：コア（ここから開始）

必要なもの	スキル	シグナル
パイプラインの設定、エフェクトの順序	postfx-composer	EffectComposer、設定、パイプライン、レンダーターゲット、カスタムパス、マルチパス
グロー、輝度エフェクト	postfx-bloom	ブルーム、グロー、ネオン、発光、輝度、UnrealBloom、選択的ブルーム
映画のような仕上げ、色	postfx-effects	ビネット、色収差、DOF、グレイン、カラーグレーディング、LUT、収差

シグナル照合

主なシグナル

postfx-composer（新規プロジェクトでは常にここから開始します）：

• 「ポストプロセスを設定」
• 「エフェクトパイプラインを構成」
• 「カスタムエフェクト／パスを作成」
• 「レンダーターゲット」、「エフェクトの順序」

postfx-bloom：

• 「ブルーム」、「グロー」、「輝度」、「ネオン」、「発光」
• 「選択的ブルーム」、「オブジェクトのグロー」、「UnrealBloomPass」

postfx-effects：

• 「色収差」、「ビネット」、「被写界深度」、「DOF」
• 「フィルムグレイン」、「ノイズ」、「カラーグレーディング」、「LUT」、「トーンマッピング」
• 「走査線」、「CRT」、「ゴッドレイ」

信頼度スコア

• 高（3 個以上のシグナル） — 該当するスキルに直接振り分けます
• 中（1～2 個のシグナル） — composer を基盤として振り分けます
• 低（0 個のシグナル） — 設定には postfx-composer から着手します

よくある組み合わせ

基本的なポストプロセスの設定（2 スキル）

postfx-composer → Pipeline architecture, effect ordering
postfx-bloom    → Basic glow effects

映画のようなシーン（3 スキル）

postfx-composer → Pipeline setup, tone mapping
postfx-bloom    → Subtle glow on lights
postfx-effects  → Vignette, grain, color grading

ネオン／サイバーパンクの美学（2 スキル）

postfx-bloom    → High-intensity selective bloom
postfx-effects  → Chromatic aberration, vignette

カスタムエフェクトの開発（1～2 スキル）

postfx-composer → Custom Effect class, shader writing
postfx-effects  → Reference existing effects

判断表

エフェクトの種類	複雑さ	主なスキル	補助スキル
グロー／ブルームのみ	シンプル	bloom	composer
映画のような見た目	中程度	effects	composer + bloom
カスタムエフェクト	複雑	composer	-
選択的ブルーム	中程度	bloom	composer
カラーグレーディング	シンプル	effects	composer
本番向けの全機能	複雑	3 つすべて	-

エフェクトのカテゴリ

ライティングエフェクト → postfx-bloom

• ブルーム／グロー、選択的ブルーム、発光の強調、HDR 輝度

カメラエフェクト → postfx-effects

• 色収差、ビネット、被写界深度、レンズ歪み

カラーエフェクト → postfx-effects

• トーンマッピング、カラーグレーディング、LUT、色相／彩度

テクスチャエフェクト → postfx-effects

• フィルムグレイン、ノイズ、走査線、CRT

アーキテクチャ → postfx-composer

• EffectComposer の設定、エフェクトの順序、カスタムエフェクト、レンダーターゲット

他のドメインとの連携

R3F（r3f-*）との連携

r3f-fundamentals → Scene setup
postfx-composer  → Effect pipeline
postfx-bloom     → Object glow

シェーダー（shaders-*）との連携

shaders-glsl     → Custom effect shader code
postfx-composer  → Wrap in Effect class

パーティクル（particles-*）との連携

particles-systems → Particle emitters
postfx-bloom      → Particle glow
postfx-effects    → Atmosphere

オーディオ（audio-*）との連携

audio-analysis    → Frequency data
postfx-bloom      → Audio-reactive bloom
postfx-effects    → Audio-reactive aberration

クイックリファレンス

エフェクト	スキル
ブルーム	postfx-bloom
選択的ブルーム	postfx-bloom
ビネット	postfx-effects
色収差	postfx-effects
被写界深度	postfx-effects
フィルムグレイン／ノイズ	postfx-effects
カラーグレーディング	postfx-effects
LUT	postfx-effects
トーンマッピング	postfx-effects
カスタムエフェクト	postfx-composer
レンダーターゲット	postfx-composer

テンポラルコラプススタック

postfx-composer → HDR pipeline, tone mapping, adaptive quality
postfx-bloom    → Cosmic glow on digits, particles, UI
postfx-effects  → Vignette (void edge), subtle chromatic, grain

フォールバック動作

• フレームワークのコンテキストがない → @react-three/postprocessing を想定します
• エフェクトの種類が不明確 → postfx-composer + postfx-bloom から開始します
• パフォーマンス上の懸念がある → postfx-composer の最適化パターンを優先します