Pixi.js: Image Displacement on Image masked with Text

[joshuaeelee]

New to PIXI. I have a text, masked by an image. I need to add displacement filer on the image only, but not affecting the text. At the moment, it is affecting the text, but this is not the result I am wanting. Anyone know how to just have the displacement on the image?

Codepen http://codepen.io/joshuaeelee/pen/aJJRxB

[ivanpopelyshev]

You have to render image with displacement into renderTexture, make a sprite out of it and use it as a mask. Also you have to ren-render it every time you change something in displacement.

I'll target this and other cases in future filters update.

[ivanpopelyshev]

One more possible solution:

1. make a container with VoidFilter (container A)
2. put the text into container A.
3. add your image to containerA, add two filters: DisplacementFilter, and AlphaMaskFilter
4. set blendMode of AlphaMaskFilter to "MULTIPLY"

[joshuaeelee]

Thanks @ivanpopelyshev
I will try your solution.

I just randomly tried something on my side, and it does what I want. Probably not the best way though, http://codepen.io/joshuaeelee/pen/aJJRxB (updated)

[ivanpopelyshev]

Well, that works too :)

[ivanpopelyshev]

It works because it doesnt matter which texture of two is a mask, you can reverse order. May be something wrong will happen with alpha, but I believe that it can be solved too.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.