Class: DisplacementFilter


The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object.

You can use this filter to apply all manor of crazy warping effects. Currently the r property of the texture is used to offset the x and the g property of the texture is used to offset the y.

The way it works is it uses the values of the displacement map to look up the correct pixels to output. This means it's not technically moving the original. Instead, it's starting at the output and asking "which pixel from the original goes here". For example, if a displacement map pixel has red = 1 and the filter scale is 20, this filter will output the pixel approximately 20 pixels to the right of the original.

new PIXI.filters.DisplacementFilter (sprite, scale)

Name Type Description
sprite PIXI.Sprite

The sprite used for the displacement map. (make sure its added to the scene!)

scale number optional

The scale of the displacement



autoFit boolean inherited

If enabled, PixiJS will fit the filter area into boundaries for better performance. Switch it off if it does not work for specific shader.

blendMode number inherited

Sets the blendmode of the filter

Default Value:

enabled boolean inherited

If enabled is true the filter is applied, if false it will not.

legacy boolean readonly inherited

Legacy filters use position and uvs from attributes

The texture used for the displacement map. Must be power of 2 sized texture.

padding number inherited

The padding of the filter. Some filters require extra space to breath such as a blur. Increasing this will add extra width and height to the bounds of the object that the filter is applied to.

resolution number inherited

The resolution of the filter. Setting this to be lower will lower the quality but increase the performance of the filter.

scale PIXI.Point

scaleX, scaleY for displacements

The WebGL state the filter requires to render

uniforms object readonly inherited

Shader uniform values, shortcut for uniformGroup.uniforms


apply (filterManager, input, output, clear) overrides

Applies the filter.

Name Type Description

The manager.

input PIXI.RenderTexture

The input target.

output PIXI.RenderTexture

The output target.

clear boolean

Should the output be cleared before rendering to it.