LogoPixi’VN
pixi-jsClasses

Class: BlurFilter

pixi-vn on GitHubPatreon

Defined in: node_modules/pixi.js/lib/filters/defaults/blur/BlurFilter.d.ts:118

The BlurFilter applies a Gaussian blur to an object. The strength of the blur can be set for the x-axis and y-axis separately.

Example

import { BlurFilter } from 'pixi.js';

// Create with default settings
const filter = new BlurFilter();

// Create with custom settings
const filter = new BlurFilter({
    strength: 8,      // Overall blur strength
    quality: 4,       // Blur quality (higher = better but slower)
    kernelSize: 5     // Size of blur kernel matrix
});

// Apply to a display object
sprite.filters = [filter];

// Update properties
filter.strength = 10;          // Set both X and Y blur
filter.strengthX = 5;          // Set only horizontal blur
filter.strengthY = 15;         // Set only vertical blur
filter.quality = 2;            // Adjust quality

// Enable edge pixel clamping
filter.repeatEdgePixels = true;

Remarks

  • Higher quality values produce better blur but impact performance
  • Strength controls blur intensity independently for X and Y
  • Can be optimized using quality and kernelSize settings
  • Supports edge pixel clamping for special effects

See

Standard

No Inherit Doc

Extends

Constructors

Constructor

> new BlurFilter(options?): BlurFilter

Defined in: node_modules/pixi.js/lib/filters/defaults/blur/BlurFilter.d.ts:154

Parameters

options?

BlurFilterOptions

The options of the blur filter.

Returns

BlurFilter

Overrides

Filter.constructor

Constructor

> new BlurFilter(strength?, quality?, resolution?, kernelSize?): BlurFilter

Defined in: node_modules/pixi.js/lib/filters/defaults/blur/BlurFilter.d.ts:156

Parameters

strength?

number

quality?

number

resolution?

number | null

kernelSize?

number

Returns

BlurFilter

Deprecated

since 8.0.0

Overrides

Filter.constructor

Properties

_destroyed

> _destroyed: boolean

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/shader/Shader.d.ts:194

Internal

Inherited from

Filter._destroyed

_state

> _state: State

Defined in: node_modules/pixi.js/lib/filters/Filter.d.ts:143

Internal

The gpu state the filter requires to render.

Inherited from

Filter._state

_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

Filter._uniformBindMap

antialias

> antialias: FilterAntialias

Defined in: node_modules/pixi.js/lib/filters/Filter.d.ts:136

should the filter use antialiasing?

Default

inherit

Inherited from

Filter.antialias

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

Inherited from

Filter.blendRequired

blurXFilter

> blurXFilter: BlurFilterPass

Defined in: node_modules/pixi.js/lib/filters/defaults/blur/BlurFilter.d.ts:144

The horizontal blur filter

Advanced

blurYFilter

> blurYFilter: BlurFilterPass

Defined in: node_modules/pixi.js/lib/filters/defaults/blur/BlurFilter.d.ts:149

The vertical blur filter

Advanced

clipToViewport

> clipToViewport: boolean

Defined in: node_modules/pixi.js/lib/filters/Filter.d.ts:159

Clip texture into viewport or not

Default

true

Inherited from

Filter.clipToViewport

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

Filter.compatibleRenderers

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.

Inherited from

Filter.enabled

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

Filter.glProgram

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

Filter.gpuProgram

groups

> groups: Record<number, BindGroup>

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/shader/Shader.d.ts:183

Inherited from

Filter.groups

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

Inherited from

Filter.padding

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

Inherited from

Filter.resolution

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

Filter.resources

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

Filter.uid

defaultOptions

> static defaultOptions: Partial<BlurFilterOptions>

Defined in: node_modules/pixi.js/lib/filters/defaults/blur/BlurFilter.d.ts:139

Default blur filter options

Example

// Set default options for all BlurFilters
BlurFilter.defaultOptions = {
    strength: 10,       // Default blur strength
    quality: 2,        // Default blur quality
    kernelSize: 7      // Default kernel size
};
// Create a filter with these defaults
const filter = new BlurFilter(); // Uses default options

Remarks

  • These options are used when creating a new BlurFilter without specific parameters
  • Can be overridden by passing options to the constructor
  • Useful for setting global defaults for all blur filters in your application

See

  • BlurFilterOptions For detailed options
  • BlurFilter The filter that uses these options

Overrides

Filter.defaultOptions

prefixed

> static prefixed: string | boolean

Defined in: node_modules/eventemitter3/index.d.ts:9

Inherited from

Filter.prefixed

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

BLEND_MODES

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

BLEND_MODES

Returns

void

Inherited from

Filter.blendMode

blur

Get Signature

> get blur(): number

Defined in: node_modules/pixi.js/lib/filters/defaults/blur/BlurFilter.d.ts:241

Sets the strength of both the blurX and blurY properties simultaneously

Default
2
Deprecated

since 8.3.0

See

BlurFilter.strength

Returns

number

Set Signature

> set blur(value): void

