amadare42

Displacement filter with transparency

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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! :)

chrome_qNtmKdNyP4.png

Edited by amadare42

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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.

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

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.