Displacement filter with transparency

[amadare42]

Hi, I'm trying to implement this effect: https://codepen.io/spaarwt001/pen/mqxRvZ .

But I don't want to have the whole scene to be transparent. Content should be visible behind this disappearing sprite. So when trying to implement I'm don't see transparency that I was expecting:

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

Could you guys provide some insights on what am I missing here?

[ivan.popelyshev]

Nope, I dont understand what you want. Why just not put background sprite behind this sprite?

[amadare42]

O, hello again.

I assumed that the displacement filter will add transparency to highly displaced areas and create this cool effect as in the first link. But it has a solid color non-transparent color instead.

So basically I want to achieve that highlighted areas in the screenshot would be transparent.

 

P. S. Thanks for the previous hint & happy NY to you!

Edited January 1, 2020 by amadare42

[ivan.popelyshev]

> I assumed that the displacement filter will add transparency to highly displaced areas and create this cool effect as in the first link. But it has a solid color non-transparent color instead.
 

It brings pixels from edges. Three ways to fix:

1. add a transparency edge in your image

2. move image 1 pixel to the right-down and specify filterArea as "new Rectangle(0, 0, image.width+2, image.height+2)" - its absolute coords of area that gets filtered. Thus we'll have 1-pixel transparent edge around image, again

3. modify the shader that way it makes pixels transparent and not brings coords inside the UV. That's in case you familiar with 
https://github.com/pixijs/pixi.js/blob/dev/packages/filters/filter-displacement/src/DisplacementFilter.js
and https://github.com/pixijs/pixi.js/blob/dev/packages/filters/filter-displacement/src/displacement.frag