Animating filters in Pixi.js (setup)

In a previous blog, I had written about how to animate RGB shift using PixiJs’s filters feature. Today I will be going through how to set up a Pixi app from scratch to animate these features in React.

Start with installing it through your preferred package manager.

npm install pixi-filters
or
yarn add pixi-filters

In the PixiJS docs, you’ll find the filters that you’re looking for and import it in your react app.

import { RadialBlurFilter, ReflectionFilter, RGBSplitFilter, TwistFilter } from "pixi-filters";

For my application that I built recently, I used these four filters.

Now that you’ve imported the library, you’ll want to start by creating a function to initialize a new pixi app instance.

initPixi = () => {
this.pixiapp = new PIXI.Application({ 
width: bgwidth,                                                     height: window.innerHeight, 
});

Next you’ll want to create to add content to your Pixi application using Pixi.Loader. Docs for Pixi.Loader

const imageURL = your_image
this.pixiapp.loader.add('image',imageURL).load((loader, resources) => {      
this.image = PIXI.Sprite.from(resources.image.url);      this.image.width = bgwidth;
this.setState({ currentImage: this.imageURL })

The next step is important as I was unable to find docs for this. To get your Pixi app to render you should include in your render:

<div style={{ width: `${bgwidth}px`,height: '100%', 
position: 'absolute',      }}       
ref={node => { this.pixiNode = node }}></div>

This should get you started. To remove the filters use pixiapp.destroy() or this.pixiNode.removeChild to remove an effect. Have fun! Please let me know if you run into any problems. I will be releasing these filters separately on codepen in the future.