PixiJS

Class: Filter

Filter

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.

new Filter (options) overrides

ts:192
Name Type Description
options FilterWithShader

The optional parameters of this filter.

Extends

Members

defaultOptions FilterOptions staticreadonly

The default filter settings

antialias FilterAntialias

should the filter use antialiasing?

Default Value:
  • inherit

blendMode BLEND_MODES

Get the blend mode of the filter.

Default Value:
  • "normal"

blendMode

Sets the blend mode of the filter.

blendRequired boolean

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

Default Value:
  • false

enabled boolean

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

Default Value:
  • true

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.

Default Value:
  • 0

resolution number

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

Default Value:
  • 1

Methods

from (options) Filter static

ts:251

A short hand function to create a filter based of a vertex and fragment shader src.

Name Type Description
options FilterOptions & ShaderFromResources
Returns:
Type Description
Filter A shiny new PixiJS filter!

apply (filterManager, input, output, clearMode) void

ts:219

Applies the filter

Name Type Description
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

Inherited Properties

From class Shader

compatibleRenderers number readonly inherited

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 {@link GpuProgram} is provided.

glProgram GlProgram inherited

An instance of the GL program used by the WebGL renderer

gpuProgram GpuProgram inherited

An instance of the GPU program used by the WebGPU renderer

resources Record<string, any> inherited

A record of the resources used by the shader.

Inherited Methods

From class Shader

addResource (name, groupIndex, bindIndex) void inherited

ts:339

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.

Name Type Description
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)

destroy (destroyPrograms) void inherited

ts:383

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

Name Type Default Description
destroyPrograms boolean false

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

Inherited Events

From class Shader

destroy inherited

ts:173

Fired after rendering finishes.