pixijs-core-concepts

A foundational reference for how PixiJS v8 renders frames, covering the systems-and-pipes renderer, the render loop, and the environment layer that adapts the library to different contexts. It is the skill to reach for when reasoning about renderer selection across WebGLRenderer, WebGPURenderer, and CanvasRenderer, the renderer.render() pipeline, environment detection, and autoDetectRenderer, and it points to per-topic deep dives for anything more specific. For the scene graph itself, it defers to a companion scene-core-concepts skill.

The mental model is that app.renderer is whichever backend autoDetectRenderer chose, that each renderer is composed of Systems, which are lifecycle services such as textures, buffers, state, filters, and masks, and RenderPipes, which are per-renderable instruction builders for sprites, graphics, meshes, particles, text, and tiling, and that writing a custom renderable means implementing a RenderPipe and registering it via extensions. The render loop is driven by the TickerPlugin, which registers app.render() at update priority LOW so callbacks added at NORMAL or HIGH run before the draw; manual control is available with autoStart set to false. The environment layer uses a DOMAdapter to abstract DOM calls, swapped to a WebWorkerAdapter for Workers or a custom adapter for Node and SSR, and this must happen before Application.init.

Practical guidance includes a decision guide for choosing between WebGL and WebGPU using a webgpu then webgl preference array, integrating physics at a higher priority than the render, and running under strict CSP via the pixi.js unsafe-eval import. A Common Mistakes section flags high-impact errors such as accessing app.renderer before the async init resolves, setting DOMAdapter after init, and treating preference as a guarantee rather than branching on renderer.name. Reference files dive into choosing a backend and per-frame execution, and links to the official API docs round out the material.