Namespace: filters

filters

Filters provide additional shading and post-processing effects to any display object and its children they are attached to.

You attached filters to a display object using its filters array property.

import { Sprite, BlurFilter, HardMixBlend } from 'pixi.js';

const sprite = Sprite.from('myTexture.png');

// single filter
sprite.filters = new BlurFilter({ strength: 8 });

// or multiple filters
sprite.filters = [new BlurFilter({ strength: 8 }), new HardMixBlend()];

Pixi has a number of built-in filters which can be used in your game or application:

AlphaFilter - Applies alpha to the display object and any of its children.
BlurFilter - Applies a Gaussian blur to the display object.
BlurFilterPass - Applies a blur pass to an object.
ColorBurnBlend - Blend mode to add color burn to display objects.
ColorDodgeBlend - Blend mode to add color dodge to display objects.
ColorMatrixFilter - Transform the color channels by matrix multiplication.
DarkenBlend - Blend mode to darken display objects.
DisplacementFilter - Applies a displacement map to distort an object.
DivideBlend - Blend mode to divide display objects.
HardMixBlend - Blend mode to hard mix display objects.
LinearBurnBlend - Blend mode to add linear burn to display objects.
LinearDodgeBlend - Blend mode to add linear dodge to display objects.
LinearLightBlend - Blend mode to add linear light to display objects.
NoiseFilter - Applies random noise to an object.
PinLightBlend - Blend mode to add pin light to display objects.
SubtractBlend - Blend mode to subtract display objects.

For more available filters, check out the pixi-filters repository.

You can also check out the awesome Filter demo to see filters in action and combine them!

AlphaFilterOptions

Options for AlphaFilter

Name	Type	Default	Description
`alpha`	number	`1`	Amount of alpha from 0 to 1, where 0 is transparent

BlurFilterOptions

Options for BlurFilter

Name	Type	Default	Description
`kernelSize`	number	`5`	The kernelSize of the blur filter.Options: 5, 7, 9, 11, 13, 15.
`quality`	number	`4`	The quality of the blur filter.
`strength`	number	`8`	The strength of the blur filter.
`strengthX`	number	`8`	The horizontal strength of the blur.
`strengthY`	number	`8`	The vertical strength of the blur.

BlurFilterPassOptions

Options for BlurFilterPass

Name	Type	Description
`horizontal`	boolean	Do pass along the x-axis (`true`) or y-axis (`false`).

DisplacementFilterOptions

Options for DisplacementFilter

Name	Type	Description
`scale`	number \| PointData	The scale of the displacement.
`sprite`	Sprite	The texture used for the displacement map.

FilterOptions

The options to use when creating a new filter.

Name	Type	Description
`antialias`	FilterAntialias \| boolean	If true the filter will make use of antialiasing. Although it looks better this can have a performance impact. If set to 'inherit', the filter will detect the antialiasing of the render target and change this automatically. Definitely don't set this to true if the render target has antialiasing set to false. As it will antialias, but you won't see the difference. (default 'off') This can be a boolean or FilterAntialias string.
`blendMode`	BLEND_MODES	optional blend mode used by the filter when rendering (defaults to 'normal')
`blendRequired`	boolean	If this is set to true, the filter system will grab a snap shot of the area being rendered to and pass this into the shader. This is useful for blend modes that need to be aware of the pixels they are rendering to. Only use if you need that data, otherwise its an extra gpu copy you don't need! (default false)
`padding`	number	the amount of pixels to pad the container with when applying the filter. For example a blur extends the container out as it blurs, so padding is applied to ensure that extra detail is rendered as well without clipping occurring. (default 0)
`resolution`	number \| "inherit"	the resolution the filter should be rendered at. The lower the resolution, the more performant the filter will be, but the lower the quality of the output. (default 1) If 'inherit', the resolution of the render target is used. Consider lowering this for things like blurs filters

NoiseFilterOptions

Options for NoiseFilter

Name	Type	Description
`noise`	number	The amount of noise to apply, this value should be in the range (0, 1].
`seed`	number	A seed value to apply to the random noise generation. `Math.random()` is a good value to use.

Various blend modes supported by Pixi

5x4 matrix for transforming RGBA color and alpha

The antialiasing mode of the filter. This can be either:

on - the filter is always antialiased regardless of the render target settings
off - (default) the filter is never antialiased regardless of the render target settings
inherit - the filter uses the antialias settings of the render target

PixiJS

Namespace: filters

Classes

Interface Definitions

AlphaFilterOptions

Properties:

BlurFilterOptions

Properties:

BlurFilterPassOptions

Properties:

DisplacementFilterOptions

Properties:

FilterOptions

Properties:

NoiseFilterOptions

Properties:

Type Definitions

BLEND_MODES

ColorMatrix

FilterAntialias