doc22940 / pixi-filters

Collection of community-authored custom display filters for PixiJS

PixiJS Filters

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
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
ColorOverlayFilter @pixi/filter-color-overlay
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

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.