threejs-aaa-graphics-builder について
Three.js ゲームの基本的な画面を、制作意図と性能を考慮したシーンへ改善する Skill です。アートディレクション、アセット調達、レンダリング、反復的な評価を支援します。
主な機能
- 01スクリーンショットによる画面評価
- 02アートディレクションと描画基盤の設計
- 03プロシージャル・生成アセットの調達
- 04マテリアル、ライティング、描画の調整
- 05ゲーム状態に連動するエフェクト
- 06性能診断とレポート作成
活用シーン
- 01既存ゲームの画質改善
- 02プレイ可能な代表シーンの制作
- 03ゲーム状態に連動するエフェクトの追加
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ majidmanzarpour/ threejs-game-skills --skill threejs-aaa-graphics-builderインストール後、Claude Code で/threejs-aaa-graphics-builderを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
agents/openai.yamlreferences/authoring-recipes.mdshader-cookbook.mdtechnical-art.mdvisual-scorecard.md詳細
Three.js AAA グラフィックスビルダー
プロダクション品質のグラフィックスパスを担当します。基本的なスクリーンショットを、作り込まれた高密度でパフォーマンスを考慮したビジュアルへと仕上げます。
リファレンス
| ファイル | 読むタイミング |
|---|---|
references/visual-scorecard.md | ビジュアルを採点するとき、またはプレミアム/AAA/ショーケース品質を主張するとき |
references/authoring-recipes.md | ヒーロー、障害物、報酬、ワールドキット、プロップモデルの構築時や、ライティング、トーンマッピング、シャドウ、フォグ、ポストプロセス、グラフィックスアーキテクチャを変更するとき |
references/technical-art.md | レンダリング予算、マテリアルキット、VFX システム、インスタンシング/LOD、インポートしたアセットのクリーンアップ、ブラウザーのパフォーマンスに影響する可能性がある作業 |
references/shader-cookbook.md | カスタムシェーダー、onBeforeCompile、空、ポストプロセスを扱うとき。レシピは検証済みの出発点として使用し、プロジェクトの Three.js バージョンに照らして確認してください |
「まだ基本的な見た目」の状態を広く改善する場合や、プレミアム品質に仕上げる場合は、実装前に4つすべてを読んでください。範囲を絞ったグラフィックスの編集では、関連するリファレンスと確認項目だけを読み込みます。指定されたスタイルと範囲は、レシピのデフォルトより優先されます。
基本ルール
グローを加えても、プリミティブが AAA 品質に見えるわけではありません。まず作り込んだ形状を作り、次にマテリアル、ライティング、エフェクトの順に仕上げます。
ワークフロー
- プレイ可能なシーンがある場合、対象のビューポートでプレイ中のスクリーンショットを撮影するか、確認します。
- 既存のゲームでは、対象のビューを採点し、最も弱い表面を特定します。新規ゲームでは、まずアートディレクション、カメラのスケール、マテリアルの役割、ヒーローの目標を定めます。変更前のスクリーンショットを捏造してはいけません。
- ゲームに不足しているグラフィックスアーキテクチャを追加します。マテリアルライブラリ、プロシージャルテクスチャとデカール、モデルファクトリー、ワールドプロップキット、VFX システム、レンダリングパイプライン、診断機能が含まれます。
- 価値の高い各表面に適した素材を選びます。プロシージャルな Three.js、
threejs-image-generatorのリファレンスまたはテクスチャ、threejs-3d-generatorのモデル、あるいは画像から3Dへのハイブリッドチェーンを使用します。外部生成が対象となる場合は、認証情報の確認を実行します。後続の生成やリギングに進む前に、コンセプト/モデルを確認します。コンテンツキットを拡張する前に、実際のアセットとフィードバックを使って、代表的なプレイ可能シーンを1つ完成させます。 - ヒーローだけでなく、弱い見た目の表面をすべて改善します。ハザード、報酬、地面とトラック、手前のプロップ、背景レイヤー、テレグラフ、マテリアルの変化、状態を表す VFX が対象です。
- 作り込んだ形状ができてから、ライティング、トーンマッピング、レンダリングの仕上げを追加します。
- ゲームプレイの状態に連動するイベント駆動型 VFX を追加します。
- 基準となるアンカーと照らして再採点し、インスペクターが測定した指標を示します。プレミアムのすべてのカテゴリが少なくとも2になるまで作業を続けるか、具体的な阻害要因を明記します。
アセットの調達
外部生成が対象となる場合は、まず threejs-game-director/scripts/probe_asset_credentials.sh を実行します。明示的なプロシージャルアートでは確認は不要です。キーが設定されている場合は、ユーザーがアートをプロシージャルのみに制限しているか、外部サービスを禁止していない限り、ヒーローとなる表面(プレイヤー、キャラクター、クリーチャー、ボス、乗り物、船、建物、武器、特徴的なプロップ、ヒーロー環境パーツ)と、価値の高い2Dアセット(空、背景、テクスチャおよびトリムのリファレンス、デカール、陣営マーク、アイコン、GUI、タイトルアート、画像から3Dへの入力素材)を生成します。繰り返し使うプロップ、キット、衝突プロキシ、VFX ジオメトリ、インスタンス化するボリュームには、プロシージャルな Three.js を使用します。失敗への対処にはディレクターの references/asset-recovery.md を使用します。タイムアウトが1回起きただけでは、生成が利用できない証拠にはなりません。
アニメーションアセットでは、シルエットだけでなく動きも確認します。実際のゲームプレイでの移動、ブレンド遷移、足の接地、ヒットのタイミング、セカンダリモーションを確認してください。十分な作業を終えた後、独立した観点から集中的に批評することで、欠陥を特定できる場合があります。最終スコアと統合の責任は、引き続きリードが負います。
レポート
変更前後のスコアを、各カテゴリにつき根拠を示す1行で報告します。改善した表面、変更したファイル、スクリーンショット、予算表と照らしたレンダラーの診断結果、生成したアセットのパスとタスク ID、残っている弱点を記載します。生成した3Dを使用した場合は、インポートしたアセットの診断結果(スケール、境界、衝突プロキシ、クリップ)も含めます。