pixijs-core-concepts
This skill equips agents with deep knowledge of PixiJS v8's rendering pipeline and core architectural patterns. Learn how the library's renderer abstractions enable efficient 2D graphics across WebGL, WebGPU, and Canvas, plus best practices for scene graph management and performance optimization.
PixiJS v8 renders frames through a ticker-driven loop that calls renderer.render() each frame. The render pipeline processes the scene graph, batches draw calls, and executes RenderPipes—specialized systems handling geometry, textures, and shaders. Each frame, the renderer traverses display objects, updates transforms, and submits batched commands to the GPU or canvas backend.
AI-generated summary based on this skill's SKILL.md
Install
pixijs/pixijs-skills/pixijs-core-concepts
git clone https://github.com/pixijs/pixijs-skills
cp -r pixijs-skills/skills/pixijs-core-concepts ~/.claude/skills/pixijs-core-conceptsFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How does PixiJS render frames?
PixiJS v8 renders frames through a ticker-driven loop that calls renderer.render() each frame. The render pipeline processes the scene graph, batches draw calls, and executes RenderPipes—specialized systems handling geometry, textures, and shaders. Each frame, the renderer traverses display objects, updates transforms, and submits batched commands to the GPU or canvas backend.
What's the difference between PixiJS WebGL and WebGPU renderers?
PixiJS v8 offers WebGL and WebGPU renderers with different performance profiles. WebGL has broader browser support and mature optimization; WebGPU provides modern async compute and better multi-threaded performance on supporting browsers. The Canvas renderer offers fallback compatibility. Use autoDetectRenderer() to select the best backend automatically, or specify one explicitly based on your target environment.
How do PixiJS systems and pipes architecture work?
PixiJS v8's rendering architecture separates concerns into systems (managing state and resources) and RenderPipes (handling per-object rendering logic). Systems initialize and manage GPU resources; RenderPipes batch and execute draw calls for specific object types. This modular design lets you implement custom rendering by extending or replacing pipes without touching core renderer logic.
When should I use the PixiJS Canvas renderer?
PixiJS v8's Canvas renderer serves as a fallback for environments lacking WebGL/WebGPU support or for simple 2D scenes where GPU overhead isn't justified. Use it for legacy browser compatibility, server-side rendering contexts, or when debugging (Canvas rendering is easier to inspect). For production performance, prefer WebGL or WebGPU on capable platforms.
How do I set up PixiJS rendering in Web Workers or SSR?
PixiJS v8 supports non-browser environments via the DOMAdapter abstraction layer, which decouples rendering from DOM dependencies. For Web Workers, use OffscreenCanvas with WebGL/WebGPU renderers. For SSR, render to a texture or use headless GPU contexts. Initialize the renderer without a canvas target, then manually call renderer.render(stage) to generate output for serialization or transfer.
What's the PixiJS v8 rendering pipeline architecture?
PixiJS v8's rendering pipeline flows: ticker triggers frame → renderer.render(stage) called → scene graph traversed and transforms updated → RenderPipes batch draw calls by type → systems execute GPU commands → frame submitted. This architecture enables efficient batching, layer sorting, and custom rendering injection points while maintaining consistent frame timing.
SKILL.md
rendered from the published skill — quoted content, verbatim
Foundational model for how PixiJS v8 gets pixels on the screen: the renderer decides which GPU backend to use, the render loop drives per-frame work, and the environment layer adapts the library to browser, Web Worker, or SSR contexts. For the scene graph itself (Containers, transforms, destroy), see pixijs-scene-core-concepts.
Quick Start
console.log(app.renderer.name); // 'webgl' | 'webgpu' | 'canvas'
app.ticker.add((ticker) => {
sprite.rotation += 0.01 * ticker.deltaTime;
});
const tex = app.renderer.extract.texture({ target: app.stage });
app.renderer.render({ container: app.stage });
app.renderer is the WebGLRenderer, WebGPURenderer, or CanvasRenderer
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 3 files
skills/pixijs-core-concepts/SKILL.md
skills/pixijs-core-concepts/references/render-loop.md
skills/pixijs-core-concepts/references/renderers.md