Jump to content

Masking an image with multiple blurred circles


Recommended Posts

Dear Community,

I am trying to mask an image with multiple, animated, blurred circles. So there is a fullscreen image and only parts of it are shown, exactly like in this example: https://pixijs.io/examples/#/masks/filter.js

It is important that is actual masking, because you need to see the background behind it. At the end, this is the output: https://recordit.co/jc1yLQwomH so you can see I want to only show parts of image. To start, I thought of multiple circles moving around, all those circles together should be the mask for the image.

1. I can add a moving, blurry circle as mask like in the example above - no problem.

2. As soon as I try to add two circles to a container and add the container as mask: The blur filters disappear.

3. Is there another, better way to add multiple elements in a mask? And keep filters? I tried things with "RenderTexture" or something, but didn't quite made it.


Thanks for your help.

Link to comment
Share on other sites

There are many ways to do that. Unfortunately pixi does not support container ALPHA  masks , it uses stencil instead, and stencil if ON-OFF, it has no alpha. We'll add it in next PR after we merge large refactor https://github.com/pixijs/pixi.js/pull/6140

There are many ways to implement that thing, in fact, I can make several demos for people to choose.

Link to comment
Share on other sites

Here's how to do it through filter+MULTIPLY blendmode.


You have to understand that "layer" container is rendered inside a separate framebuffer before its drawn in stage. That's how filters work.

In next post I'll do the same thing with pixi-layers, like in https://pixijs.io/examples/#/plugin-layers/lighting.js

Link to comment
Share on other sites

Thanks for your quick reply!

I use pixi v5.1.5

I've looked at your Multiply example, but I think this is not going to work because at the end, there should not be a "black background", but imagine another image behind. Or as in the video I've posted, there should be text behind. So I am not quite sure if blending modes is the way to go?

Or is it possible to achieve actual masking (with even see trough behind the canvas with "transparent: true;")?

Link to comment
Share on other sites

ok then its not multiply but one of composition modes  https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

pixi has allk those DST/SRC OVER/OUT thingies.

And of course you need one more layer , that will have that back and circles.


layer1 (AlphaFilter) --->


        layer2 (AlphaFilter + blendMode) ->


If you worked in photoshop or any other editor you know concept of layers and composition - here its a bit different but common logic is the same. Wherever we specify filters - container is rendered into temporary framebuffer.(pixi renderTexture)

Link to comment
Share on other sites

At first I had no idea what you were talking about, but then I got it. Many thanks!


Those composition modes are awesome! I was able to do what I want with "Destination Out". And I only had to change that one blendmode, I did not need another layer.

See this adjusted example, even with transparency: https://www.pixiplayground.com/#/edit/AfvfRhY8lvtySHEADjodc

Performancewise: Is this appreach very demanding or a good way to go? I probably will have about 6-7 sprites with the blurred texture moving around as "mask".


Thank you!



Link to comment
Share on other sites

Because you blurred it beforehand, blur filter (very heavy thing, several flip-flops over temp framebuffers) does not afect anything. The next big thing is that we use screen-sized buffer to render those circles in, but people sometimes use tens of buffers like that on PC so its ok :)

number of sprites isnt important, its the number of PIXELS they cover (like, every sprite 100x100 =10000 pixels), the higher it goes the more times fragment shader will be called. However if they area is compared to screen area - its nothing, because its comparable with the operation that draws the resulting buffer to screen :)

As for composition modes = they are the same performance as normal blendmode. They all were obtained from Porter-Duff (1984) formulae: https://keithp.com/~keithp/porterduff/p253-porter.pdf  . If you look at the normal blend and start messing with coefficients - you'll get all those modes. The performance goes down when you start using non-premultiply blendmodes that have custom functions, like OVERLAY or HARDLIGHT - and pixijs and other webgl renderers have certain limitations on them. They dont even work without special plugins.



Link to comment
Share on other sites

Oh, almost forgot.



btw, you mentioned DST_OUT - we also have an alias for it, "ERASE": https://github.com/pixijs/pixi.js/blob/dev/packages/constants/src/index.js#L107

People needed it so many times and we were oblivious to the fact that we can actually add it in pixi. Three years ago i introduced it as a hack in pixi (that's post from two years ago:

 ) , https://github.com/pixijs/pixi.js/wiki/v4-Gotchas#custom-canvas-composition-mode in pixijs wiki , but only a year ago I finally finished with studying all that stuff and made PR's to the core.

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