pixi.js
    Preparing search index...

    Class DisplacementFilter

    A filter that applies a displacement map effect using a sprite's texture.

    The DisplacementFilter uses another texture (from a sprite) as a displacement map, where the red and green channels of each pixel in the map determine how the corresponding pixel in the filtered object should be offset:

    • Red channel controls horizontal displacement
    • Green channel controls vertical displacement

    Common use cases:

    • Creating ripple or wave effects
    • Distorting images dynamically
    • Implementing heat haze effects
    • Creating transition effects
    import { Sprite, DisplacementFilter } from 'pixi.js';

    // Create a sprite to use as the displacement map
    const displacementSprite = Sprite.from('displacement-map.png');

    // Create and configure the filter
    const displacementFilter = new DisplacementFilter({
        sprite: displacementSprite,
        scale: { x: 20, y: 20 }
    });

    // Apply to any display object
    container.filters = [displacementFilter];

    Vico: vicocotea

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Accessors

    scale

    Methods

    apply

    Constructors

    • Parameters

      • options: Sprite | DisplacementFilterOptions

        The sprite or options object.

        • Sprite
        • DisplacementFilterOptions

          Configuration options for the DisplacementFilter.

          A displacement filter uses a sprite's texture as a displacement map, moving pixels of the target based on the color values of corresponding pixels in the displacement sprite.

          • Optionalantialias?: boolean | FilterAntialias

            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]FilterAntialias string.

          • OptionalblendMode?: BLEND_MODES

            optional blend mode used by the filter when rendering (defaults to 'normal')

          • OptionalblendRequired?: 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)

          • OptionalclipToViewport?: boolean

            If this is set to true, the filter system will clip filter texture into viewport This is useful for filters that applied to whole texture. (default true)

          • Optionalpadding?: 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)

          • Optionalresolution?: 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

          • Optionalscale?: number | PointData

            The scale of the displacement effect. Can be a single number for uniform scaling or a point-like object for separate x/y scaling.

            20

            // Uniform scaling
            new DisplacementFilter({ sprite, scale: 20 });
            // Separate scaling
            new DisplacementFilter({ sprite, scale: { x: 10, y: 15 } });
          • sprite: Sprite

            The sprite whose texture will be used as the displacement map. Red channel = horizontal displacement Green channel = vertical displacement

            const displacementSprite = new Sprite(texture);
            const filter = new DisplacementFilter({ sprite: displacementSprite });

      Returns DisplacementFilter

    • Parameters

      Returns DisplacementFilter

      since 8.0.0

    Accessors

    • get scale(): Point

      The scale of the displacement effect.

      Gets the current x and y scaling values used for the displacement mapping.

      • x: Horizontal displacement scale
      • y: Vertical displacement scale

      Returns Point

      The current scale as a Point object

      const filter = new DisplacementFilter({ sprite });

      // Get current scale
      console.log(filter.scale.x, filter.scale.y);

      // Update scale
      filter.scale.x = 100;
      filter.scale.y = 50;

    Methods

    • Advanced

      Applies the filter.

      Parameters

      • filterManager: FilterSystem

        The manager.

      • input: Texture

        The input target.

      • output: Texture

        The output target.

      • clearMode: boolean

        clearMode.

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Accessors
    Methods