@pixi/filter-blur

What is @pixi/filter-blur?

@pixi/filter-blur is a package that provides a blur filter for use with the PixiJS rendering library. It allows developers to apply a blur effect to display objects within a PixiJS application, enhancing visual aesthetics or creating specific visual effects.

What are @pixi/filter-blur's main functionalities?

Basic Blur Application

This code demonstrates how to apply a basic blur filter to a sprite in a PixiJS application. The BlurFilter is created and then applied to the sprite's filters array.

const app = new PIXI.Application();
document.body.appendChild(app.view);

const sprite = PIXI.Sprite.from('path/to/image.png');
app.stage.addChild(sprite);

const blurFilter = new PIXI.filters.BlurFilter();
sprite.filters = [blurFilter];

Adjusting Blur Strength

This example shows how to adjust the strength of the blur effect by setting the 'blur' property of the BlurFilter. A higher value results in a stronger blur effect.

const blurFilter = new PIXI.filters.BlurFilter();
blurFilter.blur = 5;
sprite.filters = [blurFilter];

Directional Blur

This code demonstrates how to apply a directional blur by setting different values for 'blurX' and 'blurY'. This can create effects like motion blur in a specific direction.

const blurFilter = new PIXI.filters.BlurFilter();
blurFilter.blurX = 10;
blurFilter.blurY = 0;
sprite.filters = [blurFilter];

Other packages similar to @pixi/filter-blur

gl-react-blur

gl-react-blur is a package for applying blur effects in React applications using WebGL. It is similar to @pixi/filter-blur in that it provides blur functionality, but it is designed specifically for use with React and WebGL, offering a different integration approach compared to PixiJS.

README

@pixi/filter-blur

Installation

npm install @pixi/filter-blur

Usage

import '@pixi/filter-blur';