fix(webgpu): correct sprite index buffer size and avoid mid-pass growth

Three related bugs in WebGpuSpriteRenderer that surface together when
the sprite count exceeds initialBatchCapacity (32):

1. Index buffer was allocated with
     size: indexData.byteLength * Uint32Array.BYTES_PER_ELEMENT
   indexData.byteLength is already bytes, so the buffer ended up 4x
   larger than intended. Benign alone, but wastes memory.

2. _ensureBatchCapacity was called inside the draw loop, after
   setVertexBuffer and setIndexBuffer were already recorded on the
   render pass. When a batch exceeds the current capacity, the method
   destroys the old GPU buffers and creates new ones — the pass then
   holds bindings to destroyed buffers, producing
     - "Index range (first: 0, count: N) does not fit in index buffer
       size (3072)" (the initial 32-sprite buffer)
     - "[Buffer (unlabeled)] used in submit while destroyed"

3. Hotfix above: walk all batches up front, find the largest sprite
   count, and ensureBatchCapacity once before begin of the render
   pass. All subsequent setVertexBuffer/setIndexBuffer bindings stay
   valid throughout the pass.

The drawIndexed is the same as before — only the growth path moves.

Author: Exoridus

src/rendering/webgpu/WebGpuSpriteRenderer.ts

@@ -299,6 +299,24 @@ export class WebGpuSpriteRenderer extends AbstractWebGpuRenderer<Sprite> {
             return;
         }
 
+        // Grow vertex/index buffers up front for the largest batch in this
+        // flush. _ensureBatchCapacity destroys the old buffers and creates new
+        // ones when capacity grows, so it must not run after setVertexBuffer /
+        // setIndexBuffer — otherwise the pass's bindings point at destroyed
+        // buffers and the submit is invalid.
+        let maxBatchSpriteCount = 0;
+        for (let start = 0; start < this._drawCallCount;) {
+            const batchRange = this._getBatchRange(start);
+            const batchSpriteCount = batchRange.end - batchRange.start;
+            if (batchSpriteCount > maxBatchSpriteCount) {
+                maxBatchSpriteCount = batchSpriteCount;
+            }
+            start = batchRange.end;
+        }
+        if (maxBatchSpriteCount > 0) {
+            this._ensureBatchCapacity(maxBatchSpriteCount);
+        }
+
         const viewMatrix = renderManager.view.getTransform();
 
         this._projectionData.set([
@@ -338,7 +356,6 @@ export class WebGpuSpriteRenderer extends AbstractWebGpuRenderer<Sprite> {
                 const pipeline = this._getPipeline(batch.blendMode, renderManager.renderTargetFormat);
                 const spriteCount = batch.end - batch.start;
 
-                this._ensureBatchCapacity(spriteCount);
                 this._writeBatchVertexData(batch);
 
                 device.queue.writeBuffer(
@@ -388,7 +405,7 @@ export class WebGpuSpriteRenderer extends AbstractWebGpuRenderer<Sprite> {
         });
         const indexData = new Uint32Array(nextCapacity * spriteIndexCount);
         const indexBuffer = this._device.createBuffer({
-            size: indexData.byteLength * Uint32Array.BYTES_PER_ELEMENT,
+            size: indexData.byteLength,
             usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
         });