Working with PixiJS V4’s DisplacementFilter

PixiJS LogoIf your new to PixiJS, and like me who love to dissect working demos examples, you’ll find that the best demos are the ones by PixiJS on their website. For filters, check out this demo. Most you’ll find out in the wild on the internet are usually for the older pixiJS versions 1 to 3. And if you haven’t really read the docs over there you might be pulling your hair out trying to do certain things with PixiJS.

We’ll I’m here to get you started with one of the cool filters that come with PixiJS V4 called the Displacement Filter. This filter is the same type we’ve used in 3D application material designs. The Displacement filter uses the measurement of white and black variations of the displacement map(image) to determine its offset view. This offset is by “x” and “y”. So what’s really cool about the “DisplacementFilter” in PixiJS V4 is that you can use different displacement graphics to create all types of effects with this one single filter. The most famous effect for the displacement filter is the underwater look as demonstrated below.

Underwater Effect


So here is the code below

And the displacement map image we used for the water filter
Image for Displacement Filter

Now here is where you can have some fun, try changing out the displacement map image for a different tiled background image. Make sure its a tiled image which means it repeats seamlessly. It also has to be black and white. Hope this helps get you started working with filters and PixiJS V4.

You can download the source files here, if this was helpful to you, please give me a like or share on the article. If you have a comment or question, let me know.

Author: Mark Hawkins

Sr. Graphic Designer, Web Developer and Animator fueled by passion for design, development and some RockStar energy drinks.

2 thoughts on “Working with PixiJS V4’s DisplacementFilter”

Leave a Reply

Your email address will not be published. Required fields are marked *