How to apply a filter throughout the stage?

[Alain]

I want to apply the filter to the whole scenario, but the result is not what I expected, it only applies to a certain part of the scenario, I don't know if the problem is in the texture size that are sprite made with ctx2d

https://codepen.io/AlainBarrios/pen/KKwzLVd?editors=0010 this is the pen

Edited December 12, 2019 by Alain

[ivan.popelyshev]

I'm sorry, your code is too big for 2 AM night. I can check it in weekend, or you can make it smaller.

I looked for 5 minutes or so, i think it should work. things like "this.app.stage.filterArea = this.app.screen" didnt work

Edited December 12, 2019 by ivan.popelyshev

[ivan.popelyshev]

Got it. You are doing things in input normalized coords, not filter normalized coords. I explain it people every time, they should use conversion functions.

"this.app.stage.filterArea = this.app.screen" makes it full-screen , when input coords = filter coords and solves the problem. In that case your waves work in left and right, and in center they dont because they are 0 in shader computations

Please use the line i gave you OR read /
https://github.com/pixijs/pixi.js/wiki/v5-Creating-filters
https://github.com/pixijs/pixi.js/wiki/v4-Creating-filters

and apply conversion function "vTextureCoord * inputSize.xy / outputFrame.zw" ,  which converts input normalized coords (and input size is kinda pow2 and not screen) to filter normalized coords.

[ivan.popelyshev]

Previous topic regarding normalized input coords is here: https://github.com/pixijs/pixi.js/issues/6266

Basically, pixi optimizes memory in case you request big number of filters, it uses pow2-temporary textures and not the size of filter. Same size is used ONLY if its fullscreen , to be compatible with old v3 filters, that makes everything easier. Use that trick with "filterArea=screen" if you dont need to deal with strange pow2 textures.

Edited December 12, 2019 by ivan.popelyshev

[ivan.popelyshev]

Btw, If you tell me more about your case, maybe I give you better solution. For example, if you want to apply that displacement only on text under mouse, maybe its better to use Meshes instead and not pass it through filter: https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js , you can use "myText.updateText()" and then use mesh with "myText.texture". It'll be faster than a full-screen filter.

Edited December 13, 2019 by ivan.popelyshev