Jump to content

Gooey Effect in PIXIjs v5 (metaballs)


Recommended Posts

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:


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?


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