Click here to interactively play with filters to see how they work.

All filters work with PixiJS v4.

Filter	Preview
AsciiFilter @pixi/filter-ascii
AdvancedBloomFilter @pixi/filter-advanced-bloom
BloomFilter @pixi/filter-bloom
BulgePinchFilter @pixi/filter-bulge-pinch
ColorReplaceFilter @pixi/filter-color-replace
ConvolutionFilter @pixi/filter-convolution
CrossHatchFilter @pixi/filter-cross-hatch
DotFilter @pixi/filter-dot
DropShadowFilter @pixi/filter-drop-shadow
GlowFilter @pixi/filter-glow
Godray @pixi/filter-godray
EmbossFilter @pixi/filter-emboss
MultiColorReplaceFilter @pixi/filter-multi-color-replace
PixelateFilter @pixi/filter-pixelate
OutlineFilter @pixi/filter-outline
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
DisplacementFilter
BlurFilter
NoiseFilter
ColorMatrixFilter (contrast)
ColorMatrixFilter (desaturate)
ColorMatrixFilter (kodachrome)
ColorMatrixFilter (lsd)
ColorMatrixFilter (negative)
ColorMatrixFilter (polaroid)
ColorMatrixFilter (predator)
ColorMatrixFilter (saturate)
ColorMatrixFilter (sepia)

Using NPM:

npm install pixi-filters

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 by running the following:

npm run build

Build single filter by running the following:

npm run build -- --scope "@pixi/filter-emboss"

Build multiple filters where scope is a glob expression:

npm run build -- --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.