PixiJS Filters

Demo

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

Filters

All filters work with PixiJS v4.

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
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

Built-In Filters

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

Using NPM:

npm install pixi-filters

Building

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

Documentation

API documention can be found here.