ljq007 / filters

Collection of community-authored custom display filters for PixiJS

PixiJS Filters

Demo

View the PixiJS Filters Demo to interactively play with filters to see how they work.

Filters

All filters work with PixiJS v7.

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

Built-In Filters

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

Filter	Preview
AlphaFilter View demo
BlurFilter View demo
ColorMatrixFilter (contrast) View demo
ColorMatrixFilter (desaturate) View demo
ColorMatrixFilter (kodachrome) View demo
ColorMatrixFilter (lsd) View demo
ColorMatrixFilter (negative) View demo
ColorMatrixFilter (polaroid) View demo
ColorMatrixFilter (predator) View demo
ColorMatrixFilter (saturate) View demo
ColorMatrixFilter (sepia) View demo
DisplacementFilter View demo
NoiseFilter View demo

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

Watch all filters and demo (auto-rebuild upon src changes):

npm run watch

Documentation

API documention can be found here.