Visual effects system including built-in filters (blur, color matrix, displacement) and custom filter creation with shader support. Filters provide post-processing effects that can be applied to display objects for enhanced visual presentation.
Core filter class for creating visual effects.
/**
* Base filter class for visual effects
*/
class Filter {
constructor(options?: FilterOptions);
/** Fragment shader source */
glProgram: GlProgram;
/** GPU program */
gpuProgram: GpuProgram;
/** Uniform groups */
groups: Record<string, UniformGroup>;
/** Shader resources */
resources: Record<string, any>;
/** Filter blend mode */
blendMode: BLEND_MODES;
/** Filter enabled state */
enabled: boolean;
/** Filter padding */
padding: number;
/** Filter antialias */
antialias: 'inherit' | 'on' | 'off';
/** Filter resolution */
resolution: number;
/** Multisample level */
multisample: MSAA_QUALITY;
/**
* Apply filter
* @param filterManager - Filter system
* @param input - Input render target
* @param output - Output render target
* @param clearMode - Clear mode
*/
apply(filterManager: FilterSystem, input: RenderTarget, output: RenderTarget, clearMode?: CLEAR_MODES): void;
/**
* Destroy filter and clean up resources
*/
destroy(): void;
}
interface FilterOptions {
/** WebGL program */
glProgram?: GlProgram;
/** WebGPU program */
gpuProgram?: GpuProgram;
/** Uniform groups */
groups?: Record<string, UniformGroup>;
/** Shader resources */
resources?: Record<string, any>;
/** Padding */
padding?: number;
/** Antialias */
antialias?: 'inherit' | 'on' | 'off';
/** Resolution */
resolution?: number;
/** Multisample */
multisample?: MSAA_QUALITY;
}Collection of commonly used visual effects filters.
/**
* Blur filter for gaussian blur effects
*/
class BlurFilter extends Filter {
constructor(options?: BlurFilterOptions);
/** Blur strength */
blur: number;
/** Blur quality (number of passes) */
quality: number;
/** Horizontal blur amount */
blurX: number;
/** Vertical blur amount */
blurY: number;
/** Kernel size */
kernelSize: number;
/**
* Apply blur in single direction
* @param filterManager - Filter system
* @param input - Input render target
* @param output - Output render target
* @param clearMode - Clear mode
* @param horizontal - Horizontal direction
*/
applyFilter(filterManager: FilterSystem, input: RenderTarget, output: RenderTarget, clearMode?: CLEAR_MODES, horizontal?: boolean): void;
}
interface BlurFilterOptions {
/** Blur strength */
strength?: number;
/** Blur quality */
quality?: number;
/** Texture resolution */
resolution?: number;
/** Kernel size */
kernelSize?: number;
}
/**
* Color matrix filter for color transformations
*/
class ColorMatrixFilter extends Filter {
constructor(matrix?: number[]);
/** 5x4 color transformation matrix */
matrix: number[];
/** Filter alpha */
alpha: number;
/**
* Reset matrix to identity
*/
reset(): void;
/**
* Set matrix values
* @param matrix - 5x4 matrix array
*/
setMatrix(matrix: number[]): void;
/**
* Adjust brightness
* @param b - Brightness adjustment (-1 to 1)
* @param multiply - Multiply existing values
*/
brightness(b: number, multiply?: boolean): void;
/**
* Adjust contrast
* @param amount - Contrast adjustment (0 to 2)
* @param multiply - Multiply existing values
*/
contrast(amount: number, multiply?: boolean): void;
/**
* Adjust saturation
* @param amount - Saturation adjustment (0 to 2)
* @param multiply - Multiply existing values
*/
saturate(amount: number, multiply?: boolean): void;
/**
* Desaturate (grayscale)
* @param multiply - Multiply existing values
*/
desaturate(multiply?: boolean): void;
/**
* Adjust hue
* @param rotation - Hue rotation in degrees
* @param multiply - Multiply existing values
*/
hue(rotation: number, multiply?: boolean): void;
/**
* Apply color tint
* @param color - Tint color
* @param multiply - Multiply existing values
*/
tint(color: ColorSource, multiply?: boolean): void;
/**
* Convert to sepia tone
* @param multiply - Multiply existing values
*/
sepia(multiply?: boolean): void;
/**
* Invert colors
* @param multiply - Multiply existing values
*/
negative(multiply?: boolean): void;
}
/**
* Alpha filter for transparency effects
*/
class AlphaFilter extends Filter {
constructor(alpha?: number);
/** Alpha multiplier (0-1) */
alpha: number;
}
/**
* Displacement filter for distortion effects
*/
class DisplacementFilter extends Filter {
constructor(sprite?: Sprite, scale?: number);
/** Displacement map sprite */
sprite: Sprite;
/** Displacement scale */
scale: Point;
/** Displacement map texture */
maskSprite: Sprite;
/** Mask matrix */
maskMatrix: Matrix;
}
/**
* Noise filter for noise/grain effects
*/
class NoiseFilter extends Filter {
constructor(noise?: number, seed?: number);
/** Noise amount (0-1) */
noise: number;
/** Random seed */
seed: number;
}Filter effect wrapper for managing filter application.
/**
* Filter effect wrapper
*/
class FilterEffect {
constructor(options?: FilterEffectOptions);
/** Associated filters */
filters: Filter[];
/** Effect enabled state */
enabled: boolean;
/** Effect priority */
priority: number;
/**
* Add filter to effect
* @param filter - Filter to add
*/
addFilter(filter: Filter): void;
/**
* Remove filter from effect
* @param filter - Filter to remove
*/
removeFilter(filter: Filter): void;
/**
* Destroy effect and filters
*/
destroy(): void;
}
interface FilterEffectOptions {
/** Initial filters */
filters?: Filter[];
/** Enabled state */
enabled?: boolean;
/** Effect priority */
priority?: number;
}System for managing and applying filters.
/**
* Filter management system
*/
class FilterSystem {
constructor(renderer: Renderer);
/** Associated renderer */
renderer: Renderer;
/** Default filter vertex shader */
defaultFilterVertex: string;
/** Filter stack */
filterStack: FilterStackEntry[];
/** Current filter data */
currentFilterData: FilterData;
/**
* Push filter onto stack
* @param filterStackEntry - Filter stack entry
*/
push(filterStackEntry: FilterStackEntry): void;
/**
* Pop filter from stack
*/
pop(): void;
/**
* Apply filters to render target
* @param filters - Filters to apply
* @param input - Input render target
* @param output - Output render target
* @param clearMode - Clear mode
*/
applyFilter(filters: Filter[], input: RenderTarget, output: RenderTarget, clearMode?: CLEAR_MODES): void;
/**
* Calculate filter area
* @param filters - Filters
* @param inputBounds - Input bounds
* @param outputBounds - Output bounds
*/
calculateFilterArea(filters: Filter[], inputBounds: Rectangle, outputBounds: Rectangle): void;
/**
* Get optimal filter texture
* @param resolution - Texture resolution
* @param multisample - Multisample level
* @returns Render texture
*/
getOptimalFilterTexture(resolution: number, multisample?: MSAA_QUALITY): RenderTexture;
/**
* Return filter texture to pool
* @param renderTexture - Texture to return
*/
returnFilterTexture(renderTexture: RenderTexture): void;
/**
* Destroy filter system
*/
destroy(): void;
}Utilities for creating custom filters with shaders.
/**
* Create custom filter from shader sources
* @param vertexSrc - Vertex shader source
* @param fragmentSrc - Fragment shader source
* @param uniforms - Uniform values
* @returns Custom filter
*/
function createFilter(vertexSrc?: string, fragmentSrc?: string, uniforms?: Record<string, any>): Filter;
/**
* Filter shader template
*/
const DEFAULT_VERTEX_SHADER = `
attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;
uniform mat3 projectionMatrix;
varying vec2 vTextureCoord;
void main(void) {
gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
vTextureCoord = aTextureCoord;
}
`;
const DEFAULT_FRAGMENT_SHADER = `
varying vec2 vTextureCoord;
uniform sampler2D uSampler;
void main(void) {
gl_FragColor = texture2D(uSampler, vTextureCoord);
}
`;Filter for custom blend modes and color blending.
/**
* Blend mode filter for advanced blending
*/
class BlendModeFilter extends Filter {
constructor(blendMode: BLEND_MODES);
/** Blend mode */
blendMode: BLEND_MODES;
/**
* Set blend mode
* @param blendMode - New blend mode
*/
setBlendMode(blendMode: BLEND_MODES): void;
}Filter-based masking system.
/**
* Mask filter for complex masking effects
*/
class MaskFilter extends Filter {
constructor(maskObject: Container);
/** Mask object */
maskObject: Container;
/** Invert mask */
invert: boolean;
/**
* Update mask
* @param maskObject - New mask object
*/
updateMask(maskObject: Container): void;
}Usage Examples:
import {
BlurFilter,
ColorMatrixFilter,
DisplacementFilter,
NoiseFilter,
AlphaFilter,
Filter,
Sprite,
Container,
Assets
} from 'pixi.js';
// Basic blur filter
const blurFilter = new BlurFilter({
strength: 8,
quality: 4,
resolution: 1
});
const sprite = new Sprite(await Assets.load('image.png'));
sprite.filters = [blurFilter];
// Animate blur
app.ticker.add(() => {
blurFilter.blur = 5 + Math.sin(Date.now() * 0.001) * 3;
});
// Color matrix effects
const colorMatrix = new ColorMatrixFilter();
// Apply sepia effect
colorMatrix.sepia();
// Apply to container
const container = new Container();
container.filters = [colorMatrix];
// Chain multiple color effects
colorMatrix.contrast(1.2);
colorMatrix.saturate(1.5);
colorMatrix.brightness(0.1);
// Custom color matrix
const customMatrix = [
1, 0, 0, 0, 0, // Red channel
0, 1, 0, 0, 0, // Green channel
0, 0, 1, 0, 0, // Blue channel
0, 0, 0, 1, 0 // Alpha channel
];
colorMatrix.setMatrix(customMatrix);
// Displacement filter for distortion
const displacementTexture = await Assets.load('displacement.png');
const displacementSprite = new Sprite(displacementTexture);
const displacementFilter = new DisplacementFilter(displacementSprite, 20);
sprite.filters = [displacementFilter];
// Animate displacement
app.ticker.add(() => {
displacementSprite.x += 1;
displacementSprite.y += 0.5;
});
// Noise filter
const noiseFilter = new NoiseFilter(0.5, Math.random());
sprite.filters = [noiseFilter];
// Multiple filters
sprite.filters = [
blurFilter,
colorMatrix,
noiseFilter
];
// Custom filter creation
const customFilter = new Filter({
glProgram: GlProgram.from(`
attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;
uniform mat3 projectionMatrix;
varying vec2 vTextureCoord;
void main(void) {
gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
vTextureCoord = aTextureCoord;
}
`, `
varying vec2 vTextureCoord;
uniform sampler2D uSampler;
uniform float time;
uniform vec2 resolution;
void main(void) {
vec2 uv = vTextureCoord;
// Wave distortion
uv.x += sin(uv.y * 10.0 + time) * 0.02;
uv.y += cos(uv.x * 10.0 + time) * 0.02;
vec4 color = texture2D(uSampler, uv);
// Add chromatic aberration
float offset = 0.005;
color.r = texture2D(uSampler, uv + vec2(offset, 0.0)).r;
color.b = texture2D(uSampler, uv - vec2(offset, 0.0)).b;
gl_FragColor = color;
}
`),
resources: {
uniforms: new UniformGroup({
time: 0,
resolution: [800, 600]
})
}
});
// Update custom filter uniforms
app.ticker.add(() => {
customFilter.resources.uniforms.uniforms.time += 0.016;
});
// Filter performance optimization
const performantBlur = new BlurFilter({
strength: 4,
quality: 2, // Lower quality for better performance
resolution: 0.5 // Half resolution
});
// Conditional filter application
const screenEffects = new Container();
screenEffects.filters = [];
// Add filters based on settings
if (settings.enableBlur) {
screenEffects.filters.push(new BlurFilter(2));
}
if (settings.enableColorGrading) {
const grading = new ColorMatrixFilter();
grading.contrast(1.1);
grading.saturate(1.2);
screenEffects.filters.push(grading);
}
// Filter with alpha blending
const overlayFilter = new AlphaFilter(0.8);
const overlaySprite = new Sprite(overlayTexture);
overlaySprite.filters = [overlayFilter];
// Complex masking with filters
const maskFilter = new MaskFilter(maskContainer);
maskFilter.invert = true;
sprite.filters = [maskFilter];
// Filter cleanup
sprite.on('destroyed', () => {
if (sprite.filters) {
sprite.filters.forEach(filter => filter.destroy());
}
});