Применение фильтра к объекту

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

Подключение библиотеки

Для работы с фильтрами необходимо подключить основную библиотеку PixiJS. В современных проектах используют ES-модули:

import * as PIXI from 'pixi.js';

Создание приложения осуществляется стандартным образом:

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

Базовые фильтры

PixiJS предоставляет набор встроенных фильтров, включая:

  • PIXI.filters.BlurFilter — размытие изображения.
  • PIXI.filters.ColorMatrixFilter — изменение цветовой гаммы, яркости, контрастности, сепии и других параметров.
  • PIXI.filters.NoiseFilter — наложение шума.
  • PIXI.filters.DisplacementFilter — смещение пикселей по карте смещений.

Применение фильтра осуществляется через свойство filters объекта DisplayObject. Например:

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

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

sprite.filters = [blurFilter];

В этом примере к спрайту применяется размытие с интенсивностью 5. Важно: filters всегда массив, даже если применяется один фильтр.

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

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

const colorFilter = new PIXI.filters.ColorMatrixFilter();
colorFilter.desaturate(); // делает изображение черно-белым

sprite.filters = [blurFilter, colorFilter];

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

Динамическое управление фильтрами

Фильтры поддерживают анимацию через изменение их свойств в цикле ticker приложения:

app.ticker.add((delta) => {
    blurFilter.blur = 5 + Math.sin(app.ticker.lastTime / 500) * 5;
});

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

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

PixiJS позволяет создавать собственные фильтры на основе шейдеров GLSL. Минимальный пример:

const fragmentShader = `
    precision mediump float;
    varying vec2 vTextureCoord;
    uniform sampler2D uSampler;
    uniform float time;

    void main(void) {
        vec4 color = texture2D(uSampler, vTextureCoord);
        color.r += sin(time) * 0.5;
        gl_FragColor = color;
    }
`;

const customFilter = new PIXI.Filter(null, fragmentShader, { time: 0 });
sprite.filters = [customFilter];

app.ticker.add((delta) => {
    customFilter.uniforms.time += delta * 0.1;
});

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

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

Фильтры можно применять не только к отдельным спрайтам, но и к целым контейнерам:

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

const noiseFilter = new PIXI.filters.NoiseFilter(0.5);
container.filters = [noiseFilter];

app.stage.addChild(container);

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

Оптимизация работы фильтров

  • Использовать фильтры только там, где это необходимо, так как каждый фильтр увеличивает нагрузку на GPU.
  • Стараться использовать встроенные фильтры, они оптимизированы для производительности.
  • При динамических фильтрах избегать постоянного создания новых объектов внутри цикла анимации.
  • Контейнеры с фильтрами лучше кэшировать через cacheAsBitmap, если объект статичен, чтобы снизить количество перерисовок.

Работа с масками и фильтрами

Фильтры корректно работают с масками, но важно учитывать порядок применения:

  • Сначала накладывается маска на объект.
  • Затем к результирующему изображению применяются фильтры.

Например:

const graphics = new PIXI.Graphics();
graphics.beginFill(0xffffff);
graphics.drawCircle(200, 200, 100);
graphics.endFill();

sprite.mask = graphics;
sprite.filters = [blurFilter];
app.stage.addChild(graphics);

Эта последовательность обеспечивает размытое изображение внутри маски.

Вывод

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

Оглавление