Index

PixiJS Filters

Build Status

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