Sprite is snapping to border of filter

[Johnny Kontrolleti]

I have a scene/stage I apply a filter (you can find the filter attached below) to.

It works fine, but the filter kind of has a weird behavior when a sprite/image reaches the border (example video below) - somehow it snaps to the border how so?

`filter.autoFit = true` kind of solves the problem, but using this makes the filter barely visible.

constructor() {
    this.renderer = PIXI.autoDetectRenderer({width: window.innerWidth, height: window.innerHeight, transparent: true});

    this.app = new PIXI.Container();
    if (!this.app) return;

    this.stage = new PIXI.Container();
    this.app.addChild(this.stage);

    document.body.appendChild(this.renderer.view);

    const frag = FragmentShader.split('\n').reduce( (c, a) => c + a.trim() + '\n' );
    filter = new PIXI.Filter(null, frag);
    filter.apply = (filterManager, input, output, clear) => {
        filterManager.applyFilter(filter, input, output, clear)
    };

    filter.uniforms.x = 0; // changed on click
    filter.uniforms.y = 0; // changed on click

    filter.padding = 10;

    this.stage.filters = [ filter ];

    ...
}

Short preview of issue:

 

Edited May 7, 2020 by Johnny Kontrolleti

[ivan.popelyshev]

Need out-of-screen padding like in other case.

something like "container.filterArea = renderer.screen.clone().pad(10)" should do it.

As I mentioned earlier, filter downscales the image , so on a border its just same pixel on whole row before it gets to actual data it knows about.

[Johnny Kontrolleti]

19 minutes ago, ivan.popelyshev said:

something like "container.filterArea = renderer.screen.clone().pad(10)" should do it.

As I mentioned earlier, filter downscales the image , so on a border its just same pixel on whole row before it gets to actual data it knows about.

this.stage.filters = [ filter ];
this.stage.filterArea = this.renderer.screen.clone().pad(10);

I added this to the stage (which is a PIXI.Container()), but it didn't affect the output.

If it help, I could try to create a codepen again!

[ivan.popelyshev]

Oh right, need "filter.autoFit = false" with it too

Edited May 7, 2020 by ivan.popelyshev