# pixijs-core-concepts

Объясняет, как PixiJS v8 рисует кадры: выбор бэкенда, цикл рендера, работа с RenderTexture и потеря контекста.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 6000 установок · ★ 358
- Автор: pixijs
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/pixijs/pixijs-skills/tree/HEAD/skills/pixijs-core-concepts/SKILL.md
- Обновлён: 2026-10-01
- HTML: https://affpapa.org/nevibecode/skills/pixijs-core-concepts

## Что делает

Скилл разбирает внутренности рендера PixiJS v8. Внутри — модель «systems + pipes»: каждый рендерер собран из сервисов жизненного цикла (текстуры, буферы, состояние, фильтры, маски) и построителей инструкций для спрайтов, графики, меша, частиц, текста и тайлинга. Отдельно описано, как `autoDetectRenderer` выбирает между `WebGLRenderer`, `WebGPURenderer` и `CanvasRenderer`, и как устроен цикл кадров через `app.ticker.add()`.

Есть разбор частых ошибок с примерами кода. Главная: `Application.init()` асинхронный, поэтому `app.renderer`, `app.canvas` и `app.screen` появляются только после `await`. Вторая — `DOMAdapter.set(WebWorkerAdapter)` нужно вызывать до `init()`, иначе в рендерер уже вшит неправильный адаптер. Третья: `preference` — это подсказка, а не гарантия. Если браузер не поддерживает WebGPU, PixiJS откатится на WebGL или Canvas, поэтому код под конкретный бэкенд стоит ветвить по `renderer.name`.

Тема разбита на справочники: `references/renderers.md` про выбор бэкенда и опции рендереров, `references/render-loop.md` про порядок приоритетов и ручной рендер. Смежные темы вынесены в отдельные скиллы — `pixijs-application`, `pixijs-ticker`, `pixijs-environments`, `pixijs-custom-rendering`. Рендер в текстуру идёт через `target` в `renderer.render()` либо через `RenderTarget` с явными color и depth attachments.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-core-concepts -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/pixijs-core-concepts/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/pixijs-core-concepts/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-core-concepts -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/pixijs-core-concepts/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-core-concepts -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/pixijs-core-concepts/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install pixijs/pixijs-skills pixijs-core-concepts
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/pixijs-core-concepts/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-core-concepts -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/pixijs/pixijs-skills --path skills/pixijs-core-concepts
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/pixijs-core-concepts/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-core-concepts -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/pixijs/pixijs-skills/tree/HEAD/skills/pixijs-core-concepts/SKILL.md

## Когда брать
- понять, какой бэкенд выберет PixiJS и почему
- разобраться, в каком порядке выполняются колбэки тикера и рендер
- отрендерить сцену в RenderTexture или свой RenderTarget
- починить падение из-за обращения к `app.renderer` до `await app.init()`
- подготовить восстановление после потери WebGL-контекста или WebGPU-устройства

## Примеры запросов агенту
- объясни, как PixiJS v8 выбирает между WebGPU и WebGL и что делает autoDetectRenderer
- почему app.renderer равен undefined сразу после init и как это исправить
- как отрендерить app.stage в RenderTexture и забрать из неё текстуру

## Похожие
- [pixijs-2d](https://affpapa.org/nevibecode/skills/pixijs-2d.md) — скилл · 2500 установок
- [pixijs-rendering](https://affpapa.org/nevibecode/skills/pixijs-rendering.md) — скилл · 5400 установок
- [threejs-animation](https://affpapa.org/nevibecode/skills/threejs-animation.md) — скилл · 20400 установок
- [threejs-fundamentals](https://affpapa.org/nevibecode/skills/threejs-fundamentals.md) — скилл · 17400 установок
- [threejs-scene-setup](https://affpapa.org/nevibecode/skills/threejs-scene-setup.md) — скилл · 5500 установок
- [threejs-webgl](https://affpapa.org/nevibecode/skills/threejs-webgl.md) — скилл · 4600 установок

Из того же набора: [pixijs/pixijs-skills](https://affpapa.org/nevibecode/by/pixijs/pixijs-skills.md) — 25 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md