reduce-draw-calls について
描画呼び出しを計測・削減し、適切な場合にバッチ処理やハードウェアインスタンシングを使う方法を案内するグラフィックス最適化スキルです。ピクセル検証で描画結果が変わっていないか確認する手順も示します。
主な機能
- 01描画呼び出し数の計測
- 02非表示要素の無効化
- 03BatchManager によるジオメトリのグループ化
- 04ハードウェアインスタンシングの利用
- 05ピクセル検証による描画確認
活用シーン
- 01描画呼び出しのボトルネック診断
- 02静的または動的ジオメトリのバッチ化
- 03同一メッシュの複数コピーの描画
- 04最適化後の視覚出力の検証
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/reduce-draw-callsを入力して読み込まれたか確認します。
詳細
ドローコールを減らす
まず、app.stats.drawCallCount または MiniStats で測定してください。パスごとの内訳である app.stats.drawCalls
が表示されるのは、プロファイラービルドのみです。また、ピクセル比を半分にして app.resizeCanvas() を呼び出してください。
フレーム時間が短くなる場合、コストの原因はドローコールではなくフィルレートです。
予算を満たす最初の段階で止め、変更前後のカウントを報告してください。
1. 非表示のものは描画しない
不透明度が 0 の要素も描画されます。enabled = false に設定してください。
2. BatchManager
app.batcher.addGroup(name, dynamic, maxAabbSize) を呼び出してから、レンダー、スプライト、
または要素コンポーネントに batchGroupId を設定してください。移動しないジオメトリには dynamic: false を使用してください。
有効化されてライブツリーに入ると、メンバーは順序を問わずグループに加わり、メンバー構成が
変わるとグループは自動的に再生成されます。静的グループのメンバーを移動した後にのみ markGroupDirty(id) を呼び出してください。
手動で AppOptions をブートストラップする場合は、batchManager を設定する必要があります。
3. ハードウェアインスタンシング
1 つのメッシュとマテリアルを、フレームごとに変化するトランスフォームで多数複製する場合に使用してください。
VertexFormat.getDefaultInstancingFormat(device) でバッファーを作成し、インスタンスごとに 1 つの mat4 を格納して、
meshInstance.setInstancing(vb) を呼び出してください。instancingCount はバッファーに従います。
インスタンスごとのカリングはありません。デフォルトではグループ全体が常に描画されます。
setInstancing(vb, true) を呼び出すと、すべてのインスタンスを含む RenderComponent#customAabb に対して
グループ全体をカリングします。大きなインスタンスセットは、空間的なチャンクに分割してください。
カスタムの頂点チャンクでは、INSTANCING パス（override-shader-chunks）が必要です。
graphics/instancing-basic と graphics/instancing-custom の例を参考にしてください。
verify-pixels で画像に変更がないことを確認してください。