mcpField
T
threejs-aaa-graphics-builder

threejs-aaa-graphics-builder

github.com/majidmanzarpourクリエイティブ・メディア2.6k3.3k 回インストール4 週間前に更新
リポジトリ

threejs-aaa-graphics-builder について

Three.js ゲームの基本的な画面を、制作意図と性能を考慮したシーンへ改善する Skill です。アートディレクション、アセット調達、レンダリング、反復的な評価を支援します。

主な機能

  1. 01スクリーンショットによる画面評価
  2. 02アートディレクションと描画基盤の設計
  3. 03プロシージャル・生成アセットの調達
  4. 04マテリアル、ライティング、描画の調整
  5. 05ゲーム状態に連動するエフェクト
  6. 06性能診断とレポート作成

活用シーン

  1. 01既存ゲームの画質改善
  2. 02プレイ可能な代表シーンの制作
  3. 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.yaml
references/
authoring-recipes.md
shader-cookbook.md
technical-art.md
visual-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 品質に見えるわけではありません。まず作り込んだ形状を作り、次にマテリアル、ライティング、エフェクトの順に仕上げます。

ワークフロー

  1. プレイ可能なシーンがある場合、対象のビューポートでプレイ中のスクリーンショットを撮影するか、確認します。
  2. 既存のゲームでは、対象のビューを採点し、最も弱い表面を特定します。新規ゲームでは、まずアートディレクション、カメラのスケール、マテリアルの役割、ヒーローの目標を定めます。変更前のスクリーンショットを捏造してはいけません。
  3. ゲームに不足しているグラフィックスアーキテクチャを追加します。マテリアルライブラリ、プロシージャルテクスチャとデカール、モデルファクトリー、ワールドプロップキット、VFX システム、レンダリングパイプライン、診断機能が含まれます。
  4. 価値の高い各表面に適した素材を選びます。プロシージャルな Three.js、threejs-image-generator のリファレンスまたはテクスチャ、threejs-3d-generator のモデル、あるいは画像から3Dへのハイブリッドチェーンを使用します。外部生成が対象となる場合は、認証情報の確認を実行します。後続の生成やリギングに進む前に、コンセプト/モデルを確認します。コンテンツキットを拡張する前に、実際のアセットとフィードバックを使って、代表的なプレイ可能シーンを1つ完成させます。
  5. ヒーローだけでなく、弱い見た目の表面をすべて改善します。ハザード、報酬、地面とトラック、手前のプロップ、背景レイヤー、テレグラフ、マテリアルの変化、状態を表す VFX が対象です。
  6. 作り込んだ形状ができてから、ライティング、トーンマッピング、レンダリングの仕上げを追加します。
  7. ゲームプレイの状態に連動するイベント駆動型 VFX を追加します。
  8. 基準となるアンカーと照らして再採点し、インスペクターが測定した指標を示します。プレミアムのすべてのカテゴリが少なくとも2になるまで作業を続けるか、具体的な阻害要因を明記します。

アセットの調達

外部生成が対象となる場合は、まず threejs-game-director/scripts/probe_asset_credentials.sh を実行します。明示的なプロシージャルアートでは確認は不要です。キーが設定されている場合は、ユーザーがアートをプロシージャルのみに制限しているか、外部サービスを禁止していない限り、ヒーローとなる表面(プレイヤー、キャラクター、クリーチャー、ボス、乗り物、船、建物、武器、特徴的なプロップ、ヒーロー環境パーツ)と、価値の高い2Dアセット(空、背景、テクスチャおよびトリムのリファレンス、デカール、陣営マーク、アイコン、GUI、タイトルアート、画像から3Dへの入力素材)を生成します。繰り返し使うプロップ、キット、衝突プロキシ、VFX ジオメトリ、インスタンス化するボリュームには、プロシージャルな Three.js を使用します。失敗への対処にはディレクターの references/asset-recovery.md を使用します。タイムアウトが1回起きただけでは、生成が利用できない証拠にはなりません。

アニメーションアセットでは、シルエットだけでなく動きも確認します。実際のゲームプレイでの移動、ブレンド遷移、足の接地、ヒットのタイミング、セカンダリモーションを確認してください。十分な作業を終えた後、独立した観点から集中的に批評することで、欠陥を特定できる場合があります。最終スコアと統合の責任は、引き続きリードが負います。

レポート

変更前後のスコアを、各カテゴリにつき根拠を示す1行で報告します。改善した表面、変更したファイル、スクリーンショット、予算表と照らしたレンダラーの診断結果、生成したアセットのパスとタスク ID、残っている弱点を記載します。生成した3Dを使用した場合は、インポートしたアセットの診断結果(スケール、境界、衝突プロキシ、クリップ)も含めます。

コメント