PixiJS

Class: DisplacementFilter

PIXI.filters.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

DisplacementFilter.ts:30
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

Extends

Members

map PIXI.Texture

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

scale PIXI.Point

scaleX, scaleY for displacements

Methods

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

DisplacementFilter.ts:62

Applies the filter.

Name Type Description
filterManager PIXI.FilterSystem

The manager.
input PIXI.RenderTexture

The input target.
output PIXI.RenderTexture

The output target.
clearMode PIXI.CLEAR_MODES

clearMode.

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

blendMode PIXI.BLEND_MODES inherited

Sets the blend mode of the filter.

Default Value:
  • PIXI.BLEND_MODES.NORMAL

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)

multisample PIXI.MSAA_QUALITY inherited

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.

state PIXI.State inherited

The WebGL state the filter requires to render.

From class PIXI.Shader

program PIXI.Program inherited

Program that the shader uses.

uniforms Dict<any> readonly inherited

Shader uniform values, shortcut for uniformGroup.uniforms.