threejs-image-pipeline について
Three.js で複数のスクリーンスペース効果と共有バッファを調整するスキルです。パスの順序と責務を定め、単一効果の作業は対応する専用スキルへ振り分けます。
主な機能
- 01共有スクリーンスペースバッファの調整
- 02明示的なパス順序の定義
- 03HDR ブルームをトーンマッピング前に配置
- 04輝度ターゲットに基づく露出測定
- 05深度と法線を考慮した重みによるアップサンプリング
- 06パストグルと効果単独表示の用意
活用シーン
- 01複数のスクリーンスペース効果の合成
- 02本番用レンダリングパスグラフの計画
- 03深度・法線バッファ契約の調整
- 04個別表示とトグルを使った効果の調整
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/threejs-image-pipelineを入力して読み込まれたか確認します。
同梱ファイルagents/openai.yamlreferences/production-image-pipeline.md
詳細
画像パイプライン
複数の画像空間システムを組み合わせる場合や、共有バッファーを定義する場合にのみ、このスキルを使用してください。単一のエフェクトには、対応するアトミックスキルを読み込んでください。
読み込むスキル：
- GTAO、ベント法線、デノイズ、または AO の適用には
$threejs-screen-space-ambient-occlusion； - HDR 抽出とブルームには
$threejs-bloom； - 測光、適応、トーンマッピング、LUT、出力変換には
$threejs-exposure-color-grading。
パイプラインでは、信号と処理順序を明示する必要があります。エフェクトを大量に追加し、最終フレームを見ながら手探りで調整してはいけません。
信号の順序
scene HDR color + depth + normals + albedo where required
→ lighting-related screen effects
→ atmosphere/transparency composition
→ bloom
→ exposure
→ tone mapping
→ grading
→ lens/presentation effects
→ output conversion
本番用の 4 つのパスグラフ、それらのバッファーと解像度の契約、シーン全体のグラフとエフェクト内のグラフの所有境界については、references/production-image-pipeline.md を参照してください。
ルール
- トーンマッピングは 1 回だけ行ってください。
- HDR ブルームはトーンマッピングの前に適用してください。
- 最終的な 8 ビット画面ではなく、小さな輝度ターゲットから露出を測定してください。
- 可能であれば、ベント法線のアンビエントティントを適用する前に、直接光と間接光を分離してください。
- 低解像度のエフェクトをアップサンプリングする際は、深度と法線を考慮した重みを使用してください。
- 調整を始める前に、パスの切り替えとエフェクトのみの表示を用意してください。
- UI を同じターゲットに描画する場合は、明示的な保護策が必要です。
- デフォルトですべてのアトミックなポストプロセッシングスキルを読み込まないでください。実際に要求されたエフェクトのみを選択してください。
振り分けの境界
複数の画像空間システムでバッファー、処理順序、または出力の所有権を共有する必要がある場合に、このスキルを使用してください。単独のエフェクトには、この調整役を読み込まず、対応するアトミックスキルを使用してください。
コメント
Markdown 対応