pixi.js
    Preparing search index...

    Class FilterAdvanced

    The Filter class is the base for all filter effects used in Pixi.js As it extends a shader, it requires that a glProgram is parsed in to work with WebGL and a gpuProgram for WebGPU. If you don't proved one, then the filter is skipped and just rendered as if it wasn't there for that renderer.

    A filter can be applied to anything that extends Container in Pixi.js which also includes Sprites, Graphics etc.

    Its worth noting Performance-wise filters can be pretty expensive if used too much in a single scene. The following happens under the hood when a filter is applied:

    .1. Break the current batch
    .2. The target is measured using getGlobalBounds (recursively go through all children and figure out how big the object is)
    .3. Get the closest Po2 Textures from the texture pool
    .4. Render the target to that texture
    .5. Render that texture back to the main frame buffer as a quad using the filters program.

    Some filters (such as blur) require multiple passes too which can result in an even bigger performance hit. So be careful! Its not generally the complexity of the shader that is the bottle neck, but all the framebuffer / shader switching that has to take place. One filter applied to a container with many objects is MUCH faster than many filter applied to many objects.

    import { Filter } from 'pixi.js';

    const customFilter = new Filter({
    glProgram: new GlProgram({
    fragment,
    vertex,
    }),
    resources: {
    timeUniforms: {
    uTime: { value: 0.0, type: 'f32' },
    },
    },
    });

    // Apply the filter
    sprite.filters = [customFilter];

    // Update uniform
    app.ticker.add((ticker) => {
    filter.resources.timeUniforms.uniforms.uTime += 0.04 * ticker.deltaTime;
    });

    Hierarchy (View Summary)

    Index

    Constructors

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

    uid: number = ...

    A unique identifier for the shader

    defaultOptions: FilterOptions = ...

    The default filter settings

    Accessors

    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

    • Applies the filter

      Parameters

      • filterManager: FilterSystem

        The renderer to retrieve the filter from

      • input: Texture

        The input render target.

      • output: RenderSurface

        The target to output to.

      • clearMode: boolean

        Should the output be cleared before rendering to it

      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