Библиотека pixi-filters: обзор доступных эффектов

Библиотека pixi-filters расширяет возможности рендеринга в PixiJS, предоставляя набор готовых фильтров для работы с изображениями, спрайтами и контейнерами. Каждый фильтр представляет собой класс, который наследуется от базового PIXI.Filter и применяет GLSL-шейдер к рендеру. Фильтры могут использоваться по отдельности или комбинироваться для создания сложных визуальных эффектов.

Типы фильтров

Фильтры в pixi-filters делятся на несколько категорий в зависимости от назначения:

Цветовые фильтры Позволяют изменять цветовую гамму спрайтов, корректировать яркость, контраст и насыщенность.
- ColorMatrixFilter – мощный инструмент для работы с цветами, поддерживает методы brightness(), contrast(), saturate(), hue().
- AlphaFilter – управляет прозрачностью объекта.
Размытие и сглаживание Используются для создания размытого фона, свечения или мягких теней.
- BlurFilter – применяет гауссово размытие; параметр blur регулирует интенсивность.
- AdvancedBloomFilter – имитирует свечение объектов, работает на основе комбинированного размытия и усиления яркости.
Деформационные фильтры Изменяют форму объектов, создавая волны, вращения, искривления.
- TwistFilter – скручивает изображение вокруг центральной точки, параметры: angle, radius.
- DisplacementFilter – смещает пиксели на основе текстуры-дисплейсмента, часто используется для водных или огненных эффектов.
- ShockwaveFilter – создает эффект взрыва или волны, параметр time управляет анимацией.
Световые и атмосферные эффекты Фильтры для имитации свечения, тумана, линзовых эффектов.
- GlowFilter – добавляет яркий ореол вокруг объектов.
- GodrayFilter – симулирует солнечные лучи или световые потоки через препятствия.
- BulgePinchFilter – создает эффект выпуклости или втягивания изображения в точке.
Художественные фильтры Предназначены для придания стилистических эффектов.
- DotFilter – имитирует растровую или полутоновую печать, параметр scale регулирует размер точек.
- PixelateFilter – делает изображение пикселизированным, параметр size задает размер одного пикселя.
- NoiseFilter – добавляет шум, параметр noise регулирует интенсивность зернистости.
Анимационные фильтры Позволяют создавать динамические эффекты, изменяющиеся во времени.
- TiltShiftFilter – имитирует эффект малой глубины резкости, часто используется для миниатюризации сцен.
- ColorStepFilter – создает стилизованное пошаговое разделение цветов.
- ZoomBlurFilter – имитация размытия при движении камеры или приближении к объекту.

Применение фильтров

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

import { BlurFilter, ColorMatrixFilter } from 'pixi-filters';

const blur = new BlurFilter(5);
const colorMatrix = new ColorMatrixFilter();
colorMatrix.brightness(1.2, false);

sprite.filters = [blur, colorMatrix];

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

Настройка параметров и производительность

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

intensity, strength, radius – контролируют силу воздействия фильтра.
center, angle, time – задают положение и динамику эффекта.
Для анимационных фильтров параметр time обычно обновляется в игровом цикле.

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

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

Комбинирование фильтров

Создание сложного эффекта часто требует нескольких фильтров:

import { GlowFilter, DisplacementFilter } from 'pixi-filters';

const glow = new GlowFilter({ distance: 15, outerStrength: 2 });
const displacement = new DisplacementFilter(texture);

container.filters = [glow, displacement];

GlowFilter + DisplacementFilter позволяет создать анимированное свечение с искажением, например, для магических эффектов.
Цветовые фильтры + анимационные дают возможность изменять тон и яркость объекта во времени.

Использование комбинаций открывает практически неограниченные возможности для стилизации и динамических эффектов в 2D-графике.

Создание собственных фильтров

PixiJS позволяет создавать кастомные фильтры, наследуя PIXI.Filter и определяя собственный GLSL-шейдер:

import { Filter } from 'pixi.js';

class CustomWaveFilter extends Filter {
    constructor() {
        super(null, `
            precision mediump float;
            varying vec2 vTextureCoord;
            uniform sampler2D uSampler;
            uniform float time;

            void main(void) {
                vec2 uv = vTextureCoord;
                uv.y += sin(uv.x * 10.0 + time) * 0.05;
                gl_FragColor = texture2D(uSampler, uv);
            }
        `, { time: 0 });
    }
}

uSampler – текстура объекта.
vTextureCoord – координаты пикселя.
Свойство uniforms позволяет передавать параметры в шейдер и динамически изменять их.

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