Jump to content

pixijs newbie filter/mask question


Recommended Posts

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


Link to comment
Share on other sites

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 by ivan.popelyshev
Link to comment
Share on other sites

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

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...