Displacement map on mask?

[RicLeP]

Hello,

I am hoping you can help. I am trying to apply a displacement map to a mask but everything I try either does nothing or applies the displacement to the mask and the masked image. I just want the mask to constantly ripple and animate leaving the image (or video) as normal.

I’ve a CodePen of my progess with everything rippling.

https://codepen.io/RicLeP/pen/JjGZzmO

Pixi.js version 5.3.0.

Thank you

Ric

[ivan.popelyshev]

Unfortunately, its not easy.

There are two ways.

1. wait when i move pixi-picture to v5. status: almost done, 3 months ago ., people are waiting by im very lazy.

2. copy displcament shader and add a mask inside. This demo has it: https://codesandbox.io/s/tender-franklin-iycmu

 

[ivan.popelyshev]

You have to understand that without copy-background-texture hack that was in pixi-picture it is not possible for filter to affect background. Filter can affect only what lies inside container.

.

Edited July 12, 2020 by ivan.popelyshev

[RicLeP]

Thanks for coming back to me. I might wait as it looks beyond my level of understanding! Or maybe after I finish other parts of the project I will re-examine it as it’s just for a nice effect, not critical.