Inside PixiJS: WebGL Renderer

Shukant Pal

Follow

6 min read

·

Jul 27, 2019

45

1

Listen

Share

What’s hidden in this gem?

Press enter or click to view image in full size

PixiJS has the concept of a “system-wide” renderer that fires every frame and makes the root display-object render itself. I cover these topics of the renderer here:

• Inheritance tree of renderers in PixiJS
• Systems architecture of the WebGL renderer
• Batching rendering

The WebGL renderer lives in the @pixi/core package as the Renderer class, which inherits from the AbstractRenderer class. Renderer was formerly named WebGLRenderer in PixiJS v4, but was renamed since the canvas-renderer was shipped only in the legacy bundle.

AbstractRenderer

This class is mainly holds generic properties that are common to both renderers. It can emit events (since it extends EventEmitter) and also provides a stub for a plugin system and also handles texture generation and canvas resizing.

initPlugins(staticMap)
{
  for (const o in staticMap)
  {
    this.plugins[o] = new (staticMap[o])(this);
  }
}

The plugin system can easily confuse a newcomer. These are just objects that provide specific functionality for a renderer and live in the plugins map. For example, app.renderer.plugins.extract refers an ExtractPlugin object.