There are no dependencies for this project. It is a standalone project that does not depend on any other jars.
There are no modules declared in this project.
PixiJS Filters
![npm version](https://camo.githubusercontent.com/eae92f4512dd718098c15683c92a93465b8f86a74888d8e5c3a6bbe8a16e3ae1/68747470733a2f2f62616467652e667572792e696f2f6a732f706978692d66696c746572732e737667)
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](https://camo.githubusercontent.com/3bb5527ebf19b0dbb537aba87dc5fbd3e174aead71c998a75a3990c5c8687892/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f61646a7573746d656e742e706e673f763d32) |
AdvancedBloomFilter @pixi/filter-advanced-bloom |
![advanced-bloom](https://camo.githubusercontent.com/efedd1f159aa8e82757beda5820ffbf6eeddb7df24ca2c56ce96badb43b7cd85/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f616476616e6365642d626c6f6f6d2e706e673f763d32) |
AsciiFilter @pixi/filter-ascii |
![ascii](https://camo.githubusercontent.com/0a8287bec3e4e9afbf66d50917d528a68f67ce14724bcaf49fa89f9f5d63ec5e/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f61736369692e706e673f763d32) |
BevelFilter @pixi/filter-bevel |
![bevel](https://camo.githubusercontent.com/7fbda17a710bd9b853b1784f5b2b6f614ccae9c58659fbfdb9091ee196802d1c/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f626576656c2e706e673f763d32) |
BloomFilter @pixi/filter-bloom |
![bloom](https://camo.githubusercontent.com/c58b1c754d80d4490117d92f1bb8808b8159f80417d38b2eb648775ea46a3905/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f626c6f6f6d2e706e673f763d32) |
BulgePinchFilter @pixi/filter-bulge-pinch |
![bulge-pinch](https://camo.githubusercontent.com/4ef2fea3b521faee046c5dd89b966b43ce7c9c8783b34d22ca6d880fb546afa1/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f62756c67652d70696e63682e6769663f763d32) |
ColorMapFilter @pixi/filter-color-map |
![color-map](https://camo.githubusercontent.com/0b97e28dccbbf392b5ba3047a899f3d3fabde1f90025f5bbaf156b5e2620463e/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61702e706e673f763d32) |
ColorOverlayFilter @pixi/filter-color-overlay |
![color-overlay](https://camo.githubusercontent.com/e14f8aaab14ee0e813a7fd107fe3f3609ffc9cf534545bf746a7243b38a263c1/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6f7665726c61792e706e673f763d32) |
ColorReplaceFilter @pixi/filter-color-replace |
![color-replace](https://camo.githubusercontent.com/5d744b7dc4ec6727df7890372e09f1d348e62bd586d7db64de6c0c71f2e7c9ce/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d7265706c6163652e706e673f763d32) |
ConvolutionFilter @pixi/filter-convolution |
![convolution](https://camo.githubusercontent.com/1f1c37a45b13ab4c66344f4c85e9d3a7768b97d156c50f05147448b0ee110805/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6e766f6c7574696f6e2e706e673f763d32) |
CrossHatchFilter @pixi/filter-cross-hatch |
![cross-hatch](https://camo.githubusercontent.com/dab529f133a30889d0e1e631bf31161301563b72cf1fdf0bb69721a34b41a44c/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f63726f73732d68617463682e706e673f763d32) |
CRTFilter @pixi/filter-crt |
![crt](https://camo.githubusercontent.com/2c652d1a576bf35ca39cfa9384853586910059a55ab20277c8d302630cbf3b84/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f6372742e706e673f763d32) |
DotFilter @pixi/filter-dot |
![dot](https://camo.githubusercontent.com/b6ad87be84cc797ac0637fd8264fbc60ed2a501b84979fc9b781de876c3c69c1/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f646f742e706e673f763d32) |
DropShadowFilter @pixi/filter-drop-shadow |
![drop-shadow](https://camo.githubusercontent.com/91fae860864200e8fd217c7f3ded5bff25dba0395aee28f965305ae891fc20bc/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f64726f702d736861646f772e706e673f763d32) |
EmbossFilter @pixi/filter-emboss |
![emboss](https://camo.githubusercontent.com/48e6336fdb10d12fae8d371eaea20bd1818b3fe1bd477458dc88f72dc459ba33/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f656d626f73732e706e673f763d32) |
GlitchFilter @pixi/filter-glitch |
![glitch](https://camo.githubusercontent.com/be631afa5a03a8914c462ea5dc7b953c29a78699c5272964526b089f54c96a3a/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f676c697463682e706e673f763d31) |
GlowFilter @pixi/filter-glow |
![glow](https://camo.githubusercontent.com/53210db2caad82f122aa5e31ba6d9f5038d74ee39c49397b819cfaaf36d6cb26/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f676c6f772e706e673f763d32) |
Godray @pixi/filter-godray |
![godray](https://camo.githubusercontent.com/173fd5ddcba2076ce1080795a7a0e7a66d679865fc40c60be55a3899d7e87cf3/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f676f647261792e6769663f763d32) |
KawaseBlurFilter @pixi/filter-kawase-blur |
![kawase-blur](https://camo.githubusercontent.com/d4136cf1a2c4d0499d63b7edb5a4e7dffc8b9efdc96fbdb712d69e043e66cfe5/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f6b61776173652d626c75722e706e673f763d31) |
MotionBlurFilter @pixi/filter-motion-blur |
![motion-blur](https://camo.githubusercontent.com/d63c5eba19f043bbe0e6ce156b54f65f8a33db273cfcf43f0434203762950949/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f6d6f74696f6e2d626c75722e706e673f763d31) |
MultiColorReplaceFilter @pixi/filter-multi-color-replace |
![multi-color-replace](https://camo.githubusercontent.com/0a302f627326592cac17279630957af0e4bc62e48acd85701a1a7e9bc812cf86/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f6d756c74692d636f6c6f722d7265706c6163652e706e673f763d31) |
OldFilmFilter @pixi/filter-old-film |
![old-film](https://camo.githubusercontent.com/a6335a09202a06e1e6a6c12dc9b4ae2312fd56ea7e945c9df7117512f8b67f6c/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f6f6c642d66696c6d2e6769663f763d32) |
OutlineFilter @pixi/filter-outline |
![outline](https://camo.githubusercontent.com/e095309e6c58bbeb2782a66ecce8ecebff6dee6229527e1b7b3e25929016a9dd/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f6f75746c696e652e706e673f763d32) |
PixelateFilter @pixi/filter-pixelate |
![pixelate](https://camo.githubusercontent.com/e9e028a1738772ffa48bcb7aa381b977e929284bec3e5bf29e8f8a1abb226ec8/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f706978656c6174652e706e673f763d32) |
RadialBlurFilter @pixi/filter-radial-blur |
![radial-blur](https://camo.githubusercontent.com/b26ddd537e9376b18677cabbd9d4f7a5f6b95a78e6a2172e290b7e34994f9e14/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f72616469616c2d626c75722e706e673f763d32) |
ReflectionFilter @pixi/filter-reflection |
![reflection](https://camo.githubusercontent.com/793e006e8bf76f8235dbf9c8dd2472c4698642ce65cddde47f4c163a98fc081a/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f7265666c656374696f6e2e706e673f763d32) |
RGBSplitFilter @pixi/filter-rgb |
![rgb split](https://camo.githubusercontent.com/4000f842406d03dba15be4692d7a41fa1966ad27f1a2da631d18207ffb4c1991/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f7267622e706e673f763d32) |
ShockwaveFilter @pixi/filter-shockwave |
![shockwave](https://camo.githubusercontent.com/28d17ce9f48d50421a8afd8ecc9400695769ed219add314d4ff0f8e3feb3edd0/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f73686f636b776176652e6769663f763d33) |
SimpleLightmapFilter @pixi/filter-simple-lightmap |
![simple-lightmap](https://camo.githubusercontent.com/01089f61e8885f7a207f7e62d4c98e9dba84b48eb952bd95b6d735aa150b66c3/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f73696d706c652d6c696768746d61702e706e673f763d32) |
TiltShiftFilter @pixi/filter-tilt-shift |
![tilt-shift](https://camo.githubusercontent.com/5cfe3136fc7457e454cd9cb02605af47246a9372f88b781e30bc1411cb14a9f4/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f74696c742d73686966742e706e673f763d32) |
TwistFilter @pixi/filter-twist |
![twist](https://camo.githubusercontent.com/5b4e0e2021eed665fc82bd0d173c1d8007e2eca695f537926758695991eb4066/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f74776973742e706e673f763d32) |
ZoomBlurFilter @pixi/filter-zoom-blur |
![zoom-blur](https://camo.githubusercontent.com/01f04e51a6a2a40cc63fd073dc7640d481f81a53b73ae4d1d70ffea6edc6e07b/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f7a6f6f6d2d626c75722e706e673f763d34) |
Built-In Filters
PixiJS has a handful of core filters that are built-in to the PixiJS library.
Filter |
Preview |
AlphaFilter |
![alpha](https://camo.githubusercontent.com/36bc76e7f45a654cb78ac019bb7efc5cbbfef8b2581442ce13547ee9327fa608/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f616c7068612e706e673f763d32) |
BlurFilter |
![blur](https://camo.githubusercontent.com/0d31cc2633ebaa27003b2b803b8e791acdc1c9eb07d5f07657eec6b3a573f4a2/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f626c75722e706e673f763d32) |
ColorMatrixFilter (contrast) |
![color-matrix-contrast](https://camo.githubusercontent.com/fa66ed5821d9c48573c67b20cb4d30fdcc7df8e84f011dfafde050f02d62c31c/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d636f6e74726173742e706e673f763d32) |
ColorMatrixFilter (desaturate) |
![color-matrix-desaturate](https://camo.githubusercontent.com/080db474b79a0ee80532a2c0199c1ab0a190aee99c15f716756db1f65d9051af/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d646573617475726174652e706e673f763d32) |
ColorMatrixFilter (kodachrome) |
![color-matrix-kodachrome](https://camo.githubusercontent.com/4e0f0e573ed2ca511436564e89c1448b16a13526a0c731eb57858c9d8515082b/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d6b6f64616368726f6d652e706e673f763d32) |
ColorMatrixFilter (lsd) |
![color-matrix-lsd](https://camo.githubusercontent.com/3694e3839a2f86ea7090aee99837b07b6a53500236faaf591248aab5f6a5d643/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d6c73642e706e673f763d32) |
ColorMatrixFilter (negative) |
![color-matrix-negative](https://camo.githubusercontent.com/376e49920ec0f0a7cb4c7b32b9675e8dafd2070d36615c135eb02b62c81a05e7/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d6e656761746976652e706e673f763d32) |
ColorMatrixFilter (polaroid) |
![color-matrix-polaroid](https://camo.githubusercontent.com/7ffdbbb715cb805093dc3fce8de33621d6d4ad5c26267f512dc0fa6f588fdc13/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d706f6c61726f69642e706e673f763d32) |
ColorMatrixFilter (predator) |
![color-matrix-predator](https://camo.githubusercontent.com/ad7f610af553d44337d194e9b4eacaa034d5658eee7290daa4b8ecce647f19b9/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d7072656461746f722e706e673f763d32) |
ColorMatrixFilter (saturate) |
![color-matrix-saturate](https://camo.githubusercontent.com/7a3977aa1863ef3df2c07ea1c95450b9bf7b66d4d28058fe4e07ff1d08497c00/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d73617475726174652e706e673f763d32) |
ColorMatrixFilter (sepia) |
![color-matrix-sepia](https://camo.githubusercontent.com/09327cf759454834bd98a03f7e9bd0a3dd4e21b6f57e9faafd7fc2c7a7fc4a2d/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d73657069612e706e673f763d32) |
DisplacementFilter |
![displacement](https://camo.githubusercontent.com/6ad7756ae8325c1561667c5e5064a91ba2f01e5670daef6eb763757352895a03/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f646973706c6163656d656e742e706e673f763d32) |
NoiseFilter |
![noise](https://camo.githubusercontent.com/9f283442477cf14ee23129370026f178691cd493840d7faf0ad07992df20abe3/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f6e6f6973652e706e673f763d32) |
Installation
Installation is available using NPM:
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.
Build all filters, demo and screenshots by running the following:
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):
Build all filters in dev-mode (un-minified):
Documentation
API documention can be found here.