Sign in to follow this  
DeusX

Apply Filter only to small area

Recommended Posts

Hello,

I'm currently working on a little game with and Island and some (right now static) water, I was looking online for water-effects and found this, simple Article

https://markhawkinsdesigns.com/blog/web-design/working-with-pixijs-v4-and-the-displacementfilter/

I really like that effect but how do I restrict the area so that some of the image (especially the borders of the image, they look weird) stays uneffected, right now it looks a bit like wet paper instead of water. I tried using masking but that doesn't really help because now we have the same Image in the background but the edges of the foreground are still moving.

Restricting filterArea and changing the padding doesn't really work also. My Goal right now is that the edges of the images stay static respectively uneffected by the filter.

Thanks.

Share this post


Link to post
Share on other sites

Stupid workaround: try put neutral gray (0x808080) on the border of your displacement texture.

As for "apply filter only to part of object" general approach, its called "filter backdrop" and several implementations wer rejected by pixijs team because "its a rare case that should be in a plugin" or something like that.

Here was the demo that worked with displacementFilter:  https://github.com/pixijs/pixi.js/pull/4686 click on "jsFiddle" , but you have to apply those old changes to newer pixi.js version. 

I wanted to add it to my "pixi-picture" plugin, but, so far, no one asked me to do it :) Are you sure you need this general approach to be implemented, or border solution is enough for you?

Share this post


Link to post
Share on other sites

So, your workaround is to just put a grey frame around the texture with gimp or something? Haven't thought of that yet lol, I will try that solution tomorrow and provide Feedback.

Your general solution would be nice I think as this should be a rather common problem I suppose. I will take a look at your fiddle after trying the border solution.

Thanks

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.