pixi.js
    Preparing search index...

    Class BlurFilterPassAdvanced

    The BlurFilterPass applies a horizontal or vertical Gaussian blur to an object.

    import { BlurFilterPass } from 'pixi.js';

    const filter = new BlurFilterPass({ horizontal: true, strength: 8 });
    sprite.filters = filter;

    // update blur
    filter.blur = 16;

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Properties

    antialias blendRequired clipToViewport compatibleRenderers enabled glProgram gpuProgram groups horizontal padding passes resolution resources strength uid defaultOptions

    Accessors

    blendMode blur quality

    Methods

    addResource apply destroy from

    Constructors

    • Parameters

      • options: BlurFilterPassOptions
        • horizontal

          Do pass along the x-axis (true) or y-axis (false).

        • strength

          The strength of the blur filter.

        • quality

          The quality of the blur filter.

        • kernelSize

          The kernelSize of the blur filter.Options: 5, 7, 9, 11, 13, 15.

      Returns BlurFilterPass

    Properties

    antialias: FilterAntialias

    should the filter use antialiasing?

    inherit
    blendRequired: boolean

    Whether or not this filter requires the previous render texture for blending.

    false
    clipToViewport: boolean

    Clip texture into viewport or not

    true
    compatibleRenderers: number

    A number that uses two bits on whether the shader is compatible with the WebGL renderer and/or the WebGPU renderer. 0b00 - not compatible with either 0b01 - compatible with WebGL 0b10 - compatible with WebGPU This is automatically set based on if a GlProgram or GpuProgram is provided.

    enabled: boolean = true

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

    glProgram: GlProgram

    An instance of the GL program used by the WebGL renderer

    gpuProgram: GpuProgram

    An instance of the GPU program used by the WebGPU renderer

    groups: Record<number, BindGroup>
    horizontal: boolean

    Do pass along the x-axis (true) or y-axis (false).

    padding: number

    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.

    0
    passes: number

    The number of passes to run the filter.

    resolution: number | "inherit"

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

    1
    resources: Record<string, any>

    A record of the resources used by the shader.

    strength: number

    The strength of the blur filter.

    uid: number = ...

    A unique identifier for the shader

    defaultOptions: Partial<BlurFilterPassOptions> = ...

    Default blur filter pass options

    Accessors

    • get blendMode(): BLEND_MODES

      Get the blend mode of the filter.

      Returns BLEND_MODES

      "normal"
    • set blendMode(value: BLEND_MODES): void

      Sets the blend mode of the filter.

      Parameters

      Returns void

    • get blur(): number

      Sets the strength of both the blur.

      Returns number

      16
    • set blur(value: number): void

      Parameters

      • value: number

      Returns void

    • get quality(): number

      Sets the quality of the blur by modifying the number of passes. More passes means higher quality blurring but the lower the performance.

      Returns number

      4
    • set quality(value: number): void

      Parameters

      • value: number

      Returns void

    Methods

    • Sometimes a resource group will be provided later (for example global uniforms) In such cases, this method can be used to let the shader know about the group.

      Parameters

      • name: string

        the name of the resource group

      • groupIndex: number

        the index of the group (should match the webGPU shader group location)

      • bindIndex: number

        the index of the bind point (should match the webGPU shader bind point)

      Returns void

    • Use to destroy the shader when its not longer needed. It will destroy the resources and remove listeners.

      Parameters

      • destroyPrograms: boolean = false

        if the programs should be destroyed as well. Make sure its not being used by other shaders!

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods