WebGL 2.0 Sprite Batching: Single Draw Call Rendering for 10,000+ Dynamic Sprites

The Anatomy of the Draw Call Bottleneck

When an engine draws a sprite naively:

// 2,000 sprites = 2,000 driver draw calls!
for (const sprite of sprites) {
  gl.bindTexture(gl.TEXTURE_2D, sprite.texture);
  gl.uniformMatrix3fv(u_matrix, false, sprite.transform);
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}

Every invocation of gl.drawArrays() or gl.drawElements() forces the browser JavaScript engine to cross the DOM/C++ native boundary into the GPU graphics driver. The driver validates pipeline state, constructs GPU command ring buffer entries, and synchronizes memory caches.

Under hundreds of calls, the CPU main thread maxes out at 100% utilization while the GPU hardware idles at 5% capacity, waiting for instructions.

The Batching Solution: Interleaved Vertex Buffers

The core architectural principle of sprite batching is simple: pack thousands of sprite quads into a single shared Vertex Buffer Object (VBO) and dispatch them to the GPU with a single draw call.

To achieve optimal memory bandwidth, vertex attributes are interleaved into a single contiguous binary buffer. For each vertex of a sprite quad, we pack:

• position: $X, Y$ coordinates (2 $ imes$ 32-bit floats = 8 bytes)
• uv: Texture coordinates $U, V$ (2 $ imes$ 32-bit floats = 8 bytes)
• color: Tint and alpha packed into a single 32-bit unsigned integer (4 bytes)
• textureId: Active texture unit index (1 $ imes$ 32-bit float = 4 bytes)

Total vertex stride = 24 bytes. Four vertices per quad = 96 bytes per sprite. A batch of 2,000 sprites consumes less than 192 kilobytes of memory, streaming into the GPU in a single gl.bufferSubData() call.

export class WebGLSpriteBatcher {
  private gl: WebGL2RenderingContext;
  private readonly maxSprites = 2000;
  private readonly vertexStride = 24; // Bytes
  private vertexBuffer: Float32Array;
  private uintBuffer: Uint32Array;
  private vbo: WebGLBuffer;
  private vao: WebGLVertexArrayObject;
  private spriteCount = 0;

  constructor(gl: WebGL2RenderingContext) {
    this.gl = gl;
    const maxVertices = this.maxSprites * 4;

    // Allocate contiguous CPU memory buffer with dual views
    const buffer = new ArrayBuffer(maxVertices * this.vertexStride);
    this.vertexBuffer = new Float32Array(buffer);
    this.uintBuffer = new Uint32Array(buffer);

    this.vao = gl.createVertexArray()!;
    gl.bindVertexArray(this.vao);

    this.vbo = gl.createBuffer()!;
    gl.bindBuffer(gl.ARRAY_BUFFER, this.vbo);
    gl.bufferData(gl.ARRAY_BUFFER, buffer.byteLength, gl.DYNAMIC_DRAW);

    // Setup interleaved vertex attributes
    // 0: vec2 a_position (offset 0)
    gl.enableVertexAttribArray(0);
    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, this.vertexStride, 0);

    // 1: vec2 a_uv (offset 8)
    gl.enableVertexAttribArray(1);
    gl.vertexAttribPointer(1, 2, gl.FLOAT, false, this.vertexStride, 8);

    // 2: vec4 a_color (offset 16, normalized unsigned bytes)
    gl.enableVertexAttribArray(2);
    gl.vertexAttribPointer(2, 4, gl.UNSIGNED_BYTE, true, this.vertexStride, 16);

    // 3: float a_textureId (offset 20)
    gl.enableVertexAttribArray(3);
    gl.vertexAttribPointer(3, 1, gl.FLOAT, false, this.vertexStride, 20);

    this.initStaticIndexBuffer();
    gl.bindVertexArray(null);
  }

  private initStaticIndexBuffer(): void {
    const gl = this.gl;
    const maxIndices = this.maxSprites * 6;
    const indices = new Uint16Array(maxIndices);

    // Pre-calculate invariant quad triangulation: 0,1,2, 0,2,3
    for (let i = 0, v = 0; i < maxIndices; i += 6, v += 4) {
      indices[i + 0] = v + 0;
      indices[i + 1] = v + 1;
      indices[i + 2] = v + 2;
      indices[i + 3] = v + 0;
      indices[i + 4] = v + 2;
      indices[i + 5] = v + 3;
    }

    const ibo = gl.createBuffer()!;
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
  }

  public flush(): void {
    if (this.spriteCount === 0) return;
    const gl = this.gl;

    gl.bindVertexArray(this.vao);
    gl.bindBuffer(gl.ARRAY_BUFFER, this.vbo);

    // Sub-upload active vertex data only
    const activeFloats = this.spriteCount * 4 * (this.vertexStride / 4);
    gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexBuffer.subarray(0, activeFloats));

    // SINGLE DRAW CALL FOR ENTIRE BATCH!
    gl.drawElements(gl.TRIANGLES, this.spriteCount * 6, gl.UNSIGNED_SHORT, 0);

    gl.bindVertexArray(null);
    this.spriteCount = 0;
  }
}

Multi-Texture Batching via Dynamic Texture Samplers

A classic limitation of early WebGL batchers was that every time a sprite used a different texture atlas, the batch had to flush and issue a draw call. If character sprites and UI elements alternated in draw order, draw counts quickly skyrocketed.

Multi-Texture Batching solves this by exploiting the GPU capability to bind multiple texture units simultaneously. Modern desktop and mobile GPUs support 16 to 32 active texture image units:

1. The batcher maintains an array of currently bound texture references: boundTextures[16].
2. When a sprite is drawn, the batcher checks if its texture atlas is already registered in an active texture slot.
3. If registered, its unit index (e.g. $3.0$) is written into the vertex a_textureId attribute.
4. The fragment shader receives an array of samplers (uniform sampler2D u_textures[16]) and samples the corresponding texture dynamically without flushing the batch.

Static Quad Triangulation: Pre-Baked Index Buffers

Every rectangular sprite quad consists of two triangles defined by 6 vertex indices. Because the topology of a quad never changes (vertices 0, 1, 2 form triangle 1; vertices 0, 2, 3 form triangle 2), the index buffer (gl.ELEMENT_ARRAY_BUFFER) is 100% static.

By generating and uploading a Uint16Array of 12,000 indices once at application initialization using gl.STATIC_DRAW, the CPU never recalculates triangulation indices during the active game loop, saving valuable CPU cycles.

Comparative Architectural Matrix: 2D WebGL Renderers

Comparing rendering throughput across sprite architectures:

Conclusion

Dynamic multi-texture sprite batching is the defining technical foundation of high-performance 2D web engines. By interleaving vertex attributes, pre-baking static index buffers, and binding multiple texture atlases simultaneously, graphics architects eliminate driver draw call overhead, delivering locked 60 FPS performance across massive interactive scenes on the open web.