pixijs-core-concepts

Name: pixijs-core-concepts
Author: pixijs

3.0kinstalls15forks

How to install pixijs-core-concepts?

pixijs/pixijs-skills/pixijs-core-concepts

$npx -y skills add pixijs/pixijs-skills --skill pixijs-core-concepts

Installs into the current project.

Summary

Use this skill when understanding how PixiJS v8 renders frames: the systems-and-pipes renderer, the render loop, and how the library adapts to different environments. Covers WebGLRenderer/WebGPURenderer/CanvasRenderer selection, renderer.render() pipeline, environment detection,

Files · 1

View on GitHub

SKILL.md

1	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`.
2
3	## Quick Start
4
5	```ts
6	console.log(app.renderer.name); // 'webgl' \| 'webgpu' \| 'canvas'
7
8	app.ticker.add((ticker) => {
9	sprite.rotation += 0.01 * ticker.deltaTime;
10	});
11
12	const tex = app.renderer.extract.texture({ target: app.stage });
13
14	app.renderer.render({ container: app.stage });
15	```
16
17	`app.renderer` is the `WebGLRenderer`, `WebGPURenderer`, or `CanvasRenderer` chosen by `autoDetectRenderer`. The TickerPlugin drives `renderer.render()` automatically; call it manually only with `autoStart: false`. Backend selection happens in `Application.init({ preference })`; see `pixijs-application` for setup.
18
19	Related skills: `pixijs-application` (Application construction and lifecycle), `pixijs-ticker` (per-frame logic, priorities, FPS capping), `pixijs-environments` (Web Worker, SSR, strict CSP), `pixijs-custom-rendering` (writing a RenderPipe), `pixijs-scene-core-concepts` (scene graph basics).
20
21	## Topics
22
23	\| Topic \| Reference \| When \|
24	\| ------------------- \| ------------------------------------------------------ \| --------------------------------------------------------- \|
25	\| Choosing a backend \| [references/renderers.md](references/renderers.md) \| Preference forms, per-renderer options, systems and pipes \|
26	\| Per-frame execution \| [references/render-loop.md](references/render-loop.md) \| Priority order, time units, manual rendering \|
27
28	For deep dives into any single topic, open the corresponding reference file. Non-browser targets (`DOMAdapter`, `WebWorkerAdapter`, custom adapters, strict CSP) are covered in the `pixijs-environments` skill.
29
30	## Decision guide
31
32	- Setting up an Application? Start with `pixijs-application`. This skill explains what the renderer does under the hood.
33	- Choosing between WebGL and WebGPU? Use `['webgpu', 'webgl']` as your preference array. WebGPU is fastest where available; WebGL is the reliable fallback. See `references/renderers.md`.
34	- Running in a Web Worker? Set `DOMAdapter.set(WebWorkerAdapter)` before `app.init`. See the `pixijs-environments` skill for complete setup.
35	- Need manual control over when rendering happens? Set `autoStart: false` and call `app.renderer.render(app.stage)` from your own loop. See `references/render-loop.md`.
36	- Integrating with a physics library? Add your update at `UPDATE_PRIORITY.HIGH` so physics runs before the render at `LOW`. See `references/render-loop.md`.
37	- Writing a custom renderable? Implement a `RenderPipe`. See `pixijs-custom-rendering` skill.
38	- Running under strict CSP? Import `'pixi.js/unsafe-eval'`. See the `pixijs-environments` skill.
39
40	## Quick concepts
41
42	### Renderer = systems + pipes
43
44	Each renderer is composed of `Systems` (lifecycle services: textures, buffers, state, filters, masks) and `RenderPipes` (per-renderable instruction builders: sprite, graphics, mesh, particle, text, tiling). Writing a custom renderable means implementing a `RenderPipe` and registering it via extensions.
45
46	### The render loop
47
48	`app.ticker.add(fn)` registers a callback that runs every frame. The `TickerPlugin` registers `app.render()` at `UPDATE_PRIORITY.LOW`, so ticker callbacks at `NORMAL` or `HIGH` run before the draw. Disable the plugin with `autoStart: false` for manual control.
49
50	### Environments
51
52	`DOMAdapter` abstracts every DOM call PixiJS makes (canvas creation, image loading, fetch, XML parsing). Swap with `DOMAdapter.set(WebWorkerAdapter)` for Workers or implement a custom `Adapter` for Node/SSR. Must be done before `Application.init`.
53
54	## Common Mistakes
55
56	### [HIGH] Accessing app.renderer before init() resolves
57
58	Wrong:
59
60	```ts
61	const app = new Application();
62	app.init({ width: 800, height: 600 });
63	console.log(app.renderer.name); // undefined — init() is async
64	```
65
66	Correct:
67
68	```ts
69	const app = new Application();
70	await app.init({ width: 800, height: 600 });
71	console.log(app.renderer.name); // 'webgl' \| 'webgpu' \| 'canvas'
72	```
73
74	`Application.init()` is async. `app.renderer`, `app.canvas`, and `app.screen` do not exist until after the promise resolves.
75
76	### [HIGH] Setting DOMAdapter after Appli

People who liked this also viewed

6 picks

Type

pixijs-core-concepts

3.0kinstalls15forks

View on GitHub

How to install pixijs-core-concepts?

pixijs/pixijs-skills/pixijs-core-concepts

$npx -y skills add pixijs/pixijs-skills --skill pixijs-core-concepts

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	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`.
2
3	## Quick Start
4
5	```ts
6	console.log(app.renderer.name); // 'webgl' \| 'webgpu' \| 'canvas'
7
8	app.ticker.add((ticker) => {
9	sprite.rotation += 0.01 * ticker.deltaTime;
10	});
11
12	const tex = app.renderer.extract.texture({ target: app.stage });
13
14	app.renderer.render({ container: app.stage });
15	```
16
17	`app.renderer` is the `WebGLRenderer`, `WebGPURenderer`, or `CanvasRenderer` chosen by `autoDetectRenderer`. The TickerPlugin drives `renderer.render()` automatically; call it manually only with `autoStart: false`. Backend selection happens in `Application.init({ preference })`; see `pixijs-application` for setup.
18
19	Related skills: `pixijs-application` (Application construction and lifecycle), `pixijs-ticker` (per-frame logic, priorities, FPS capping), `pixijs-environments` (Web Worker, SSR, strict CSP), `pixijs-custom-rendering` (writing a RenderPipe), `pixijs-scene-core-concepts` (scene graph basics).
20
21	## Topics
22
23	\| Topic \| Reference \| When \|
24	\| ------------------- \| ------------------------------------------------------ \| --------------------------------------------------------- \|
25	\| Choosing a backend \| [references/renderers.md](references/renderers.md) \| Preference forms, per-renderer options, systems and pipes \|
26	\| Per-frame execution \| [references/render-loop.md](references/render-loop.md) \| Priority order, time units, manual rendering \|
27
28	For deep dives into any single topic, open the corresponding reference file. Non-browser targets (`DOMAdapter`, `WebWorkerAdapter`, custom adapters, strict CSP) are covered in the `pixijs-environments` skill.
29
30	## Decision guide
31
32	- Setting up an Application? Start with `pixijs-application`. This skill explains what the renderer does under the hood.
33	- Choosing between WebGL and WebGPU? Use `['webgpu', 'webgl']` as your preference array. WebGPU is fastest where available; WebGL is the reliable fallback. See `references/renderers.md`.
34	- Running in a Web Worker? Set `DOMAdapter.set(WebWorkerAdapter)` before `app.init`. See the `pixijs-environments` skill for complete setup.
35	- Need manual control over when rendering happens? Set `autoStart: false` and call `app.renderer.render(app.stage)` from your own loop. See `references/render-loop.md`.
36	- Integrating with a physics library? Add your update at `UPDATE_PRIORITY.HIGH` so physics runs before the render at `LOW`. See `references/render-loop.md`.
37	- Writing a custom renderable? Implement a `RenderPipe`. See `pixijs-custom-rendering` skill.
38	- Running under strict CSP? Import `'pixi.js/unsafe-eval'`. See the `pixijs-environments` skill.
39
40	## Quick concepts
41
42	### Renderer = systems + pipes
43
44	Each renderer is composed of `Systems` (lifecycle services: textures, buffers, state, filters, masks) and `RenderPipes` (per-renderable instruction builders: sprite, graphics, mesh, particle, text, tiling). Writing a custom renderable means implementing a `RenderPipe` and registering it via extensions.
45
46	### The render loop
47
48	`app.ticker.add(fn)` registers a callback that runs every frame. The `TickerPlugin` registers `app.render()` at `UPDATE_PRIORITY.LOW`, so ticker callbacks at `NORMAL` or `HIGH` run before the draw. Disable the plugin with `autoStart: false` for manual control.
49
50	### Environments
51
52	`DOMAdapter` abstracts every DOM call PixiJS makes (canvas creation, image loading, fetch, XML parsing). Swap with `DOMAdapter.set(WebWorkerAdapter)` for Workers or implement a custom `Adapter` for Node/SSR. Must be done before `Application.init`.
53
54	## Common Mistakes
55
56	### [HIGH] Accessing app.renderer before init() resolves
57
58	Wrong:
59
60	```ts
61	const app = new Application();
62	app.init({ width: 800, height: 600 });
63	console.log(app.renderer.name); // undefined — init() is async
64	```
65
66	Correct:
67
68	```ts
69	const app = new Application();
70	await app.init({ width: 800, height: 600 });
71	console.log(app.renderer.name); // 'webgl' \| 'webgpu' \| 'canvas'
72	```
73
74	`Application.init()` is async. `app.renderer`, `app.canvas`, and `app.screen` do not exist until after the promise resolves.
75
76	### [HIGH] Setting DOMAdapter after Appli

People who liked this also viewed

6 picks

Type