Defined in: node_modules/pixi.js/lib/filters/defaults/blur/BlurFilter.d.ts:242

Parameters
value

number

Returns

void

blurX

Get Signature

> get blurX(): number

Defined in: node_modules/pixi.js/lib/filters/defaults/blur/BlurFilter.d.ts:249

Sets the strength of the blurX property

Default
2
Deprecated

since 8.3.0

See

BlurFilter.strengthX

Returns

number

Set Signature

> set blurX(value): void

Defined in: node_modules/pixi.js/lib/filters/defaults/blur/BlurFilter.d.ts:250

Parameters
value

number

Returns

void

blurY

Get Signature

> get blurY(): number

Defined in: node_modules/pixi.js/lib/filters/defaults/blur/BlurFilter.d.ts:257

Sets the strength of the blurY property

Default
2
Deprecated

since 8.3.0

See

BlurFilter.strengthY

Returns

number

Set Signature

> set blurY(value): void

Defined in: node_modules/pixi.js/lib/filters/defaults/blur/BlurFilter.d.ts:258

Parameters
value

number

Returns

void

quality

Get Signature

> get quality(): number

Defined in: node_modules/pixi.js/lib/filters/defaults/blur/BlurFilter.d.ts:199

Sets the number of passes for blur. More passes means higher quality blurring. Controls the precision and smoothness of the blur effect at the cost of performance.

Example
// High quality blur (slower)
filter.quality = 8;

// Low quality blur (faster)
filter.quality = 2;
Default
4
Remarks

Higher values produce better quality but impact performance

Returns

number

Set Signature

> set quality(value): void

Defined in: node_modules/pixi.js/lib/filters/defaults/blur/BlurFilter.d.ts:200

Parameters
value

number

Returns

void

repeatEdgePixels

Get Signature

> get repeatEdgePixels(): boolean

Defined in: node_modules/pixi.js/lib/filters/defaults/blur/BlurFilter.d.ts:263

If set to true the edge of the target will be clamped

Default
false
Returns

boolean

Set Signature

> set repeatEdgePixels(value): void

Defined in: node_modules/pixi.js/lib/filters/defaults/blur/BlurFilter.d.ts:264

Parameters
value

boolean

Returns

void

strength

Get Signature

> get strength(): number

Defined in: node_modules/pixi.js/lib/filters/defaults/blur/BlurFilter.d.ts:183

Sets the strength of both the blurX and blurY properties simultaneously. Controls the overall intensity of the Gaussian blur effect.

Example
// Set equal blur strength for both axes
filter.strength = 8;

// Will throw error if X and Y are different
filter.strengthX = 4;
filter.strengthY = 8;
filter.strength; // Error: BlurFilter's strengthX and strengthY are different
Default
8
Throws

If strengthX and strengthY are different values

Returns

number

Set Signature

> set strength(value): void

Defined in: node_modules/pixi.js/lib/filters/defaults/blur/BlurFilter.d.ts:184

Parameters
value

number

Returns

void

strengthX

Get Signature

> get strengthX(): number

Defined in: node_modules/pixi.js/lib/filters/defaults/blur/BlurFilter.d.ts:216

Sets the strength of horizontal blur. Controls the blur intensity along the x-axis independently.

Example
// Apply horizontal-only blur
filter.strengthX = 8;
filter.strengthY = 0;

// Create motion blur effect
filter.strengthX = 16;
filter.strengthY = 2;
Default
8
Returns

number

Set Signature

> set strengthX(value): void

Defined in: node_modules/pixi.js/lib/filters/defaults/blur/BlurFilter.d.ts:217

Parameters
value

number

Returns

void

strengthY

Get Signature

> get strengthY(): number

Defined in: node_modules/pixi.js/lib/filters/defaults/blur/BlurFilter.d.ts:233

Sets the strength of the vertical blur. Controls the blur intensity along the y-axis independently.

Example
// Apply vertical-only blur
filter.strengthX = 0;
filter.strengthY = 8;

// Create radial blur effect
filter.strengthX = 8;
filter.strengthY = 8;
Default
8
Returns

number

Set Signature

> set strengthY(value): void

Defined in: node_modules/pixi.js/lib/filters/defaults/blur/BlurFilter.d.ts:234

Parameters
value

number

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

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

Filter.addResource

apply()

> apply(filterManager, input, output, clearMode): void

Defined in: node_modules/pixi.js/lib/filters/defaults/blur/BlurFilter.d.ts:165

Applies the filter.

Parameters

filterManager

FilterSystem

The manager.

input

Texture

The input target.

output

RenderSurface

The output target.

clearMode

boolean

How to clear

Returns

void

Advanced

Overrides

Filter.apply

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

Filter.destroy

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

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

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

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

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

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

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

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

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

Filter.removeListener

updatePadding()

> protected updatePadding(): void

Defined in: node_modules/pixi.js/lib/filters/defaults/blur/BlurFilter.d.ts:166

Returns

void

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!

Inherited from

Filter.from

Class: BlendModePipe

Previous Page

Class: BlurFilterPass

Next Page