Несколько фильтров на одном объекте

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

Основы применения нескольких фильтров

Фильтры в PixiJS применяются через свойство filters объекта. Это массив, в котором каждый элемент — экземпляр фильтра:

import * as PIXI from 'pixi.js';

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

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

const blurFilter = new PIXI.filters.BlurFilter();
const colorMatrix = new PIXI.filters.ColorMatrixFilter();

sprite.filters = [blurFilter, colorMatrix];

Ключевые моменты:

  • Фильтры выполняются в порядке их расположения в массиве filters. Первый фильтр обрабатывает исходное изображение, результат передается следующему и так далее.
  • Каждый фильтр создаёт промежуточный рендер-текстурный объект. Чем больше фильтров и выше разрешение спрайта, тем выше нагрузка на GPU.
  • Некоторые фильтры (например, DisplacementFilter) требуют дополнительной текстуры для работы.

Порядок применения фильтров

Порядок фильтров важен, так как результат одного фильтра используется в качестве входных данных для следующего. Например, если сначала применить размытие, а потом цветокоррекцию, эффект будет отличаться от обратного порядка.

const blurFilter = new PIXI.filters.BlurFilter(5);
const sepiaFilter = new PIXI.filters.ColorMatrixFilter();
sepiaFilter.sepia(true);

// Применение: сначала blur, потом sepia
sprite.filters = [blurFilter, sepiaFilter];

Настройка фильтров индивидуально

Каждый фильтр имеет собственные параметры, которые можно изменять в любое время:

blurFilter.blur = 10;          // Увеличение размытия
colorMatrix.brightness(1.5);   // Повышение яркости

При изменении параметров фильтров не требуется заново присваивать массив filters, изменения вступают в силу автоматически.

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

Применение нескольких фильтров одновременно может значительно нагружать GPU. Основные принципы оптимизации:

  1. Объединение фильтров Некоторые фильтры можно объединять в один кастомный шейдер, чтобы сократить количество проходов рендеринга.

  2. Использование cacheAsBitmap Если объект статичен, sprite.cacheAsBitmap = true позволяет рендерить объект один раз с применёнными фильтрами и использовать его как текстуру.

  3. Минимизация размера фильтруемой области Фильтры работают только на том прямоугольнике, где есть содержимое объекта. Ограничение размеров текстур и масок снижает нагрузку.

  4. Проверка порядка фильтров Иногда перестановка фильтров может снизить визуальную нагрузку без потери эффекта.

Сложные комбинации фильтров

Можно комбинировать разные типы фильтров для достижения уникальных эффектов:

const blur = new PIXI.filters.BlurFilter(4);
const glow = new PIXI.filters.GlowFilter({ distance: 15, outerStrength: 2 });
const colorAdjust = new PIXI.filters.ColorMatrixFilter();

colorAdjust.hue(90, false);
sprite.filters = [blur, glow, colorAdjust];

Особенности:

  • Фильтр GlowFilter требует отдельного рендеринга для создания ореола.
  • ColorMatrixFilter может изменять контраст, яркость, насыщенность и оттенок одновременно.
  • Порядок фильтров влияет на видимость свечения и цветокоррекции: сначала размытие, потом свечение, затем цветокоррекция — классический подход для реалистичных эффектов.

Фильтры на контейнерах

В PixiJS фильтры можно применять не только к отдельным спрайтам, но и к контейнерам, что позволяет одновременно изменять несколько объектов:

const container = new PIXI.Container();
container.addChild(sprite1, sprite2, sprite3);

const blur = new PIXI.filters.BlurFilter(3);
container.filters = [blur];
  • Все дочерние объекты контейнера будут обрабатываться фильтром.
  • Контейнеры поддерживают несколько фильтров так же, как и отдельные спрайты.
  • Это удобно для эффекта размытия фона или общих цветовых изменений сцены.

Резюме принципов работы

  • Фильтры выполняются по очереди из массива filters.
  • Каждый фильтр имеет собственные настраиваемые параметры.
  • Производительность напрямую зависит от количества фильтров и размера объектов.
  • Комбинирование разных фильтров позволяет создавать сложные визуальные эффекты.
  • Контейнеры поддерживают фильтры, распространяющиеся на всех дочерних объектов.

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

Оглавление