threejs-testing について
threejs-testing は、Three.js プロジェクトの変更に取り組む人向けに、3D テストとビジュアル QA の指針を提供します。再現可能なブラウザ用フィクスチャを重視し、単体テストと GPU 描画の検証を区別します。
主な機能
- 01要求を観察可能なチェックに変換
- 02ビジュアルテストの乱数と表示領域を固定
- 03スクリーンショット、コンソール、通信エラーを記録
- 04ナビゲーション、操作、描画失敗を確認
- 05チェック結果を成功・失敗・未実施で報告
活用シーン
- 013D シーンの構図と対象表示を検証
- 02アセット読み込み失敗と再試行を確認
- 03リサイズと連続ナビゲーションをテスト
- 04実機での操作性を評価
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ cesartevisual/ threejs-skills --skill threejs-testingインストール後、Claude Code で/threejs-testingを入力して読み込まれたか確認します。
詳細
3D テストとビジュアル QA
プロジェクトにインストールされているバージョンと既存のアーキテクチャを使用してください。これらの指示はユーザーのタスクを補足するものであり、無関係な変更や外部アクションを許可するものではありません。
要求された動作を、観測可能なチェック項目に変換してください。対象が表示されること、フレーミングが正しいこと、操作の結果、読み込み失敗時の再試行、リサイズ、ティアダウン、明示されたパフォーマンス目標などを確認します。テスト範囲は変更内容に見合うものにしてください。
適切な場合は、純粋な座標変換、選択マッピング、タイムステップポリシー、リデューサーにユニットテストを使用してください。レンダラーをモックしても、ピクセルが正しくレンダリングされることは証明できません。GPU 統合には、プロダクションビルドとブラウザフィクスチャを実行してください。
ビジュアルフィクスチャは再現可能にしてください。乱数のシードを固定し、カメラ、ビューポート、ピクセル比を固定して、アニメーションを既知の時刻で停止またはシークし、アセットの準備完了とフレームのレンダリングを待ちます。任意の時間待機ではなく、セマンティックな準備完了シグナルを使用してください。スクリーンショットと併せて、コンソールとネットワークのエラーも記録してください。
GPU に依存するピクセルの比較には許容範囲を設け、異なるドライバー間での完全一致を移植可能な契約として扱わないでください。スクリーンショットを確認し、切り抜き、コントラスト、影の不具合、テキストやオーバーレイの重なり、読み込み中の残骸がないかを調べてください。ブラウザ機能への期待は、テスト対象のバックエンドに応じた範囲にしてください。
繰り返しのナビゲーション、アセットの急速な変更、非表示から表示へのサイズ変更、タッチ操作、モーションの低減、未対応のレンダリング、および関連する実機やブラウザをテストしてください。ヘッドレスのソフトウェアレンダリングは、モバイル GPU のベンチマークにはなりません。
各チェックについて、理由を添えて合格、失敗、または未実施として報告してください。コンパイルしただけで、パフォーマンス、XR ハードウェアのサポート、または支援技術での動作を確認したと主張しないでください。
API リファレンス
正確なシグネチャとリビジョン固有の動作については、公式ドキュメントを参照してください。ドキュメントにアクセスできない場合は、インストール済みの型定義やソースを調べ、残っている不確実性を明記してください。