Manipulating masks and displacement maps in pixi.js

[TheMonkeyCandleholder]

Hi! I'm looking for creative ways to change/animate shapes of masks and displacementmaps in pixi.js.

Any good suggestions out there apart from the more obvious techniques?

[TheMonkeyCandleholder]

With "obvious techniques" I mean rotating, changing size etc.

Is it possible to put two displacement maps on top of each other and have them interact? (decrease each map's alpha by 50% then I guess?)

..things like that..

[Exca]

You could use a rendertexture as a displacement map and render whatever you want to that. Might make things a bit slower though.

[ivan.popelyshev]

> Is it possible to put two displacement maps on top of each other and have them interact? (decrease each map's alpha by 50% then I guess?)

There are multiple ways to do it.

Here is one: https://gameofbombs.github.io/examples-heaven/?v=v4.8.8#/picture/displacement-backdrop.js , pixi 4.8.8 + pixi-picture plugin. Requires that whole stage has to be in another filter. Its not ported in v5 yet.

Another is to take render your displacement in texture and then apply DisplacementFilter using that texture. It can be simplified by using "pixi-layers" getRenderTexture() trick, like here: https://pixijs.io/examples-v4/#/plugin-layers/trail.js , it should work on v5 too.

Anyway, you have to learn what RenderTexture is.