pixijs-core-concepts

Explain PixiJS v8 frame rendering across WebGL, WebGPU, Canvas, and worker contexts.

16|8|Updated May 20, 2020
One-click install
npx skills add https://github.com/encounterplus/web-client --skill pixijs-core-concepts-encounterplus
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pixijs-core-concepts
Source: https://github.com/encounterplus/web-client/tree/main/.agents/skills/pixijs-core-concepts
Command: npx skills add https://github.com/encounterplus/web-client --skill pixijs-core-concepts-encounterplus

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It removes confusion about how PixiJS v8 turns your scene into pixels by explaining how the renderer backend is selected, how the render loop executes, and how environment adapters affect rendering.

Core Features & Use Cases

  • Backend selection (autoDetectRenderer/Application.init): Understand how PixiJS chooses WebGL, WebGPU, or Canvas and how to interpret app.renderer.name for feature branching.
  • Renderer execution pipeline (systems + render pipes): Learn what runs once per renderer lifecycle versus what runs every frame to convert renderables into GPU work.
  • Render loop timing and control: Use the Ticker priority model and know when app.render() runs, including manual rendering with autoStart: false and per-object onRender hooks.

Quick Start

Tell the AI: explain which of WebGPU/WebGL/Canvas PixiJS will use for my app and where app.render() fits into the per-frame execution order so I can place my update and debug the render timing correctly.

Frequently Asked Questions about pixijs-core-concepts

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How does PixiJS v8 choose between WebGPU, WebGL, and Canvas for rendering?

PixiJS v8 uses automatic backend selection during Application.init to choose WebGPU, WebGL, or Canvas. You can check app.renderer.name after async init to determine the active renderer and apply feature branching based on the selected backend.

How do I control the PixiJS render loop timing and use delta time correctly?

Control the PixiJS render loop by using the Ticker priority model and ticker.deltaTime or deltaMS for frame-independent updates. You can debug render timing by understanding where app.render() fits into the per-frame execution order.

Can I use manual rendering instead of automatic rendering in PixiJS?

Yes, you can disable automatic rendering in PixiJS by setting autoStart to false and calling app.renderer.render() manually. This allows precise control over the render loop execution order and per-object onRender hooks.

Does PixiJS work with Web Workers and server-side rendering environments?

PixiJS supports adapting behavior across DOMAdapter, WebWorker, and SSR contexts using environment adapters. These adapters modify rendering behavior to ensure compatibility across different execution environments outside the standard DOM.

What is the difference between renderer systems and render pipes in PixiJS?

Renderer systems run once per renderer lifecycle in PixiJS, while render pipes execute every frame to convert renderables into GPU work. This architecture separates initialization logic from the per-frame execution pipeline.