ahrboktrexon Posted August 13, 2021 Share Posted August 13, 2021 Hi guys, I am playing with pixijs, and as you can see from the topic title I am a newbie. I am trying to achieve a simple blur result with masking, but I do not know pixijs enough and I am stuck. Attached heder you can see what I am trying to achieve I am pretty sure that this is a simple filter use, but every test I did I failed. Hope there is someone who can help. Thank you Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted August 13, 2021 Share Posted August 13, 2021 (edited) so you need a blur mask? https://pixijs.io/examples/#/plugin-picture/mask-blur.js Apply a mask filter to your sprite. You can tell the mask filter to use only RED, but that will be a problem: you have RED in that WHITE part too! you'll have to adjust your png accordingly. Also its not a newbie question, because we have that feature in https://github.com/pixijs/picture/ only for a half-year or so. It wasnt easy thing to implement and people struggled for many years to get that Edited August 13, 2021 by ivan.popelyshev Quote Link to comment Share on other sites More sharing options...
ahrboktrexon Posted August 13, 2021 Author Share Posted August 13, 2021 Hi Ivan, I filled of red the png only for this post, the png (in the red part) in transparent. I will have a look to the link you pasted, thank you ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
ahrboktrexon Posted August 13, 2021 Author Share Posted August 13, 2021 Hi Iva, sorry for boring but cannot figure out how to combine all the stuff. Is it possible to create only one container with all the stuff in it? Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted August 13, 2021 Share Posted August 13, 2021 Please post exact example that doesnt work for you, either on jsfiddle, either on codesandbox or somewhere else. Quote Link to comment Share on other sites More sharing options...
ahrboktrexon Posted August 13, 2021 Author Share Posted August 13, 2021 this is the code I'm using https://codesandbox.io/s/epic-edison-d2edq?file=/index.html What I am trying to achieve is having in the last canvas container (in which the app is rendered) the video blurred outside the balls, and the video not blurred in the balls area. banging my head against wall but I don't know how to merge the pixjs demo page with this. Thank you for your precious help Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted August 13, 2021 Share Posted August 13, 2021 I have to draw a line somewhere, what is forum help and what is actual paid job. You didnt try to put MaskFilter there with Blur - i cant do anything with this demo, there's nothing to fix Quote Link to comment Share on other sites More sharing options...
ahrboktrexon Posted August 13, 2021 Author Share Posted August 13, 2021 Thank you Ivan, I understand... just sent you a private message 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.