PixiJS Filters

Node.js CI npm version

Demo

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

Filters

All filters work with PixiJS v5.

Filter Preview
AdjustmentFilter
@pixi/filter-adjustment		 adjustment
AdvancedBloomFilter
@pixi/filter-advanced-bloom		 advanced-bloom
AsciiFilter
@pixi/filter-ascii		 ascii
BevelFilter
@pixi/filter-bevel		 bevel
BloomFilter
@pixi/filter-bloom		 bloom
BulgePinchFilter
@pixi/filter-bulge-pinch		 bulge-pinch
ColorMapFilter
@pixi/filter-color-map		 color-map
ColorOverlayFilter
@pixi/filter-color-overlay		 color-overlay
ColorReplaceFilter
@pixi/filter-color-replace		 color-replace
ConvolutionFilter
@pixi/filter-convolution		 convolution
CrossHatchFilter
@pixi/filter-cross-hatch		 cross-hatch
CRTFilter
@pixi/filter-crt		 crt
DotFilter
@pixi/filter-dot		 dot
DropShadowFilter
@pixi/filter-drop-shadow		 drop-shadow
EmbossFilter
@pixi/filter-emboss		 emboss
GlitchFilter
@pixi/filter-glitch		 glitch
GlowFilter
@pixi/filter-glow		 glow
Godray
@pixi/filter-godray		 godray
KawaseBlurFilter
@pixi/filter-kawase-blur		 kawase-blur
MotionBlurFilter
@pixi/filter-motion-blur		 motion-blur
MultiColorReplaceFilter
@pixi/filter-multi-color-replace		 multi-color-replace
OldFilmFilter
@pixi/filter-old-film		 old-film
OutlineFilter
@pixi/filter-outline		 outline
PixelateFilter
@pixi/filter-pixelate		 pixelate
RadialBlurFilter
@pixi/filter-radial-blur		 radial-blur
ReflectionFilter
@pixi/filter-reflection		 reflection
RGBSplitFilter
@pixi/filter-rgb-split		 rgb split
ShockwaveFilter
@pixi/filter-shockwave		 shockwave
SimpleLightmapFilter
@pixi/filter-simple-lightmap		 simple-lightmap
TiltShiftFilter
@pixi/filter-tilt-shift		 tilt-shift
TwistFilter
@pixi/filter-twist		 twist
ZoomBlurFilter
@pixi/filter-zoom-blur		 zoom-blur

Built-In Filters

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

Filter Preview
AlphaFilter alpha
BlurFilter blur
ColorMatrixFilter (contrast) color-matrix-contrast
ColorMatrixFilter (desaturate) color-matrix-desaturate
ColorMatrixFilter (kodachrome) color-matrix-kodachrome
ColorMatrixFilter (lsd) color-matrix-lsd
ColorMatrixFilter (negative) color-matrix-negative
ColorMatrixFilter (polaroid) color-matrix-polaroid
ColorMatrixFilter (predator) color-matrix-predator
ColorMatrixFilter (saturate) color-matrix-saturate
ColorMatrixFilter (sepia) color-matrix-sepia
DisplacementFilter displacement
NoiseFilter noise

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/pixi-filters.js"></script>

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

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.

Powered by webdoc!