0
# Filters & Effects
1

2
WebGL shader-based post-processing effects system with built-in filters and support for custom shaders. Filters provide GPU-accelerated visual effects that can be applied to any display object.
3

4
## Capabilities
5

6
### Base Filter Class
7

8
The foundation for all WebGL filters.
9

10
```typescript { .api }
11
/**
12
 * Base filter class for WebGL post-processing effects
13
 */
14
class Filter {
15
    /** Vertex shader source */
16
    vertexSrc: string;
17
    /** Fragment shader source */
18
    fragmentSrc: string;
19
    /** Uniform values */
20
    uniforms: any;
21
    /** Filter enabled state */
22
    enabled: boolean;
23
    /** Filter resolution */
24
    resolution: number;
25
    /** Multisample level */
26
    multisample: MSAA_QUALITY;
27
    /** Padding around filter area */
28
    padding: number;
29
    /** Auto-fit filter to bounds */
30
    autoFit: boolean;
31
    /** Legacy behavior */
32
    legacy: boolean;
33
    
34
    constructor(vertexSrc?: string, fragmentSrc?: string, uniforms?: any);
35
    
36
    /**
37
     * Apply filter
38
     * @param filterManager - Filter system
39
     * @param input - Input render texture
40
     * @param output - Output render texture
41
     * @param clearMode - Clear mode
42
     */
43
    apply(filterManager: FilterSystem, input: RenderTexture, output: RenderTexture, clearMode?: CLEAR_MODES): void;
44
}
45
```
46

47
### Built-in Filters
48

49
Ready-to-use filters for common effects.
50

51
```typescript { .api }
52
/**
53
 * Blur filter for gaussian blur effects
54
 */
55
class BlurFilter extends Filter {
56
    /** Blur amount */
57
    blur: number;
58
    /** Horizontal blur */
59
    blurX: number;
60
    /** Vertical blur */
61
    blurY: number;
62
    /** Blur quality */
63
    quality: number;
64
    
65
    constructor(strength?: number, quality?: number, resolution?: number, kernelSize?: number);
66
}
67

68
/**
69
 * Color matrix filter for color transformations
70
 */
71
class ColorMatrixFilter extends Filter {
72
    /** Color matrix */
73
    matrix: number[];
74
    /** Alpha value */
75
    alpha: number;
76
    
77
    constructor();
78
    
79
    /** Adjust brightness */
80
    brightness(b: number, multiply?: boolean): void;
81
    
82
    /** Adjust contrast */
83
    contrast(amount: number, multiply?: boolean): void;
84
    
85
    /** Adjust saturation */
86
    saturate(amount?: number, multiply?: boolean): void;
87
    
88
    /** Desaturate (grayscale) */
89
    desaturate(): void;
90
    
91
    /** Adjust hue */
92
    hue(rotation: number, multiply?: boolean): void;
93
}
94

95
/**
96
 * Alpha filter for transparency effects
97
 */
98
class AlphaFilter extends Filter {
99
    /** Alpha value */
100
    alpha: number;
101
    
102
    constructor(alpha?: number);
103
}
104

105
/**
106
 * Displacement filter for distortion effects
107
 */
108
class DisplacementFilter extends Filter {
109
    /** Displacement sprite */
110
    maskSprite: Sprite;
111
    /** Displacement scale */
112
    scale: Point;
113
    
114
    constructor(sprite: Sprite, scale?: number);
115
}
116

117
/**
118
 * FXAA filter for anti-aliasing
119
 */
120
class FXAAFilter extends Filter {
121
    constructor();
122
}
123

124
/**
125
 * Noise filter for noise effects
126
 */
127
class NoiseFilter extends Filter {
128
    /** Noise amount */
129
    noise: number;
130
    /** Random seed */
131
    seed: number;
132
    
133
    constructor(noise?: number, seed?: number);
134
}
135
```
136

137
**Usage Examples:**
138

139
```typescript
140
import { BlurFilter, ColorMatrixFilter, Sprite } from "pixi.js";
141

142
// Apply blur filter
143
const sprite = Sprite.from('image.png');
144
const blurFilter = new BlurFilter();
145
blurFilter.blur = 10;
146
sprite.filters = [blurFilter];
147

148
// Animate blur (requires TickerPlugin)
149
// app.ticker.add(() => {
150
//     blurFilter.blur = Math.sin(Date.now() * 0.005) * 5 + 5;
151
// });
152

153
// Color effects
154
const colorFilter = new ColorMatrixFilter();
155
colorFilter.brightness(1.5, false);
156
colorFilter.contrast(1.2, false);
157
colorFilter.saturate(0.8, false);
158
sprite.filters = [colorFilter];
159

160
// Multiple filters
161
sprite.filters = [blurFilter, colorFilter];
162
```