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:

``bash
npm install pixi-filters
`

Alternatively, you can use a CDN such as JSDelivr:

`html

`

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
_pixi-filters/adjustment_
[View demo][Adjustment_demo] | !adjustment |
| AdvancedBloomFilter
_pixi-filters/advanced-bloom_
[View demo][AdvancedBloom_demo] | !advanced-bloom |
| AsciiFilter
_pixi-filters/ascii_
[View demo][Ascii_demo] | !ascii |
| BackdropBlurFilter
_pixi-filters/backdrop-blur_
[View demo][BackdropBlur_demo] | !backdrop-blur |
| BevelFilter
_pixi-filters/bevel_
[View demo][Bevel_demo] | !bevel |
| BloomFilter
_pixi-filters/bloom_
[View demo][Bloom_demo] | !bloom |
| BulgePinchFilter
_pixi-filters/bulge-pinch_
[View demo][BulgePinch_demo] | !bulge-pinch |
| ColorGradientFilter
_pixi-filters/color-gradient_
[View demo][ColorGradient_demo] | !color-gradient |
| ColorMapFilter
_pixi-filters/color-map_
[View demo][ColorMap_demo] | !color-map |
| ColorOverlayFilter
_pixi-filters/color-overlay_
[View demo][ColorOverlay_demo] | !color-overlay |
| ColorReplaceFilter
_pixi-filters/color-replace_
[View demo][ColorReplace_demo] | !color-replace |
| ConvolutionFilter
_pixi-filters/convolution_
[View demo][Convolution_demo] | !convolution |
| CrossHatchFilter
_pixi-filters/cross-hatch_
[View demo][CrossHatch_demo] | !cross-hatch |
| CRTFilter
_pixi-filters/crt_
[View demo][CRT_demo] | !crt |
| DotFilter
_pixi-filters/dot_
[View demo][Dot_demo] | !dot |
| DropShadowFilter
_pixi-filters/drop-shadow_
[View demo][DropShadow_demo] | !drop-shadow |
| EmbossFilter
_pixi-filters/emboss_
[View demo][Emboss_demo] | !emboss |
| GlitchFilter
_pixi-filters/glitch_
[View demo][Glitch_demo] | !glitch |
| GlowFilter
_pixi-filters/glow_
[View demo][Glow_demo] | !glow |
| GodrayFilter
_pixi-filters/godray_
[View demo][Godray_demo] | !godray |
| GrayscaleFilter
_pixi-filters/grayscale_
[View demo][Grayscale_demo] | !grayscale |
| HslAdjustmentFilter
_pixi-filters/hsl-adjustment_
[View demo][HslAdjustment_demo] | !hsl-adjustment |
| KawaseBlurFilter
_pixi-filters/kawase-blur_
[View demo][KawaseBlur_demo] | !kawase-blur |
| MotionBlurFilter
_pixi-filters/motion-blur_
[View demo][MotionBlur_demo] | !motion-blur |
| MultiColorReplaceFilter
_pixi-filters/multi-color-replace_
[View demo][MultiColorReplace_demo] | !multi-color-replace |
| OldFilmFilter
_pixi-filters/old-film_
[View demo][OldFilm_demo] | !old-film |
| OutlineFilter
_pixi-filters/outline_
[View demo][Outline_demo] | !outline |
| PixelateFilter
_pixi-filters/pixelate_
[View demo][Pixelate_demo] | !pixelate |
| RadialBlurFilter
_pixi-filters/radial-blur_
[View demo][RadialBlur_demo] | !radial-blur |
| ReflectionFilter
_pixi-filters/reflection_
[View demo][Reflection_demo] | !reflection |
| RGBSplitFilter
_pixi-filters/rgb-split_
[View demo][RGBSplit_demo] | !rgb split | |
| ShockwaveFilter
_pixi-filters/shockwave_
[View demo][Shockwave_demo] | !shockwave |
| SimpleLightmapFilter
_pixi-filters/simple-lightmap_
[View demo][SimpleLightmap_demo] | !simple-lightmap |
| SimplexNoiseFilter
_pixi-filters/simplex-noise_
[View demo][SimplexNoise_demo] | !simplex-noise |
| TiltShiftFilter
_pixi-filters/tilt-shift_
[View demo][TiltShift_demo] | !tilt-shift |
| TwistFilter
_pixi-filters/twist_
[View demo][Twist_demo] | !twist |
| ZoomBlurFilter
_pixi-filters/zoom-blur_
[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
[View demo][Alpha_demo] | !alpha |
| BlurFilter
[View demo][Blur_demo] | !blur |
| ColorMatrixFilter (contrast)
[View demo][ColorMatrix_demo] | !color-matrix-contrast |
| ColorMatrixFilter (desaturate)
[View demo][ColorMatrix_demo] | !color-matrix-desaturate |
| ColorMatrixFilter (kodachrome)
[View demo][ColorMatrix_demo] | !color-matrix-kodachrome |
| ColorMatrixFilter (lsd)
[View demo][ColorMatrix_demo] | !color-matrix-lsd |
| ColorMatrixFilter (negative)
[View demo][ColorMatrix_demo] | !color-matrix-negative |
| ColorMatrixFilter (polaroid)
[View demo][ColorMatrix_demo] | !color-matrix-polaroid |
| ColorMatrixFilter (predator)
[View demo][ColorMatrix_demo] | !color-matrix-predator |
| ColorMatrixFilter (saturate)
[View demo][ColorMatrix_demo] | !color-matrix-saturate |
| ColorMatrixFilter (sepia)
[View demo][ColorMatrix_demo] | !color-matrix-sepia |
| DisplacementFilter
[View demo][Displacement_demo] | !displacement |
| NoiseFilter
[View demo][Noise_demo] | !noise |

Building

Install all dependencies by simply running the following.

`bash
npm install
`

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

`bash
npm run build
`

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

`bash
npm run watch
``

Documentation

API documention can be found here.

[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