Jump to content

Sprite is snapping to border of filter


Johnny Kontrolleti
 Share

Recommended Posts

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 by Johnny Kontrolleti
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...