pixijs-filters
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 optimization, pixi-filters community package. Triggers on: filters, BlurFilter, ColorMatrixFilter, DisplacementFilter, NoiseFilter, Filter.from, GLSL filter, pixi-filters, filterArea.
Security Assessment
About pixijs-filters
PixiJS Filters covers applying visual effects to PixiJS v8 containers through the filter pipeline. Effects attach by assigning a single filter, or an array of filters for chaining, to a display object's filters property. The built-in set includes AlphaFilter for uniform transparency, BlurFilter (with strength, quality, odd-numbered kernelSize, and repeatEdgePixels), ColorMatrixFilter (with presets such as brightness, contrast, and sepia plus direct matrix and alpha access), DisplacementFilter driven by a sprite and scale, and NoiseFilter parameterized by noise amount and seed.
For custom effects, Filter.from() wraps a GLSL or WGSL fragment shader while PixiJS supplies a default vertex shader; uniforms are grouped under resources with explicit types, and the filter system auto-provides the input texture uTexture. The skill is explicit about v8 conventions: fragment shaders use out vec4 finalColor (not gl_FragColor) and texture() (not texture2D), glProgram targets WebGL while gpuProgram targets WebGPU, and textures live in resources rather than uniforms. For more control, GlProgram or GpuProgram objects can be constructed directly and passed to the Filter constructor. Filter options such as resolution, padding, antialias, blendMode, blendRequired, and clipToViewport are documented, along with filterArea as an optimization to avoid per-frame bounds measurement, the enabled flag to toggle a filter, and sharing one filter instance across multiple display objects.
Community effects come from the pixi-filters package, imported per-name as pixi-filters/name (for example AdjustmentFilter and GlowFilter), which replaces the v7-era at-pixi filter packages. Advanced blend modes such as color-burn and overlay are filter-based, must be imported before use, require useBackBuffer on WebGL, and inherit Filter.defaultOptions (notably resolution), which can be set to inherit on high-DPI targets. The skill calls out common mistakes, including using the old positional Filter constructor and using too many filters without containerizing, since each filter incurs a framebuffer switch and bounds work. Related skills cover custom rendering, blend modes, and performance tuning.
FAQ
How do I apply a filter to a container or sprite?
Assign a single filter or an array of filters to the object's filters property, for example sprite.filters = [blur, colorMatrix]. Arrays chain the effects.
Which built-in filters are available?
AlphaFilter, BlurFilter, ColorMatrixFilter, DisplacementFilter, and NoiseFilter. ColorMatrixFilter additionally offers many presets such as brightness, contrast, sepia, and grayscale.
How do I write a custom filter in v8?
Use Filter.from() with a GLSL or WGSL fragment shader; PixiJS provides the default vertex shader. Use out vec4 finalColor and texture() (not gl_FragColor or texture2D), and place uniforms under resources with explicit types.
Why are my old at-pixi filter imports failing in v8?
Those packages are v7 only. In v8 the community filters package was restructured, so import per-name as pixi-filters/name, for example pixi-filters/glow.
How can I keep filters from hurting performance?
Set filterArea to known bounds to avoid per-frame measurement, share a single filter instance across objects, and containerize rather than stacking many filters, since each filter application requires a framebuffer switch and bounds work.
Install pixijs-filters
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
pixijs/pixijs-skills