TiltShiftFilter shows a strange behavior where the effect starts and ends

Matt-Maerz commented 7 months ago

Current Behavior

pixi.js version 8.1.0
pixi.js filters version 6.0.3
Browser Version 119.0.6045.200:
Windows Version 11 Home 23H2:

The TiltShiftFilter shows a strange behavior where the effect starts and ends. (I have lowered the quality of the Blur for the performance) Here are a few examples:

RESOLUTION: 1920x1080

new PIXI.filters.TiltShiftFilter({ blur: 4000 ,gradientBlur: 40, start:{x:0,y:1080/2}, end:{x:1920, y:1080/2} }) 1080p

new PIXI.filters.TiltShiftFilter({ blur: 4000 ,gradientBlur: 40 }) 1080p_WithoutStartAndEndpoint

RESOLUTION: 1280x800

new PIXI.filters.TiltShiftFilter({ blur: 4000 ,gradientBlur: 40, start:{x:0,y:800/2}, end:{x:1280, y:800/2} }) 800p

new PIXI.filters.TiltShiftFilter({ blur: 4000 ,gradientBlur: 40 }) 800p_WithoutStartAndEndpoint

Expected Behavior

With pixi.js v7.4.0 and pixi-filters v5.2.0 you got this: new PIXI.filters.TiltShiftFilter({ blur: 4000 ,gradientBlur: 40 }) 1080p_pixi_v740_pixi-filters_520

Steps to Reproduce

let tempContainer = new PIXI.Container(); tempContainer.filters = [new PIXI.filters.TiltShiftFilter({ blur: 4000 ,gradientBlur: 40, start:{x:0,y:1080/2}, end:{x:1920, y:1080/2} })]

bigtimebuddy commented 3 months ago

Do you have a runnable example (jsfiddle, codesandbox, etc) that demonstrates this issue?

Matt-Maerz commented 3 months ago

Hey, Thanks for your reply. Here is an example: https://jsfiddle.net/8ur4t3hw/36/

But I found out that this happens when there are several elements in a container. In the example you can see from the grass texture that it works normally. But with the bunnies (250 pieces) it doesn't work again. I would assume that the filter is always in the centre of the screen.

Best regard Matt

pixijs / filters