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:

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.