pixi.js
    Preparing search index...

    Interface 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.

    const options: DisplacementFilterOptions = {
    sprite: displacementSprite,
    scale: { x: 20, y: 20 }
    };

    const filter = new DisplacementFilter(options);
    interface DisplacementFilterOptions {
        antialias?: boolean | FilterAntialias;
        blendMode?: BLEND_MODES;
        blendRequired?: boolean;
        clipToViewport?: boolean;
        padding?: number;
        resolution?: number | "inherit";
        scale?: number | PointData;
        sprite: Sprite;
    }

    Hierarchy (View Summary)

    Index

    Properties

    antialias?: 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.

    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)

    clipToViewport?: 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)

    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

    scale?: 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 });