Skip to content
three-flatland three-flatland

Batch Rendering

Automatic Batching

SpriteGroup automatically batches sprites that share the same material, minimizing draw calls:

const spriteGroup = new SpriteGroup();
scene.add(spriteGroup);


// All sprites with the same material are batched together
for (let i = 0; i < 1000; i++) {
  const sprite = new Sprite2D({ material: sharedMaterial });
  sprite.position.set(x, y, 0);
  spriteGroup.add(sprite);
}

Layers and Sorting

Use layers and zIndex for proper depth sorting:

import { Layers } from 'three-flatland';


sprite.layer = Layers.ENTITIES;
sprite.zIndex = -Math.floor(sprite.position.y); // Y-sort

Stats

Monitor batching performance with the stats object:

const { spriteCount, batchCount, drawCalls } = spriteGroup.stats;
console.log(`Sprites: ${spriteCount}, Batches: ${batchCount}, Draw Calls: ${drawCalls}`);

Next Steps