DeusX Posted November 20, 2018 Share Posted November 20, 2018 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. ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted November 20, 2018 Share Posted November 20, 2018 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? Quote Link to comment Share on other sites More sharing options...
DeusX Posted November 20, 2018 Author Share Posted November 20, 2018 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 Quote Link to comment Share on other sites More sharing options...
DeusX Posted November 25, 2018 Author Share Posted November 25, 2018 I tried your solution with the grey frame around the texture and it works actually great, thanks. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted November 25, 2018 Share Posted November 25, 2018 I did it. https://github.com/pixijs/pixi-picture https://gameofbombs.github.io/examples-heaven/#/picture/displacement-backdrop.js Second solution is also available now DeusX 1 Quote Link to comment Share on other sites More sharing options...
DeusX Posted November 25, 2018 Author Share Posted November 25, 2018 Awesome, I'm gonna try that as well as soon as I have time. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.