filters Unexpected behavior for out-of-bounds filters

If a container to which the filter is applied is partially out of bounds, the filter can have unintended behavior. Consider the reflection filter. The default point at which it switches from normal to "reflected" is at y = 0.5.

If we move the duck so that part of it is outside the viewport, the image we get is different:

The reason for this is that the filter is applied to the visible portion of the container. However, what should one do to get the filter applied to the container as if it wasn't out of bounds? That is, the duck from the first picture, but translated up? Is there even a way to get the position and size of the final filtered texture, so that we can at least compare it to the source container.

For example, in the above pictures, let's say that the original position of the duck sprite was [50, 50], with the size of [100, 100]. We then move it to [50, -50]. The filtered texture gets rendered at [50, 0], with size [100, 50]. Is there a way to get this "final" position of the filtered texture?

Oct 05 '24 16:10 BarberDuckyFazi

This may help in the coming pixi.js release: https://github.com/pixijs/pixijs/pull/10923

Oct 05 '24 16:10 bigtimebuddy

Yep, saw it on dev docs a moment ago. Thanks :grin:

Is the release already scheduled? If so, where could I see the date?

Oct 05 '24 18:10 BarberDuckyFazi

Broken

https://jsfiddle.net/bigtimebuddy/tmjpovec/

Fixed

https://jsfiddle.net/bigtimebuddy/sfkah960/

It's unclear when the release will happen, but likely this week or next. In the meantime you can get the latest dev version by running.

npm install pixi.js@dev

Oct 05 '24 22:10 bigtimebuddy