pixi-filters

PixiJS Filters

PixiJS v7 optional display filters.

Filters include:

• 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
• GodrayFilter @pixi/filter-godray
• GrayscaleFilter @pixi/filter-grayscale
• KawaseBlurFilter @pixi/filter-kawase-blur
• MotionBlurFilter @pixi/filter-motion-blur
• MultiColorFilter @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

Examples

Click here for filter demos.

Installation

Using NPM:

npm install pixi-filters

Using Yarn:

yarn add pixi-filters

Usage

Bundler (Rollup, Webpack, etc)

Use imports to grab the specific filter to use.

import { DotFilter } from 'pixi-filters';

const filter = new DotFilter();

Browser

Filters are automatically added to the PIXI.filters global namespace.

<script src="pixi.min.js"></script>
<script src="pixi-filters.js"></script>
<script>
    const filter = new PIXI.filters.DotFilter();
</script>

Documentation

API documention can be found here.