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) overrides

Name Type Attributes 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



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

scale PIXI.Point

scaleX, scaleY for displacements


apply (filterManager, input, output, clearMode) void overrides

Applies the filter.

Name Type Description
filterManager PIXI.FilterSystem

The manager.

input PIXI.RenderTexture

The input target.

output PIXI.RenderTexture

The output target.



Inherited Properties

From class PIXI.Filter

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.

Default Value:
  • true

Sets the blend mode 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 (set by filter system)

The samples of the filter.

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.

The WebGL state the filter requires to render.

From class PIXI.Shader

Program that the shader uses.

uniforms Dict<any> readonly inherited

Shader uniform values, shortcut for uniformGroup.uniforms.