Gooey Effect in PIXIjs v5 (metaballs)

[iosonosempreio]

Hello everyone!

I am trying to reproduce the so called Gooey Effect with PIXI.

Following guides I found on the web, I managed to make it working greatly in in SVG, but in my final application I have performances issues due to the amount of elements I have to visualize. For this reason I decided to give PIXIjs a chance.

This effects is capable of creating metaballs-like shapes from simple circles, using a combination of blur and contrast effects. In my first example I used css filters following the demonstration and the explanation by css-tricks.com:

Quote

With SVG filters, though, we can do some things that were not possible with CSS filters alone: we can increase the contrast of only the alpha channel, not changing the colors;

 

To reproduce this behaviour in PIXI I am sing the BlurFilter() and the ColorMatrixFilter(). However it seems like the color matrix filter can't work on the alpha channel only, multiplying all the color channels. Please, have a look at my code here.

In PIXI and in SVG I am using the same matrix, which is:

let m = [
    1, 0, 0, 0, 0,
    0, 1, 0, 0, 0,
    0, 0, 1, 0, 0,
    0, 0, 0, 19, -9
];

// in PIXI I set the multiply value to FALSE
colorMatrix._loadMatrix(m, false);

 

Do you have any idea about how to solve this?

Thanks!

[ivan.popelyshev]

Yes, it seems that internal frag shader math of ColorMatrixFilter is a bit different, maybe it needs extra clamp. I suggest you copy pixi ColorMatrixFilter and experiment with it. Wheter clamp happens before or after you premultiply colors back

[iosonosempreio]

Hi @ivan.popelyshev and thanks for your answer! Unfortunately I am not at the level in which I can understand what is going on inside fragments, but I will give it a try.

In the meanwhile, does anyone knows if there are other solutions to control the contrast of alpha channels only in PIXI.js objects?