Inside PixiJS: WebGL Renderer
What’s hidden in this gem?
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.