optimize-threejs-games

Three.js ゲームを最適化する

動作を変更する前に計測し、最適化のたびに同じゲームプレイの流れを検証します。

再現可能なシーンを用意する

代表的な遭遇シーンを決定論的に選び、デバイス、ビューポート、品質レベル、プレイヤーの位置、敵、アクティブなエフェクト、フレーム時間のサンプル、ドローコール数、三角形数、テクスチャ数、警告を記録します。同じ条件で比較してください。

ボトルネックとなっている側を診断する

• アクター数の増加に伴ってシミュレーション、メモリ割り当て、React の処理、経路探索、フレームごとの走査が増える場合は、CPU が原因と考えられます。
• 解像度、オーバードロー、シャドウ、透明なパーティクル、ポストプロセッシング、ドローコール数、ジオメトリ、テクスチャの帯域幅が支配的な場合は、GPU が原因と考えられます。
• 最適化の前に調査してください。むやみに品質を下げないでください。

まずリスクの低い修正を適用する

ジオメトリやマテリアルを再利用し、一時的なエフェクトをプールし、非アクティブな処理や画面外の処理をカリングし、重要度の低い UI の更新を間引き、パーティクル数に上限を設け、フレームごとのメモリ割り当てを避け、変更されたトランスフォームだけを更新します。レンダリング品質の設定は明示的にし、元に戻せるようにしてください。戦闘の分かりやすさや操作性より先に、装飾的なエフェクトの品質を下げてください。

結果を確認する

元の遭遇シーンを再実行し、フレーム時間、表示の正確さ、衝突や接触の挙動、メモリの安定性、モバイル操作、動きを減らす設定、コンソールの状態を確認します。一時的なサーバー、ベンチマーク、ブラウザーのタブは、不要になったら閉じてください。