Masking an image with multiple blurred circles

[exophunk]

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.

[ivan.popelyshev]

which version of pixi do you use?

[ivan.popelyshev]

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.

[ivan.popelyshev]

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

https://www.pixiplayground.com/#/edit/qmP70cHqNECKO_l_xL8L2

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

[exophunk]

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;")?

[ivan.popelyshev]

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.

VIDEO

layer1 (AlphaFilter) --->

        back

        layer2 (AlphaFilter + blendMode) ->

               circles

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)

[exophunk]

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!

 

Robert

[ivan.popelyshev]

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.

 

 

[ivan.popelyshev]

Oh, almost forgot.

WELCOME TO THE FORUMS!

==================================

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.