PixiJS Filters — Applying Visual Effects

DodaTech Updated 2026-06-28 3 min read

In this tutorial, you will learn about PixiJS Filters. We cover key concepts, practical examples, and best practices to help you master this topic.

PixiJS filters apply GPU-based visual effects to display objects using built-in and custom GLSL shaders.

What You'll Learn

By the end of this guide, you will apply blur and color matrix filters, use displacement filter for distortion, create custom GLSL filters, control filter area and quality, and optimize filter performance with padding.

Blur Filter

var blur = new PIXI.BlurFilter();
blur.blur = 8;
sprite.filters = [blur];

Color Matrix

var colorMatrix = new PIXI.ColorMatrixFilter();
colorMatrix.desaturate(); // Grayscale
colorMatrix.contrast(1.5);
sprite.filters = [colorMatrix];

Displacement Filter

var displacementTexture = PIXI.Texture.from('disp.png');
var displacement = new PIXI.DisplacementFilter(displacementSprite, 50);
sprite.filters = [displacement];

Custom Filter

var fragSrc = `
    precision mediump float;
    varying vec2 vTextureCoord;
    uniform sampler2D uSampler;
    uniform float time;
    void main() {
        vec4 color = texture2D(uSampler, vTextureCoord);
        color.r *= abs(sin(time));
        gl_FragColor = color;
    }
`;

var filter = new PIXI.Filter(null, fragSrc, { time: 0 });
sprite.filters = [filter];

app.ticker.add(function() {
    filter.uniforms.time += 0.01;
});

Common Mistakes

1. Filter Area Too Small

Filters render within the object's bounds. If content extends beyond, set filterArea on the container.

2. Too Many Filters

Each filter adds a render pass. 3+ filters on many objects drops frame rate.

3. Blur Quality Too High

Blur quality over 4 looks identical but is much slower. Keep quality at 2-4.

4. Displacement Texture Missing

A missing displacement texture causes the filter to fail silently.

5. Custom GLSL Syntax Errors

Custom filters do not show compilation errors. Use console.log or test in ShaderToy first.

Practice Questions

Q1: How do you apply a blur? A: Create a BlurFilter and assign to object.filters array.

Q2: How do you make a grayscale filter? A: Use ColorMatrixFilter and call desaturate().

Q3: What is the displacement filter? A: A distortion effect using a texture map to displace pixels.

Q4: How do you create a custom filter? A: Use new PIXI.Filter(vertexSrc, fragmentSrc, uniforms).

Q5: How do you remove filters? A: Set object.filters = null.

Challenge: Build an image gallery where hovering over an image applies a color matrix filter (sepia, grayscale, or negative) and a slight blur on the background images.

FAQ

Do filters work on containers?

Yes. Filters apply to the entire container and its children.

Can I animate filter parameters?

Yes. Modify filter properties in the ticker.

What is the default filter area?

The bounding box of the filtered object. Set filterArea for custom bounds.

Are filters supported on all devices?

Filters require WebGL. They fall back to no effect on Canvas renderer.

How do I make a glow effect?

Use a custom filter that blurs and adds the blurred copy over the original.

Try It Yourself

Apply filters to a sprite.

<!DOCTYPE html>
<html>
<head>
    <title>PixiJS Filters</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.3/pixi.min.js"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Filter Demo</h2>
<button onclick="applyFilter('blur')">Blur</button>
<button onclick="applyFilter('gray')">Grayscale</button>
<button onclick="applyFilter('none')">None</button>
<script>
var app = new PIXI.Application({ width: 400, height: 300, background: 0xf5f5f5 });
document.body.appendChild(app.view);

var g = new PIXI.Graphics();
g.beginFill(0x4ecdc4);
g.drawRoundedRect(0, 0, 200, 200, 16);
g.endFill();
g.pivot.set(100, 100);
g.x = 200;
g.y = 150;
app.stage.addChild(g);

var blurFilter = new PIXI.BlurFilter();
blurFilter.blur = 6;

var grayFilter = new PIXI.ColorMatrixFilter();
grayFilter.desaturate();

function applyFilter(type) {
    if (type === 'blur') g.filters = [blurFilter];
    else if (type === 'gray') g.filters = [grayFilter];
    else g.filters = null;
}
</script>
</body>
</html>

What's Next

Use masks for clipping.

Masks — Masking and clipping. Blend Modes — Blend modes.

← Previous PixiJS Animated Sprites — Frame-Based Animation Next → PixiJS Masks — Clipping and Revealing Content

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Pixijs