{"enrichment":{"faq":[{"a":"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\u2014specialized 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.","q":"How does PixiJS render frames?"},{"a":"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.","q":"What's the difference between PixiJS WebGL and WebGPU renderers?"},{"a":"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.","q":"How do PixiJS systems and pipes architecture work?"},{"a":"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.","q":"When should I use the PixiJS Canvas renderer?"},{"a":"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.","q":"How do I set up PixiJS rendering in Web Workers or SSR?"},{"a":"PixiJS v8's rendering pipeline flows: ticker triggers frame \u2192 renderer.render(stage) called \u2192 scene graph traversed and transforms updated \u2192 RenderPipes batch draw calls by type \u2192 systems execute GPU commands \u2192 frame submitted. This architecture enables efficient batching, layer sorting, and custom rendering injection points while maintaining consistent frame timing.","q":"What's the PixiJS v8 rendering pipeline architecture?"}],"shadow_tags":["gpu-backend-selection","rendering-architecture","frame-execution-flow","environment-abstraction","renderer-lifecycle","pixel-pipeline","cross-platform-rendering","performance-tuning","graphics-api-choice"],"summary_rewrite":"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."},"files":[{"bytes":6642,"path":"skills/pixijs-core-concepts/SKILL.md","sha256":"25004a21fd0de03508386d7d995593d3d1fd99271d51d97f0e5182a6a5be7d31","url":"https://skillfed.io/files/pixijs/pixijs-skills/pixijs-core-concepts/01e55555/SKILL.md"}],"id":"pixijs/pixijs-skills/pixijs-core-concepts","links":{"html":"https://skillfed.io/pixijs/pixijs-skills/pixijs-core-concepts","md":"https://skillfed.io/pixijs/pixijs-skills/pixijs-core-concepts.md","repo":"https://github.com/pixijs/pixijs-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":16,"language":null,"last_updated":"2026-06-04","license":"MIT","name":"pixijs-core-concepts","publisher":"pixijs","stars":293},"relations":{"similar":[{"id":"pixijs/pixijs-skills/pixijs-environments"},{"id":"pixijs/pixijs-skills/pixijs"},{"id":"pixijs/pixijs-skills/pixijs-application"},{"id":"pixijs/pixijs-skills/pixijs-migration-v8"},{"id":"pixijs/pixijs-skills/pixijs-blend-modes"},{"id":"pixijs/pixijs-skills/pixijs-filters"},{"id":"pixijs/pixijs-skills/pixijs-create"},{"id":"pixijs/pixijs-skills/pixijs-accessibility"},{"id":"pixijs/pixijs-skills/pixijs-html-source"},{"id":"pixijs/pixijs-skills/pixijs-scene-dom-container"}]},"slug":{"owner":"pixijs","repo":"pixijs-skills","skill":"pixijs-core-concepts"},"version":"01e55555"}