pixi-filters

by pixijs

Collection of community-authored custom display filters for PixiJS

474 Stars 101 Forks Last release: 8 months ago (v3.1.1) MIT License 251 Commits 32 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

PixiJS Filters

Build Status

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:


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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.