Pixi’VNClass: Filter
Defined in: node_modules/pixi.js/lib/filters/Filter.d.ts:122
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.
Advanced
Example
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;
});
Extends
Extended by
BlendModeFilterAlphaFilterBlurFilterBlurFilterPassColorMatrixFilterDisplacementFilterNoiseFilterPassthroughFilterMaskFilter
Constructors
Constructor
> new Filter(options): Filter
Defined in: node_modules/pixi.js/lib/filters/Filter.d.ts:163
Parameters
options
The optional parameters of this filter.
Returns
Filter
Overrides
Properties
_destroyed
> _destroyed: boolean
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/shader/Shader.d.ts:194
Internal
Inherited from
_state
> _state: State
Defined in: node_modules/pixi.js/lib/filters/Filter.d.ts:143
Internal
The gpu state the filter requires to render.
_uniformBindMap
> _uniformBindMap: Record<number, Record<number, string>>
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/shader/Shader.d.ts:191
Internal
A record of the uniform groups and resources used by the shader. This is used by WebGL renderer to sync uniform data.
Inherited from
antialias
> antialias: FilterAntialias
Defined in: node_modules/pixi.js/lib/filters/Filter.d.ts:136
should the filter use antialiasing?
Default
inherit
blendRequired
> blendRequired: boolean
Defined in: node_modules/pixi.js/lib/filters/Filter.d.ts:154
Whether or not this filter requires the previous render texture for blending.
Default
false
clipToViewport
> clipToViewport: boolean
Defined in: node_modules/pixi.js/lib/filters/Filter.d.ts:159
Clip texture into viewport or not
Default
true
compatibleRenderers
> readonly compatibleRenderers: number
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/shader/Shader.d.ts:181
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.
Inherited from
enabled
> enabled: boolean
Defined in: node_modules/pixi.js/lib/filters/Filter.d.ts:138
If enabled is true the filter is applied, if false it will not.
glProgram
> glProgram: GlProgram
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/shader/Shader.d.ts:173
An instance of the GL program used by the WebGL renderer
Inherited from
gpuProgram
> gpuProgram: GpuProgram
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/shader/Shader.d.ts:171
An instance of the GPU program used by the WebGPU renderer
Inherited from
groups
> groups: Record<number, BindGroup>
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/shader/Shader.d.ts:183
Inherited from
padding
> padding: number
Defined in: node_modules/pixi.js/lib/filters/Filter.d.ts:131
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
0
resolution
> resolution: number | "inherit"
Defined in: node_modules/pixi.js/lib/filters/Filter.d.ts:149
The resolution of the filter. Setting this to be lower will lower the quality but increase the performance of the filter.
Default
1
resources
> resources: Record<string, any>
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/shader/Shader.d.ts:185
A record of the resources used by the shader.
Inherited from
uid
> readonly uid: number
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/shader/Shader.d.ts:169
A unique identifier for the shader
Inherited from
defaultOptions
> static defaultOptions: FilterOptions
Defined in: node_modules/pixi.js/lib/filters/Filter.d.ts:124
The default filter settings
prefixed
> static prefixed: string | boolean
Defined in: node_modules/eventemitter3/index.d.ts:9
Inherited from
Accessors
blendMode
Get Signature
> get blendMode(): BLEND_MODES
Defined in: node_modules/pixi.js/lib/filters/Filter.d.ts:176
Get the blend mode of the filter.
Default
"normal"
Returns
Set Signature
> set blendMode(value): void
Defined in: node_modules/pixi.js/lib/filters/Filter.d.ts:178
Sets the blend mode of the filter.
Parameters
value
Returns
void
Methods
addListener()
> addListener<T>(event, fn, context?): this
Defined in: node_modules/eventemitter3/index.d.ts:45
Type Parameters
T
T extends "destroy"
Parameters
event
T
fn
(...args) => void
context?
any
Returns
this
Inherited from
Shader.addListener
addResource()
> addResource(name, groupIndex, bindIndex): void
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/shader/Shader.d.ts:218
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
Inherited from
apply()
> apply(filterManager, input, output, clearMode): void
Defined in: node_modules/pixi.js/lib/filters/Filter.d.ts:171
Applies the filter
Parameters
filterManager
The renderer to retrieve the filter from
input
The input render target.
output
The target to output to.
clearMode
boolean
Should the output be cleared before rendering to it
Returns
void
destroy()
> destroy(destroyPrograms?): void
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/shader/Shader.d.ts:226
Use to destroy the shader when its not longer needed. It will destroy the resources and remove listeners.
Parameters
destroyPrograms?
boolean
if the programs should be destroyed as well. Make sure its not being used by other shaders!
Returns
void
Inherited from
emit()
> emit<T>(event, ...args): boolean
Defined in: node_modules/eventemitter3/index.d.ts:32
Calls each of the listeners registered for a given event.
Type Parameters
T
T extends "destroy"
Parameters
event
T
args
...ArgumentMap<{ destroy: Shader; }>[Extract<T, "destroy">]
Returns
boolean
Inherited from
Shader.emit
eventNames()
> eventNames(): "destroy"[]
Defined in: node_modules/eventemitter3/index.d.ts:15
Return an array listing the events for which the emitter has registered listeners.
Returns
"destroy"[]
Inherited from
Shader.eventNames
listenerCount()
> listenerCount(event): number
Defined in: node_modules/eventemitter3/index.d.ts:27
Return the number of listeners listening to a given event.
Parameters
event
"destroy"
Returns
number
Inherited from
Shader.listenerCount
listeners()
> listeners<T>(event): (...args) => void[]
Defined in: node_modules/eventemitter3/index.d.ts:20
Return the listeners registered for a given event.
Type Parameters
T
T extends "destroy"
Parameters
event
T
Returns
(...args) => void[]
Inherited from
Shader.listeners
off()
> off<T>(event, fn?, context?, once?): this
Defined in: node_modules/eventemitter3/index.d.ts:69
Type Parameters
T
T extends "destroy"
Parameters
event
T
fn?
(...args) => void
context?
any
once?
boolean
Returns
this
Inherited from
Shader.off
on()
> on<T>(event, fn, context?): this
Defined in: node_modules/eventemitter3/index.d.ts:40
Add a listener for a given event.
Type Parameters
T
T extends "destroy"
Parameters
event
T
fn
(...args) => void
context?
any
Returns
this
Inherited from
Shader.on
once()
> once<T>(event, fn, context?): this
Defined in: node_modules/eventemitter3/index.d.ts:54
Add a one-time listener for a given event.
Type Parameters
T
T extends "destroy"
Parameters
event
T
fn
(...args) => void
context?
any
Returns
this
Inherited from
Shader.once
removeAllListeners()
> removeAllListeners(event?): this
Defined in: node_modules/eventemitter3/index.d.ts:79
Remove all listeners, or those of the specified event.
Parameters
event?
"destroy"
Returns
this
Inherited from
Shader.removeAllListeners
removeListener()
> removeListener<T>(event, fn?, context?, once?): this
Defined in: node_modules/eventemitter3/index.d.ts:63
Remove the listeners of a given event.
Type Parameters
T
T extends "destroy"
Parameters
event
T
fn?
(...args) => void
context?
any
once?
boolean
Returns
this
Inherited from
Shader.removeListener
from()
> static from(options): Filter
Defined in: node_modules/pixi.js/lib/filters/Filter.d.ts:184
A short hand function to create a filter based of a vertex and fragment shader src.
Parameters
options
FilterOptions & ShaderFromResources
Returns
Filter
A shiny new PixiJS filter!