Pixijs Filters

const sprite = new Sprite(await Assets.load("hero.png"));app.stage.addChild(sprite);
const blur = new BlurFilter({ strength: 4, quality: 4 });const colorMatrix = new ColorMatrixFilter();colorMatrix.brightness(1.2, false);
sprite.filters = [blur, colorMatrix];
const container = new Container();container.filters = [new BlurFilter({ strength: 2 })];container.filterArea = new Rectangle(0, 0, 800, 600);app.stage.addChild(container);

import {  AlphaFilter,  BlurFilter,  ColorMatrixFilter,  DisplacementFilter,  NoiseFilter,  Assets,  Sprite,} from "pixi.js";
// Alpha (uniform transparency without per-child layering)const alpha = new AlphaFilter({ alpha: 0.5 });
// Blur — strength/quality are uniform; strengthX/strengthY split axes;// kernelSize must be odd (5, 7, 9, ... 15); repeatEdgePixels avoids transparent edgesconst blur = new BlurFilter({  strength: 4,  quality: 4,  kernelSize: 5,  repeatEdgePixels: false,});
// Color matrix — brightness is one of many presets. Others: tint, hue,// contrast, saturate, desaturate, greyscale/grayscale, blackAndWhite,// negative, sepia, technicolor, polaroid, kodachrome, browni, vintage,// colorTone, night, predator, lsd, reset. Direct access via// `colorMatrix.matrix` (20-element array) and `colorMatrix.alpha` (blend// between original and transformed).const colorMatrix = new ColorMatrixFilter();colorMatrix.brightness(1.5, false);colorMatrix.contrast(0.5, true); // multiply stacks on top of existing matrixcolorMatrix.alpha = 0.7; // blend at 70% strength
// Displacement — scale is a number or PointDataconst displacementTexture = await Assets.load("displacement_map.png");const displacementSprite = new Sprite(displacementTexture);const displacement = new DisplacementFilter({  sprite: displacementSprite,  scale: { x: 20, y: 10 },});
// Noise — seed is an arbitrary number that determines the noise pattern; same seed reproduces the same patternconst noise = new NoiseFilter({ noise: 0.5, seed: Math.random() });
sprite.filters = [blur, colorMatrix];

import { Filter } from "pixi.js";
const filter = Filter.from({  gl: {    fragment: `            in vec2 vTextureCoord;            out vec4 finalColor;            uniform sampler2D uTexture;            uniform float uTime;
            void main() {                vec2 uv = vTextureCoord;                uv.x += sin(uv.y * 10.0 + uTime) * 0.02;                finalColor = texture(uTexture, uv);            }        `,  },  resources: {    timeUniforms: {      uTime: { value: 0, type: "f32" },    },  },});
sprite.filters = filter;
app.ticker.add((ticker) => {  filter.resources.timeUniforms.uniforms.uTime += 0.04 * ticker.deltaTime;});

import { Filter, GlProgram } from "pixi.js";
const glProgram = GlProgram.from({ fragment: fragmentSrc, vertex: vertexSrc });
const filter = new Filter({  glProgram,  resources: {    timeUniforms: {      uTime: { value: 0, type: "f32" },    },  },});

import { Filter, GlProgram, Rectangle } from "pixi.js";
const filter = new Filter({  glProgram: GlProgram.from({ fragment }),  resources: {},  resolution: 0.5, // default 1. Lower = faster, blurrier. 'inherit' matches the render target resolution  padding: 10, // default 0. Extra pixels for effects that extend bounds  antialias: "off", // default 'off'. 'on' | 'off' | 'inherit'  blendMode: "normal", // default 'normal'  blendRequired: false, // default false. true if shader samples uBackTexture  clipToViewport: true, // default true});
// Optimization: set known bounds to avoid per-frame measurementcontainer.filterArea = new Rectangle(0, 0, 800, 600);
// Toggle without rebuilding the filter arrayfilter.enabled = false;
// Share one filter instance across many display objectssprite1.filters = [filter];sprite2.filters = [filter];

import { AdjustmentFilter } from "pixi-filters/adjustment";import { GlowFilter } from "pixi-filters/glow";
sprite.filters = [  new AdjustmentFilter({ brightness: 1.2, contrast: 1.1 }),  new GlowFilter({ distance: 15, outerStrength: 2 }),];

import "pixi.js/advanced-blend-modes";
await app.init({ useBackBuffer: true });sprite.blendMode = "color-burn";

import { Filter } from "pixi.js";import "pixi.js/advanced-blend-modes";
Filter.defaultOptions.resolution = "inherit";sprite.blendMode = "overlay";

import { Filter } from "pixi.js";
const filter = new Filter(vertex, fragment, { uTime: 0 });

import { Filter, GlProgram } from "pixi.js";
const filter = new Filter({  glProgram: GlProgram.from({ fragment, vertex }),  resources: {    timeUniforms: { uTime: { value: 0, type: "f32" } },  },});

import { AdjustmentFilter } from "@pixi/filter-adjustment";

import { AdjustmentFilter } from "pixi-filters/adjustment";

for (const child of container.children) {  child.filters = [new BlurFilter({ strength: 4 })];}

container.filters = [new BlurFilter({ strength: 4 })];

await app.init({ useBackBuffer: true });

import { Rectangle } from "pixi.js";
container.filterArea = new Rectangle(0, 0, 800, 600);container.filters = [someFilter];