Jump to content

Blur of one sprite "spills" into the blur of another


Recommended Posts

Hi there,
I'm totally new to pixi.js, but somehow managed to do my first steps. Now I am stuck with a problem however.

I am trying to use pixi.js for an interactive slide show to blur the upcoming and previous images (as sprites). All works nicely, except that at the blur edge of my left blurred somehow some colors of my right blurred image seem to "spill" in. I am not sure how to describe it best. It seems to me that behind the scenes the images are merged somehow, then blurred all together and then cut off at a slightly incorrect position.

I attached a screenshot that demonstrate the issue.

Each of the sprite has its own filter (since I need to animate them independently) and the problem does not only happen between the two sprites shown in the image, but also between the other sprite pairs as well, once the slideshow moves on to the next slide.

I have tried to change all blur filter settings, padding, kernelSize, quality, blur amount, nothing seems to fix the issue.
Does anybody maybe know what the issue could be, and – more importantly, how I can fix it?

My setup is quite complex, so I don't know what are the most relevant code snippets that would help you analyze the problem. My hope is that by the visuals of it one of you could make an educated guess about what's wrong.
However, here is also the code I have in a gist, just in case:


If there is any more information I can provide to help solve the problem, please let me know.



Link to comment
Share on other sites

The fix was made in december and will appear in 5.2.1: https://github.com/pixijs/pixi.js/pull/6270

Two ways how to get it:

Use "pixijs.download/master/pixi.js" (map file and typings are in the same folder)

Look in the example https://www.pixiplayground.com/#/edit/kuhrhc4jG5QnRRtIfwGwk and copy the bottom part to your app (blurFilterPassApply and the hack)

Welcome to the forums!

Edited by ivan.popelyshev
Link to comment
Share on other sites

Hi ivan,
thanks for your quick response!

14 hours ago, ivan.popelyshev said:

Use "pixijs.download/master/pixi.js" (map file and typings are in the same folder)

I'm afraid I don't quite understand. Where do I use/find this? On the Github page? Or is this an npm thing?
And do I get this right that I will need to use this BlurFilterPass instead of BlurFilter then?

Thank you!

Link to comment
Share on other sites

its link to a file, "piijs.download" is a link to our CDN :). Either <script src=> it, either you can just put that piece of code in your project. You dont have to change anything else. BlurFilterPass is internal thing that was patched in that PR. 

It will appear in npm as a version 5.2.1 i dont know when.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...