Click here to interactively play with filters to see how they work.
All filters work with PixiJS v4.
| 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 |
 |
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 is available using NPM:
npm install pixi-filtersAlternatively, you can use a CDN such as JSDelivr:
<script src="https://cdn.jsdelivr.net/npm/pixi-filters@2.6.1/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.
PixiJS Filters uses Lerna under-the-hood to build all of the filters separately. Install all dependencies by simply running the following.
npm installBuild all filters, demo and screenshots by running the following:
npm run buildBuild 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 watchBuild all filters in dev-mode (un-minified):
npm run build:devAPI documention can be found here.