Ручной вызов рендеринга

PixiJS предоставляет высокоуровневый рендеринг через объект PIXI.Application, который обычно управляет циклом отрисовки автоматически. Однако в ряде случаев требуется полный контроль над рендерингом сцены. Для этого используется ручной вызов рендеринга через метод renderer.render().

const app = new PIXI.Application({ width: 800, height: 600 });
document.body.appendChild(app.view);

// Создание контейнера
const stage = new PIXI.Container();

// Создание графического объекта
const graphics = new PIXI.Graphics();
graphics.beginFill(0xff0000);
graphics.drawCircle(100, 100, 50);
graphics.endFill();

stage.addChild(graphics);

// Ручной рендеринг сцены
app.renderer.render(stage);

В примере выше app.renderer.render(stage) отрисовывает контейнер stage один раз, независимо от автоматического цикла, который запускает app.ticker.

Отличие ручного рендеринга от автоматического

По умолчанию PIXI.Application использует ticker, который вызывает метод render() каждый кадр. При ручном рендеринге:

  • Отсутствует автоматическое обновление сцены.
  • Разработчик полностью контролирует, когда происходит отрисовка.
  • Возможность оптимизации ресурсоёмких сцен путем вызова render() только при необходимости.

Это особенно полезно для:

  • Статических сцен с редкими изменениями.
  • Кастомных анимационных циклов вне стандартного тикера.
  • Сцен с несколькими канвасами или слоями, где требуется рендерить разные части по отдельности.

Рендеринг отдельных контейнеров

Метод renderer.render() может использоваться не только для корневого контейнера, но и для любых дочерних объектов сцены. Это позволяет рендерить отдельные элементы на временных канвасах или текстурах.

const renderTexture = PIXI.RenderTexture.create({ width: 200, height: 200 });
app.renderer.render(stage, { renderTexture: renderTexture });

// Создание спрайта из текстуры
const sprite = new PIXI.Sprite(renderTexture);
app.stage.addChild(sprite);

В данном примере stage рендерится в текстуру, а затем создается спрайт на основе этой текстуры. Такой подход используется для кэширования сложной графики и уменьшения нагрузки на GPU.

Управление порядком рендеринга

PixiJS отрисовывает объекты в порядке добавления в контейнер. При ручном рендеринге важно учитывать:

  • Слои: можно создавать несколько контейнеров для управления глубиной.
  • Сортировку вручную: метод container.children.sort() позволяет изменять порядок отрисовки без удаления объектов.
stage.children.sort((a, b) => a.zIndex - b.zIndex);

Для корректной работы сортировки объекты должны иметь свойство zIndex и container.sortableChildren = true.

Интеграция с кастомными анимациями

Ручной рендеринг хорошо сочетается с анимацией без использования ticker. Можно использовать requestAnimationFrame:

function animate() {
    graphics.rotation += 0.01;
    app.renderer.render(stage);
    requestAnimationFrame(animate);
}

animate();

Такой подход позволяет:

  • Контролировать частоту обновления.
  • Синхронизировать рендеринг с внешними анимациями.
  • Избегать лишних вызовов рендера, если сцена статична.

Использование рендерера с несколькими сценами

Для сложных проектов может потребоваться рендерить несколько сцен на одном канвасе или на разных канвасах. Прямое использование renderer.render() позволяет:

  • Рендерить каждую сцену независимо.
  • Обновлять только изменившиеся объекты.
  • Создавать эффекты постобработки через рендер в текстуру.
const scene1 = new PIXI.Container();
const scene2 = new PIXI.Container();

app.renderer.render(scene1);
app.renderer.render(scene2);

Оптимизация производительности

При ручном рендеринге важно учитывать:

  • Минимизация вызовов render() — каждый вызов инициирует перерисовку GPU.
  • Кэширование текстур и сложных графических объектов через RenderTexture.
  • Использование dirty-флагов для изменения объектов только при необходимости.

Итог

Ручной вызов рендеринга в PixiJS предоставляет полный контроль над отрисовкой сцен, позволяет оптимизировать производительность, работать с текстурами и отдельными контейнерами. Он незаменим в случаях нестандартного цикла анимации, сложных слоев и кэширования графики.

Ключевые методы и свойства:

  • renderer.render(container[, options]) — основной метод для рендеринга.
  • RenderTexture.create() — создание текстур для рендеринга в них.
  • container.sortableChildren и zIndex — управление порядком объектов.
  • requestAnimationFrame — кастомное управление циклом анимации.

Этот подход формирует основу продвинутой работы с PixiJS и обеспечивает гибкость при построении интерактивных и графически сложных приложений.

Оглавление