pixi-filters

PixiJS Filters

PixiJS v7 optional display filters.

Filters include:

Name	Package	Demo
AdjustmentFilter	@pixi/filter-adjustment	View demo
AdvancedBloomFilter	@pixi/filter-advanced-bloom	View demo
AsciiFilter	@pixi/filter-ascii	View demo
BevelFilter	@pixi/filter-bevel	View demo
BloomFilter	@pixi/filter-bloom	View demo
BulgePinchFilter	@pixi/filter-bulge-pinch	View demo
ColorMapFilter	@pixi/filter-color-map	View demo
ColorOverlayFilter	@pixi/filter-color-overlay	View demo
ColorReplaceFilter	@pixi/filter-color-replace	View demo
ConvolutionFilter	@pixi/filter-convolution	View demo
CrossHatchFilter	@pixi/filter-cross-hatch	View demo
CRTFilter	@pixi/filter-crt	View demo
DotFilter	@pixi/filter-dot	View demo
DropShadowFilter	@pixi/filter-drop-shadow	View demo
EmbossFilter	@pixi/filter-emboss	View demo
GlitchFilter	@pixi/filter-glitch	View demo
GlowFilter	@pixi/filter-glow	View demo
GodrayFilter	@pixi/filter-godray	View demo
GrayscaleFilter	@pixi/filter-grayscale	View demo
KawaseBlurFilter	@pixi/filter-kawase-blur	View demo
MotionBlurFilter	@pixi/filter-motion-blur	View demo
MultiColorFilter	@pixi/filter-multi-color-replace	View demo
OldFilmFilter	@pixi/filter-old-film	View demo
OutlineFilter	@pixi/filter-outline	View demo
PixelateFilter	@pixi/filter-pixelate	View demo
RadialBlurFilter	@pixi/filter-radial-blur	View demo
ReflectionFilter	@pixi/filter-reflection	View demo
RGBSplitFilter	@pixi/filter-rgb	View demo
ShockwaveFilter	@pixi/filter-shockwave	View demo
SimpleLightmapFilter	@pixi/filter-simple-lightmap	View demo
TiltShiftFilter	@pixi/filter-tilt-shift	View demo
TwistFilter	@pixi/filter-twist	View demo
ZoomBlurFilter	@pixi/filter-zoom-blur	View demo

Examples

View the PixiJS Filters Demo to interactively play with filters to see how they work.

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.