Home

Awesome

PixiJS Filters

Node.js CI npm version

Compatibility

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

PixiJSPixiJS Filters
v5.xv3.x
v6.xv4.x
v7.xv5.x
v8.xv6.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

FilterPreview
AdjustmentFilter<br>pixi-filters/adjustment<br>View demoadjustment
AdvancedBloomFilter<br>pixi-filters/advanced-bloom<br>View demoadvanced-bloom
AsciiFilter<br>pixi-filters/ascii<br>View demoascii
BackdropBlurFilter<br>pixi-filters/backdrop-blur<br>View demobackdrop-blur
BevelFilter<br>pixi-filters/bevel<br>View demobevel
BloomFilter<br>pixi-filters/bloom<br>View demobloom
BulgePinchFilter<br>pixi-filters/bulge-pinch<br>View demobulge-pinch
ColorGradientFilter<br>pixi-filters/color-gradient<br>View democolor-gradient
ColorMapFilter<br>pixi-filters/color-map<br>View democolor-map
ColorOverlayFilter<br>pixi-filters/color-overlay<br>View democolor-overlay
ColorReplaceFilter<br>pixi-filters/color-replace<br>View democolor-replace
ConvolutionFilter<br>pixi-filters/convolution<br>View democonvolution
CrossHatchFilter<br>pixi-filters/cross-hatch<br>View democross-hatch
CRTFilter<br>pixi-filters/crt<br>View democrt
DotFilter<br>pixi-filters/dot<br>View demodot
DropShadowFilter<br>pixi-filters/drop-shadow<br>View demodrop-shadow
EmbossFilter<br>pixi-filters/emboss<br>View demoemboss
GlitchFilter<br>pixi-filters/glitch<br>View demoglitch
GlowFilter<br>pixi-filters/glow<br>View demoglow
GodrayFilter<br>pixi-filters/godray<br>View demogodray
GrayscaleFilter<br>pixi-filters/grayscale<br>View demograyscale
HslAdjustmentFilter<br>pixi-filters/hsl-adjustment<br>View demohsl-adjustment
KawaseBlurFilter<br>pixi-filters/kawase-blur<br>View demokawase-blur
MotionBlurFilter<br>pixi-filters/motion-blur<br>View demomotion-blur
MultiColorReplaceFilter<br>pixi-filters/multi-color-replace<br>View demomulti-color-replace
OldFilmFilter<br>pixi-filters/old-film<br>View demoold-film
OutlineFilter<br>pixi-filters/outline<br>View demooutline
PixelateFilter<br>pixi-filters/pixelate<br>View demopixelate
RadialBlurFilter<br>pixi-filters/radial-blur<br>View demoradial-blur
ReflectionFilter<br>pixi-filters/reflection<br>View demoreflection
RGBSplitFilter<br>pixi-filters/rgb-split<br>View demorgb split
ShockwaveFilter<br>pixi-filters/shockwave<br>View demoshockwave
SimpleLightmapFilter<br>pixi-filters/simple-lightmap<br>View demosimple-lightmap
TiltShiftFilter<br>pixi-filters/tilt-shift<br>View demotilt-shift
TwistFilter<br>pixi-filters/twist<br>View demotwist
ZoomBlurFilter<br>pixi-filters/zoom-blur<br>View demozoom-blur

Built-In Filters

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

FilterPreview
AlphaFilter<br>View demoalpha
BlurFilter<br>View demoblur
ColorMatrixFilter (contrast)<br>View democolor-matrix-contrast
ColorMatrixFilter (desaturate)<br>View democolor-matrix-desaturate
ColorMatrixFilter (kodachrome)<br>View democolor-matrix-kodachrome
ColorMatrixFilter (lsd)<br>View democolor-matrix-lsd
ColorMatrixFilter (negative)<br>View democolor-matrix-negative
ColorMatrixFilter (polaroid)<br>View democolor-matrix-polaroid
ColorMatrixFilter (predator)<br>View democolor-matrix-predator
ColorMatrixFilter (saturate)<br>View democolor-matrix-saturate
ColorMatrixFilter (sepia)<br>View democolor-matrix-sepia
DisplacementFilter<br>View demodisplacement
NoiseFilter<br>View demonoise

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