Inside PixiJS: Batch Rendering System

What makes it so performant?

Batch rendering is what makes PixiJS the fastest WebGL drawing engine. It works by drawing groups of objects using their merged geometry. This technique reduces the number of draw calls and uploads to the GPU. There are a few limitations that come with batch rendering:

• Batched objects must have similar geometries, the same shaders, and the same number of textures.
• To maintain the order in which objects are being rendered, batched objects must be flushed prematurely if a dissimilar object is encountered.
• Geometries must be merged into one large buffer.

This article is aimed at two key audiences: people interested in the internals of PixiJS & people interested in extending batch rendering to their own display-objects. Here, I cover the object renderer, batch renderer, its plugin factory, and the batch system.

You’re reading a chapter of “Inside PixiJS: WebGL Renderer”.

ObjectRenderer

Batch rendering necessitates the separation of the display-objects being rendered and their render method. This is because the display-object doesn’t know anything about existing batched display-objects.