PixiJS Filters

 

Compatibility

Depending on your version of PixiJS, you'll need to figure out which major version of PixiJS Filters to use.

| PixiJS | PixiJS Filters | |--------|----------------| | v5.x | v3.x | | v6.x | v4.x | | v7.x | v5.x | | v8.x | v6.x |

Installation

Installation is available using NPM:

npm install pixi-filters

Alternatively, you can use a CDN such as JSDelivr:

<script src="https://cdn.jsdelivr.net/npm/pixi-filters@latest/dist/browser/pixi-filters.min.js"></script>

If all else failes, you can manually download the bundled file from the releases section and include it in your project.

Demo

View the PixiJS Filters Demo to interactively play with filters to see how they work.

Filters

| Filter | Preview | |----------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------| | AdjustmentFilter<br>pixi-filters/adjustment<br>[View demo][Adjustment_demo] | !adjustment | | AdvancedBloomFilter<br>pixi-filters/advanced-bloom<br>[View demo][AdvancedBloom_demo] | !advanced-bloom | | AsciiFilter<br>pixi-filters/ascii<br>[View demo][Ascii_demo] | !ascii | | BackdropBlurFilter<br>pixi-filters/backdrop-blur<br>[View demo][BackdropBlur_demo] | !backdrop-blur | | BevelFilter<br>pixi-filters/bevel<br>[View demo][Bevel_demo] | !bevel | | BloomFilter<br>pixi-filters/bloom<br>[View demo][Bloom_demo] | !bloom | | BulgePinchFilter<br>pixi-filters/bulge-pinch<br>[View demo][BulgePinch_demo] | !bulge-pinch | | ColorGradientFilter<br>pixi-filters/color-gradient<br>[View demo][ColorGradient_demo] | !color-gradient | | ColorMapFilter<br>pixi-filters/color-map<br>[View demo][ColorMap_demo] | !color-map | | ColorOverlayFilter<br>pixi-filters/color-overlay<br>[View demo][ColorOverlay_demo] | !color-overlay | | ColorReplaceFilter<br>pixi-filters/color-replace<br>[View demo][ColorReplace_demo] | !color-replace | | ConvolutionFilter<br>pixi-filters/convolution<br>[View demo][Convolution_demo] | !convolution | | CrossHatchFilter<br>pixi-filters/cross-hatch<br>[View demo][CrossHatch_demo] | !cross-hatch | | CRTFilter<br>pixi-filters/crt<br>[View demo][CRT_demo] | !crt | | DotFilter<br>pixi-filters/dot<br>[View demo][Dot_demo] | !dot | | DropShadowFilter<br>pixi-filters/drop-shadow<br>[View demo][DropShadow_demo] | !drop-shadow | | EmbossFilter<br>pixi-filters/emboss<br>[View demo][Emboss_demo] | !emboss | | GlitchFilter<br>pixi-filters/glitch<br>[View demo][Glitch_demo] | !glitch | | GlowFilter<br>pixi-filters/glow<br>[View demo][Glow_demo] | !glow | | GodrayFilter<br>pixi-filters/godray<br>[View demo][Godray_demo] | !godray | | GrayscaleFilter<br>pixi-filters/grayscale<br>[View demo][Grayscale_demo] | !grayscale | | HslAdjustmentFilter<br>pixi-filters/hsl-adjustment<br>[View demo][HslAdjustment_demo] | !hsl-adjustment | | KawaseBlurFilter<br>pixi-filters/kawase-blur<br>[View demo][KawaseBlur_demo] | !kawase-blur | | MotionBlurFilter<br>pixi-filters/motion-blur<br>[View demo][MotionBlur_demo] | !motion-blur | | MultiColorReplaceFilter<br>pixi-filters/multi-color-replace<br>[View demo][MultiColorReplace_demo] | !multi-color-replace | | OldFilmFilter<br>pixi-filters/old-film<br>[View demo][OldFilm_demo] | !old-film | | OutlineFilter<br>pixi-filters/outline<br>[View demo][Outline_demo] | !outline | | PixelateFilter<br>pixi-filters/pixelate<br>[View demo][Pixelate_demo] | !pixelate | | RadialBlurFilter<br>pixi-filters/radial-blur<br>[View demo][RadialBlur_demo] | !radial-blur | | ReflectionFilter<br>pixi-filters/reflection<br>[View demo][Reflection_demo] | !reflection | | RGBSplitFilter<br>pixi-filters/rgb-split<br>[View demo][RGBSplit_demo] | !rgb split | | | ShockwaveFilter<br>pixi-filters/shockwave<br>[View demo][Shockwave_demo] | !shockwave | | SimpleLightmapFilter<br>pixi-filters/simple-lightmap<br>[View demo][SimpleLightmap_demo] | !simple-lightmap | | SimplexNoiseFilter<br>pixi-filters/simplex-noise<br>[View demo][SimplexNoise_demo] | !simplex-noise | | TiltShiftFilter<br>pixi-filters/tilt-shift<br>[View demo][TiltShift_demo] | !tilt-shift | | TwistFilter<br>pixi-filters/twist<br>[View demo][Twist_demo] | !twist | | ZoomBlurFilter<br>pixi-filters/zoom-blur<br>[View demo][ZoomBlur_demo] | !zoom-blur |

