filters
filters copied to clipboard
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-split |
![]() |
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.