Разрешение фильтра

В PixiJS фильтры являются мощным инструментом для обработки визуальных эффектов на спрайтах, контейнерах и рендер-таргетах. Одним из ключевых аспектов работы с фильтрами является разрешение фильтра (filter resolution), которое напрямую влияет на качество и производительность.

Понятие разрешения фильтра

Разрешение фильтра определяет, с какой детализацией фильтр применяется к объекту. По сути, фильтр рендерится на отдельном текстурном буфере, размеры которого зависят от свойства resolution.

  • filter.resolution = 1 — стандартное разрешение, соответствует разрешению рендерера.
  • filter.resolution > 1 — увеличивает детализацию фильтра, делая эффекты более чёткими, но потребляет больше видеопамяти и снижает производительность.
  • filter.resolution < 1 — снижает детализацию, ускоряет рендер, но может вызвать размытость эффекта.

PixiJS использует текстуры промежуточного рендера для фильтров, и их разрешение определяется свойством filter.resolution при создании фильтра или динамически через filterArea.

Свойство resolution фильтра

const blurFilter = new PIXI.filters.BlurFilter();
blurFilter.resolution = 2; // увеличивает разрешение фильтра в 2 раза
  • Значение resolution является числом.
  • По умолчанию фильтры наследуют разрешение рендерера (app.renderer.resolution).
  • Увеличение разрешения улучшает детализацию размытий, свечений, шейдерных эффектов.

Важно понимать, что увеличение разрешения фильтра пропорционально увеличивает нагрузку на GPU, так как текстура промежуточного рендера становится больше.

Применение фильтра с разной областью

Фильтры можно применять к определённой области сцены через filterArea:

blurFilter.filterArea = new PIXI.Rectangle(50, 50, 200, 200);
  • Размер filterArea и разрешение фильтра совместно определяют качество итогового эффекта.
  • Если область небольшая, даже высокая resolution не создаст существенной нагрузки.
  • Если область занимает весь экран, высокая resolution может сильно снизить FPS.

Наследование разрешения от рендерера

Каждый фильтр по умолчанию использует разрешение рендерера:

console.log(app.renderer.resolution); // например, 1
  • Для рендереров с высоким DPI (например, Retina) app.renderer.resolution может быть больше 1.
  • Фильтры автоматически масштабируются вместе с рендерером, что предотвращает размытость на устройствах с высоким DPI.
  • Можно переопределить filter.resolution для конкретного фильтра, если требуется повысить качество независимо от рендерера.

Влияние на производительность

Разрешение фильтра — ключевой параметр, влияющий на баланс между качеством и производительностью.

  • Высокое разрешение:

    • Отлично подходит для крупных спрайтов и эффектов с тонкими деталями.
    • Увеличивает использование VRAM и GPU.
    • Применимо для статических эффектов или эффектов, где качество критично.

  • Низкое разрешение:

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

Практическая рекомендация

  • Для фильтров на фоне, эффектах частиц или больших контейнерах можно использовать resolution = 1 или меньше.
  • Для крупных спрайтов, glow-эффектов и размытий на переднем плане рекомендуется resolution = 2–4.
  • Динамическая регулировка разрешения на лету позволяет оптимизировать производительность в зависимости от мощности устройства.

Пример комплексного применения

const app = new PIXI.Application({
    width: 800,
    height: 600,
    resolution: window.devicePixelRatio || 1
});

document.body.appendChild(app.view);

const sprite = PIXI.Sprite.from('image.png');
app.stage.addChild(sprite);

const blurFilter = new PIXI.filters.BlurFilter();
blurFilter.resolution = 2; // повышенное качество
blurFilter.blur = 8;
blurFilter.filterArea = sprite.getBounds(); // фильтр применим только к спрайту

sprite.filters = [blurFilter];
  • В этом примере размытие применяется только к области спрайта.
  • Повышенное разрешение 2 делает эффект более детализированным.
  • Если разрешение оставить по умолчанию, эффект будет слегка размытым, особенно на экранах Retina.

Особенности работы с несколькими фильтрами

  • Каждый фильтр создаёт отдельный промежуточный рендер-текстурный буфер.
  • Разрешение каждого фильтра можно задавать индивидуально.
  • Суммарное потребление VRAM = сумма всех промежуточных текстур × их разрешение.
  • Для сложных сцен рекомендуется объединять фильтры в один Filter или использовать MultiPassFilter, чтобы оптимизировать память и производительность.

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

Оглавление