pixijs-filters
This skill teaches you how to leverage PixiJS v8's powerful filter system to enhance your 2D graphics with visual effects. You'll learn to apply filters to display objects, chain multiple effects together, and optimize performance when working with complex rendering scenarios. Master both built-in filters and custom implementations to bring professional polish to your WebGL and Canvas-based applications.
pixijs-filters lets you apply blur and other effects to display objects using the filters array. Create a filter instance (like BlurFilter), then assign it to your sprite or container's filters property. For example: `sprite.filters = [new PIXI.BlurFilter()]`. You can chain multiple filters together by adding them to the array, and pixijs-filters handles rendering them in sequence for professional visual effects.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-06-04
pixijs-filters lets you apply blur and other effects to display objects using the filters array. Create a filter instance (like BlurFilter), then assign it to your sprite or container's filters property. For example: `sprite.filters = [new PIXI.BlurFilter()]`. You can chain multiple filters together by adding them to the array, and pixijs-filters handles rendering them in sequence for professional visual effects.
Use it when
- pixijs-filters provides Filter.from() to create custom filters using GLSL or WGSL shaders.
- pixijs-filters performance depends on resolution and filterArea settings.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
pixijs/pixijs-skills/pixijs-filters
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I apply a blur filter in pixi.js?
pixijs-filters lets you apply blur and other effects to display objects using the filters array. Create a filter instance (like BlurFilter), then assign it to your sprite or container's filters property. For example: `sprite.filters = [new PIXI.BlurFilter()]`. You can chain multiple filters together by adding them to the array, and pixijs-filters handles rendering them in sequence for professional visual effects.
What is Filter.from and how do I use GLSL with pixijs-filters?
pixijs-filters provides Filter.from() to create custom filters using GLSL or WGSL shaders. This method lets you define vertex and fragment shaders for advanced effects beyond built-in filters. You specify your shader code and uniform values, then pixijs-filters compiles and applies them to your display objects. This is ideal for creating unique visual effects tailored to your application's needs.
How can I optimize filter performance with resolution and filterArea?
pixijs-filters performance depends on resolution and filterArea settings. Lower resolution reduces GPU load but may blur quality; filterArea defines the region affected by the filter. Adjust these properties based on your target performance. For complex scenes, use smaller filterArea values or lower resolution on non-critical filters. pixijs-filters also supports padding and antialias options to balance visual quality with rendering speed.
Can I chain multiple effects together in pixijs-filters?
Yes, pixijs-filters supports chaining by adding multiple filter instances to the filters array. For example: `sprite.filters = [new PIXI.BlurFilter(), new PIXI.ColorMatrixFilter()]`. pixijs-filters applies them in order, letting you combine blur, color adjustments, displacement maps, and custom shaders. Configure each filter's options like blend mode and padding independently for complete creative control.
What does the pixi-filters package offer beyond built-in filters?
The community pixi-filters package extends pixijs-filters with advanced effects like glow, adjustment, and specialized visual enhancements. It provides pre-built, optimized implementations of complex effects that would be time-consuming to create from scratch. Use it alongside pixijs-filters' core system to access professional-grade effects with minimal configuration.
How do I configure filter options like padding, antialias, and blend mode?
pixijs-filters lets you customize filter behavior through properties like padding (adds buffer around filterArea), antialias (smooths edges), and blendRequired (determines WebGL back buffer usage). Set these on your filter instance before applying it: `filter.padding = 10; filter.antialias = true`. These options control rendering quality, performance, and how filters interact with underlying content.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
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
```ts 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
(truncated - see the full file via the links below)
File tree — 1 file
skills/pixijs-filters/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Apply and chain visual effects to PixiJS display objects”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Pixi.js is a lightweight 2D rendering engine that leverages WebGL for blazing-fast graphics performance. Perfect for creating games, data visualizations, and interactive experiences, it provides a straightforward API for sprites, animations, and effects without the overhead of heavier frameworks.
This skill teaches you how to apply and control blend modes when compositing multiple display objects in PixiJS. You'll learn which blend modes suit different visual effects, how to layer graphics with proper color mixing, and when to optimize blending for performance. Perfect for creating advanced visual effects in 2D WebGL applications.
Master shader development for PixiJS v8 by writing custom GLSL and WGSL code with properly typed uniforms. This skill covers the shader pipeline, uniform management, and integration with PixiJS's rendering system to unlock advanced visual effects and performance optimization.
PixiJS is a high-performance 2D rendering engine built for the web. This skill collection guides agents through core PixiJS v8 concepts—from application initialization and scene management to advanced rendering techniques, custom shaders, and optimization strategies. Whether building interactive graphics or migrating from earlier versions, these skills provide structured pathways to solve rendering challenges efficiently.
This skill guides developers through upgrading PixiJS projects from version 7 to version 8, covering all breaking changes and API shifts. It provides a structured migration checklist and explains modern patterns for the fast WebGL-based 2D rendering engine. Perfect for teams maintaining graphics-heavy web applications.
This skill equips developers to build inclusive PixiJS applications by implementing screen reader compatibility and keyboard-driven interaction patterns. Master the accessibility layer for PixiJS v8's 2D rendering engine, ensuring your interactive graphics reach users with assistive technologies.
More skills pixijs-scene-gif (MIT) · pixijs-core-concepts (MIT) · pixijs-scene-dom-container (MIT) · pixijs-application (MIT) · pixijs-environments (MIT)