Built-In Filters

PixiJS has a handful of core filters that are built-in to the PixiJS library.

| Filter | Preview | |-----------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------| | AlphaFilter<br>[View demo][Alpha_demo] | !alpha | | BlurFilter<br>[View demo][Blur_demo] | !blur | | ColorMatrixFilter (contrast)<br>[View demo][ColorMatrix_demo] | !color-matrix-contrast | | ColorMatrixFilter (desaturate)<br>[View demo][ColorMatrix_demo] | !color-matrix-desaturate | | ColorMatrixFilter (kodachrome)<br>[View demo][ColorMatrix_demo] | !color-matrix-kodachrome | | ColorMatrixFilter (lsd)<br>[View demo][ColorMatrix_demo] | !color-matrix-lsd | | ColorMatrixFilter (negative)<br>[View demo][ColorMatrix_demo] | !color-matrix-negative | | ColorMatrixFilter (polaroid)<br>[View demo][ColorMatrix_demo] | !color-matrix-polaroid | | ColorMatrixFilter (predator)<br>[View demo][ColorMatrix_demo] | !color-matrix-predator | | ColorMatrixFilter (saturate)<br>[View demo][ColorMatrix_demo] | !color-matrix-saturate | | ColorMatrixFilter (sepia)<br>[View demo][ColorMatrix_demo] | !color-matrix-sepia | | DisplacementFilter<br>[View demo][Displacement_demo] | !displacement | | NoiseFilter<br>[View demo][Noise_demo] | !noise |

Building

Install all dependencies by simply running the following.

npm install

Build all filters, demo and screenshots by running the following:

npm run build

Watch all filters and demo (auto-rebuild upon src changes):

npm run watch

Documentation

API documention can be found here.

<!-- references --> [Adjustment_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=AdjustmentFilter [AdvancedBloom_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=AdvancedBloomFilter [Ascii_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=AsciiFilter [BackdropBlur_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=BackdropBlurFilter [Bevel_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=BevelFilter [Bloom_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=BloomFilter [BulgePinch_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=BulgePinchFilter [ColorGradient_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=ColorGradientFilter [ColorMap_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=ColorMapFilter [ColorOverlay_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=ColorOverlayFilter [ColorReplace_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=ColorReplaceFilter [Convolution_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=ConvolutionFilter [CrossHatch_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=CrossHatchFilter [CRT_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=CRTFilter [Dot_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=DotFilter [DropShadow_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=DropShadowFilter [Emboss_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=EmbossFilter [Glitch_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=GlitchFilter [Glow_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=GlowFilter [Godray_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=GodrayFilter [Grayscale_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=GrayscaleFilter [HslAdjustment_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=HslAdjustmentFilter [KawaseBlur_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=KawaseBlurFilter [MotionBlur_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=MotionBlurFilter [MultiColorReplace_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=MultiColorReplaceFilter [OldFilm_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=OldFilmFilter [Outline_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=OutlineFilter [Pixelate_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=PixelateFilter [RadialBlur_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=RadialBlurFilter [Reflection_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=ReflectionFilter [RGBSplit_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=RGBSplitFilter [Shockwave_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=ShockwaveFilter [SimpleLightmap_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=SimpleLightmapFilter [SimplexNoise_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=SimplexNoiseFilter [TiltShift_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=TiltShiftFilter [Twist_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=TwistFilter [ZoomBlur_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=ZoomBlurFilter [Alpha_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=AlphaFilter [Blur_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=BlurFilter [ColorMatrix_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=ColorMatrixFilter [Displacement_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=DisplacementFilter [Noise_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=NoiseFilter