threejs-postprocessing について
three.js 開発者向けに、従来型の EffectComposer とポストプロセス用 Pass の使い方を案内するスキルです。Pass の連結、サイズ変更、性能上の注意点、公式ドキュメントへの参照を扱います。
主な機能
- 01RenderPass とエフェクト Pass の連結
- 02composer のサイズ変更への対応
- 03ポストプロセス Pass のドキュメント案内
- 04バッファーと Pass 順序の注意点
- 05アドオンと他の描画パイプラインの区別
活用シーン
- 01シーンへのブルームや環境遮蔽の追加
- 02ビューポート変更時の composer 調整
- 03ぼやけや低解像度のエフェクトの調査
- 04ShaderPass 用シェーダーモジュールの確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/threejs-postprocessingを入力して読み込まれたか確認します。
同梱ファイルagents/openai.yamlexamples/workflow-composer-bloom.md
詳細
このスキルを使用するタイミング
ユーザーが以下について言及した場合は、必ずこのスキルを使用してください。
EffectComposer、RenderPass、パスのスタック、composer のリサイズ- Bloom、SSAO、SSR、DOF、outline、glitch、film grain、TAA などのアドオンパス名
- Addons の Shaders グループのシェーダーモジュールを使った
ShaderPass
重要：ポストプロセッシングとレンダラー、node-tsl の使い分け
| パイプライン | スキル |
|---|---|
| 従来の composer ＋パス | threejs-postprocessing |
| レンダラーの出力色／トーンのみ | threejs-renderers |
| Node／TSL のポストノード | threejs-node-tsl |
トリガーとなる語句には、以下が含まれます。
- 「EffectComposer」、「RenderPass」、「UnrealBloomPass」、「SSAOPass」、「后期」
- 「泛光」、「环境光遮蔽」、「描边」
このスキルの使い方
- 連結：
RenderPass→ エフェクトパス → 出力の順に並べ、サイズがレンダラーと一致していること、および DPR の変更を反映していることを確認します。 - リサイズ：レンダラーのリサイズ処理と合わせて
composer.setSizeを呼び出します。 - Half-float：多くのパスでは適切なレンダーターゲットの型が必要です。使用するバージョンのドキュメントを参照してください。
- パフォーマンス：各パスには処理コストがあります。
renderer.infoによるプロファイリングは必要最小限にしてください。 - シェーダーモジュール：SKILL に巨大な GLSL をインラインで記述するのではなく、Addons の Shaders リストにリンクしてください。
- 出力：最終パスのカラー管理をレンダラーに合わせてください（threejs-renderers）。
- 違いの説明：名前の混同を避けるため、コアの
PostProcessingクラスについては別途言及してください。
examples/workflow-composer-bloom.md を参照してください。
ドキュメントマップ（公式）
| ドキュメントのセクション | 代表的なリンク |
|---|---|
| ポストプロセッシング | https://threejs.org/docs/EffectComposer.html |
| ポストプロセッシング | https://threejs.org/docs/RenderPass.html |
| ポストプロセッシング | https://threejs.org/docs/UnrealBloomPass.html |
| シェーダー（アドオンモジュール） | https://threejs.org/docs/module-CopyShader.html |
対象範囲
- 対象内： アドオンのポストプロセッシングパスと composer の接続、シェーダーモジュールへの案内。
- 対象外： three.js のドキュメントにないカスタムのフルスクリーンパイプライン設計、エンジンレベルのフレームグラフ。
よくある落とし穴とベストプラクティス
- composer のリサイズを忘れると、エフェクトがにじんだり低解像度になったりします。
- パスの順序は重要です。Bloom は通常、メインのシーンパスの後に配置します。outline ではマスクが必要になる場合があります。
- 深度が必要なパスもあります。各パスのドキュメントに従い、深度バッファを使用できることを確認してください。
ドキュメントとバージョン
アドオンのパスは three.js docs の Postprocessing と Shaders モジュールにあります。パスのコンストラクターや必要なバッファーはバージョンによって変わります。uniform 名を推測するのではなく、個別のパスのページ（例：UnrealBloomPass）にリンクしてください。
エージェントの回答チェックリスト
このスキルに基づいて回答する場合は、以下を優先してください。
EffectComposer、RenderPass、または名前が挙がったパス（SSAOPassなど）にリンクします。- ユーザーが用語を混同している場合は、アドオンの composer スタックと、コアの
PostProcessing＋ threejs-node-tsl の違いを説明します。 - threejs-renderers でリサイズする際は、composer に対して
setSizeを呼び出すよう案内します。 ShaderPassで使用する生のシェーダーモジュールについては、Shaders グループを案内します。- 負荷の高いパスを重ねる場合は、VR のフレーム時間について注意を促します（threejs-webxr）。
参考資料
- https://threejs.org/docs/#Postprocessing
- https://threejs.org/docs/EffectComposer.html
- https://threejs.org/docs/RenderPass.html
キーワード
英語： effectcomposer, renderpass, bloom, ssao, ssr, outline, postprocessing, three.js
中文： 后期、EffectComposer、泛光、SSAO、SSR、屏幕空间、three.js
コメント
Markdown 対応