Collection of community-authored custom display filters for PixiJS
Click here to interactively play with filters to see how they work.
All filters work with PixiJS v5.
| Filter | Preview |
|---|---|
| AdjustmentFilter
@pixi/filter-adjustment | |
| AdvancedBloomFilter
@pixi/filter-advanced-bloom | |
| AsciiFilter
@pixi/filter-ascii | |
| BevelFilter
@pixi/filter-bevel | |
| BloomFilter
@pixi/filter-bloom | |
| BulgePinchFilter
@pixi/filter-bulge-pinch | |
| ColorMapFilter
@pixi/filter-color-map | |
| ColorOverlayFilter
@pixi/filter-color-overlay | |
| ColorReplaceFilter
@pixi/filter-color-replace | |
| ConvolutionFilter
@pixi/filter-convolution | |
| CrossHatchFilter
@pixi/filter-cross-hatch | |
| CRTFilter
@pixi/filter-crt | |
| DotFilter
@pixi/filter-dot | |
| DropShadowFilter
@pixi/filter-drop-shadow| |
| EmbossFilter
@pixi/filter-emboss | |
| GlitchFilter
@pixi/filter-glitch | |
| GlowFilter
@pixi/filter-glow | |
| Godray
@pixi/filter-godray | |
| KawaseBlurFilter
@pixi/filter-kawase-blur | |
| MotionBlurFilter
@pixi/filter-motion-blur | |
| MultiColorReplaceFilter
@pixi/filter-multi-color-replace | |
| OldFilmFilter
@pixi/filter-old-film | |
| OutlineFilter
@pixi/filter-outline | |
| PixelateFilter
@pixi/filter-pixelate | |
| RadialBlurFilter
@pixi/filter-radial-blur | |
| ReflectionFilter
@pixi/filter-reflection | |
| RGBSplitFilter
@pixi/filter-rgb | |
| ShockwaveFilter
@pixi/filter-shockwave | |
| SimpleLightmapFilter
@pixi/filter-simple-lightmap | |
| TiltShiftFilter
@pixi/filter-tilt-shift | |
| TwistFilter
@pixi/filter-twist | |
| ZoomBlurFilter
@pixi/filter-zoom-blur | |
PixiJS has a handful of core filters that are built-in to the PixiJS library.
| Filter | Preview |
|---|---|
| AlphaFilter | |
| BlurFilter |
|
| ColorMatrixFilter (contrast) |
|
| ColorMatrixFilter (desaturate) |
|
| ColorMatrixFilter (kodachrome) |
|
| ColorMatrixFilter (lsd) |
|
| ColorMatrixFilter (negative) |
|
| ColorMatrixFilter (polaroid) |
|
| ColorMatrixFilter (predator) |
|
| ColorMatrixFilter (saturate) |
|
| ColorMatrixFilter (sepia) |
|
| DisplacementFilter |
|
| NoiseFilter |
|
Installation is available using NPM:
npm install pixi-filters
Alternatively, you can use a CDN such as JSDelivr:
If all else failes, you can manually download the bundled file from the releases section and include it in your project.
PixiJS Filters uses Lerna under-the-hood to build all of the filters separately. Install all dependencies by simply running the following.
npm install
Build all filters, demo and screenshots by running the following:
npm run build
Build single filter by running the following:
npm run build:prod -- --scope "@pixi/filter-emboss"
Build multiple filters where scope is a glob expression:
npm run build:prod -- --scope "{@pixi/filter-emboss,@pixi/filter-glow}"
Watch all filters (auto-rebuild upon src changes):
npm run watch
Build all filters in dev-mode (un-minified):
npm run build:dev
API documention can be found here.