Встроенный BlurFilter и его параметры

В библиотеке PixiJS фильтры представляют собой мощный инструмент для постобработки графики. Одним из наиболее часто используемых фильтров является BlurFilter, который реализует размытие изображения с высокой производительностью и гибкостью настройки. Этот фильтр применяется к любым объектам, наследующим PIXI.DisplayObject, включая спрайты, контейнеры и текст.

Основы BlurFilter

Фильтр создается через конструктор:

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

По умолчанию размытие имеет небольшой радиус, который может быть увеличен для более выраженного эффекта. BlurFilter использует разделяемое гауссово размытие (separable Gaussian blur), что обеспечивает высокую производительность, так как фильтр сначала размазывает по горизонтали, а затем по вертикали.

После создания фильтр применяется к объекту:

sprite.filters = [blurFilter];

Ключевые параметры BlurFilter

1. blur

Основной параметр, определяющий степень размытия. Значение указывается в пикселях:

blurFilter.blur = 8;
  • Значение 0 отключает размытие.
  • Увеличение значения повышает интенсивность эффекта.
  • Значение можно изменять динамически, что позволяет создавать анимации размытия.

2. quality

Определяет количество проходов фильтра. Чем выше значение, тем плавнее размытие:

blurFilter.quality = 4;
  • Рекомендуется использовать целые числа от 1 до 5.
  • Увеличение quality повышает визуальное качество, но снижает производительность.
  • При низких значениях размытие может быть заметно «грубым».

3. resolution

Параметр управления разрешением фильтра. По умолчанию равен 1, что соответствует текущему разрешению рендерера:

blurFilter.resolution = 2;
  • Значения выше 1 увеличивают четкость размытия, полезно при масштабировании.
  • Повышение resolution требует больше видеопамяти и снижает FPS.
  • Часто используется для Retina-дисплеев.

4. kernelSize

Контролирует размер ядра фильтра. Доступны значения: '3x3', '5x5', '7x7', '9x9', '11x11', '15x15', '17x17', '19x19', '21x21', '25x25'.

blurFilter.kernelSize = PIXI.filters.BLUR_FILTER_KERNEL_SIZE.LARGE;
  • Чем больше ядро, тем более мягкое размытие.
  • Использование слишком большого ядра может негативно сказаться на производительности.
  • В сочетании с параметром quality позволяет контролировать баланс между качеством и скоростью.

5. autoFit

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

blurFilter.autoFit = true;
  • true — фильтр расширяет область текстуры, чтобы размытие не обрезалось.
  • false — фильтр накладывается на исходный размер, что может привести к обрезанию края.

Примеры использования

Размытие спрайта

const sprite = PIXI.Sprite.from('image.png');
const blurFilter = new PIXI.filters.BlurFilter();
blurFilter.blur = 10;
blurFilter.quality = 3;
sprite.filters = [blurFilter];
app.stage.addChild(sprite);

Анимация размытия

app.ticker.add(() => {
    blurFilter.blur = Math.sin(performance.now() / 500) * 15;
});
  • Позволяет создавать эффект «пульсирующего» размытия.
  • Комбинируется с другими фильтрами, например, ColorMatrixFilter, для сложной графической постобработки.

Применение к контейнеру

const container = new PIXI.Container();
container.addChild(sprite1, sprite2);
container.filters = [blurFilter];
  • Все дочерние элементы контейнера размываются единым фильтром.
  • Удобно использовать для эффекта глубины или фоновых сцен.

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

  • Использовать blurFilter.blur умеренно: большие значения увеличивают нагрузку на GPU.
  • Выбирать разумное качество: quality 2–3 оптимально для большинства случаев.
  • Применять к контейнерам, а не отдельным спрайтам, если нужно размыть несколько объектов одновременно.
  • Контролировать resolution при масштабировании для балансировки между четкостью и производительностью.
  • Включать autoFit только при необходимости, так как увеличение текстуры требует дополнительных ресурсов.

Комбинация с другими фильтрами

BlurFilter часто используется вместе с:

  • ColorMatrixFilter — для цветовой коррекции и размытия.
  • DisplacementFilter — для создания эффектов воды и искажений.
  • AlphaFilter — для мягких масок и плавных границ.
sprite.filters = [blurFilter, new PIXI.filters.ColorMatrixFilter()];
  • Порядок фильтров влияет на результат. Размытие обычно ставится перед изменением цвета или после, в зависимости от желаемого эффекта.

Настройка под разные платформы

  • На мобильных устройствах рекомендуется уменьшать blur и quality для сохранения FPS.
  • Для десктопных платформ можно использовать большие значения blur и kernelSize для более выразительных эффектов.
  • Тестирование на целевых устройствах помогает выбрать оптимальные параметры, избегая падения производительности.

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

Оглавление