threejs-debugging

レンダリングの診断

プロジェクトにインストール済みのバージョンと既存のアーキテクチャを使用してください。この手順はユーザーのタスクを補足するものであり、無関係な変更や外部操作を許可するものではありません。

編集する前に、目に見える症状、コンソールエラー、失敗したリクエスト、インストール済みのバージョン、バックエンド、最小限の再現手順を記録してください。原因を絞り込むには、症状ツリーを参照してください。

キャンバスが空白の場合は、まずコンテナーと描画領域のサイズがゼロ以外であること、レンダーループが動作していること、レンダラーの作成に成功していること、カメラの投影とフレーミング、オブジェクトの可視性とレイヤー、変換値が有効かつ有限であることを確認してください。ライティングの問題とジオメトリの問題を見分けるには、対象のマテリアルのみをライティングの影響を受けない診断用マテリアルに置き換えてください。

アセットの読み込みに失敗する場合は、HTTP ステータス、レスポンスの内容、CORS、デコーダーのパス、ビルドのベースパスを調べてください。ステータスが 200 でも、HTML のフォールバックレスポンスは有効な GLB ではありません。色の問題については、テクスチャの分類からライティング、トーンマッピング、出力変換までの経路を追跡してください。

ちらつきがある場合は、同一平面上にあるジオメトリ、near/far の精度、透明度のソート、重複したレンダーループ、競合する変換の書き込み元を調べてください。ピッキングについては、キャンバスまたはビューを基準とした座標、行列、レイヤー、インスタンシング、シェーダーによる変形との不一致を確認してください。

証拠を保持しながら、一度に 1 つの機能ずつ、失敗するシーンを縮小してください。症状を見えなくするために、無関係な依存関係をアップグレードしたり、すべてのエラーチェックを無効にしたりしないでください。コンテキストまたはデバイスのロストが発生した場合は、レンダラーを無制限に再作成するループではなく、明確な復旧手段を提示してください。

修正後は、元々失敗していた操作を再度確認し、同じコードを共有する隣接状態も検証してください。変更した行だけでなく、原因と根拠を説明してください。

API リファレンス

正確なシグネチャやリビジョン固有の動作については、公式ドキュメントを参照してください。ドキュメントにアクセスできない場合は、インストール済みの型定義またはソースを調べ、残る不確実性を明記してください。