/filters

Collection of community-authored custom display filters for PixiJS

Primary LanguageTypeScriptMIT LicenseMIT

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