Use this skill when applying visual effects to PixiJS v8 containers via the filter pipeline. Covers built-in filters (AlphaFilter, BlurFilter, ColorMatrixFilter, DisplacementFilter, NoiseFilter), custom Filter.from() with GLSL/WGSL, options (resolution, padding, antialias, blendRequired), filterArea

Attach visual effects by assigning one filter (or an array for chaining) to container.filters . Built in filters cover blur, color matrix, displacement, alpha, and noise; custom filters wrap a GLSL/WGSL fragment shader via Filter.from(...) . Quick Start Related skills: pixijs custom rendering (shader internals, uniform types), pixijs blend modes (composing with filters), pixijs performance (filter tuning, filterArea). Core Patterns Built in filters Custom filter with Filter.from() The simplest way to create a custom filter. Only a fragment shader is needed; PixiJS provides a default vertex shader. For more control, construct GlProgram / GpuProgram objects directly: Key points: Use out vec4 finalColor in fragment shaders, not gl FragColor (GLSL ES 3.0). Use texture() to sample, not texture2D . glProgram for WebGL, gpuProgram for WebGPU. Omitting one skips that renderer. Textures go in resources , not uniforms. The filter system auto provides uTexture (the input). Access uniform values via filter.resources.{groupName}.uniforms.{name} . Filter options Community filters (pixi filters) For v8, community filters use pixi filters/{name} imports, not the old @pixi/filter packages. Advanced blend modes Advanced blend modes ( color burn , overlay , hard light , etc.) are powered by the filter system and must be imported before use. They also require useBackBuffer: true on WebGL; see the pixijs blend modes skill for the full list. Advanced blend modes are filter based, so they inherit Filter.defaultOptions , whose resolution defaults to 1 . On high DPI render targets this can make a blend mode look clipped, scaled, or only partially applied. Set Filter.defaultOptions.resolution = 'inherit' before creating the affected objects to render at the render target resolution, at higher memory and runtime cost: Common Mistakes [CRITICAL] Using old Filter constructor (vertex, fragment, uniforms) Wrong: Correct: v8 uses an options object. Shaders must be wrapped in GlProgram.from() or GpuProgram.from() . Uniforms are grouped in resources with explicit types. Textures are resources, not uniforms. [HIGH] Using @pixi/filter \ packages for v8 Wrong: Correct: @pixi/filter packages are v7 only. For v8, the community filters package restructured to pixi filters/{name} . [HIGH] Using too many filters without containerizing Each filter application requires a framebuffer switch, bounds measurement, and render to texture pass. One filter on a parent container is much cheaper than the same filter on each child. Wrong: Correct: [HIGH] Using a blendRequired filter without useBackBuffer on WebGL Custom filters and most advanced community filters that set blendRequired: true sample the back buffer. On WebGL that only works if the renderer was initialized with useBackBuffer: true ; otherwise PixiJS logs a warning and the filter silently falls back: WebGPU enables the back buffer unconditionally, so this only affects WebGL. [MEDIUM] Not setting filterArea for known size containers Without filterArea , PixiJS measures the container bounds every frame via getGlobalBounds() , which recursively walks all children. For containers with known dimensions, set filterArea to avoid this cost: API Reference [Filter](https://pixijs.download/release/docs/filters.Filter.html.md) [AlphaFilter](https://pixijs.download/release/docs/filters.AlphaFilter.html.md) [BlurFilter](https://pixijs.download/release/docs/filters.BlurFilter.html.md) [BlurFilterPass](https://pixijs.download/release/docs/filters.BlurFilterPass.html.md) [ColorMatrixFilter](https://pixijs.download/release/docs/filters.ColorMatrixFilter.html.md) [DisplacementFilter](https://pixijs.download/release/docs/filters.DisplacementFilter.html.md) [NoiseFilter](https://pixijs.download/release/docs/filters.NoiseFilter.html.md) [FilterSystem](https://pixijs.download/release/docs/rendering.FilterSystem.html.md)

pixijs-filters