[SOLVED] Gaps appearing between scaled sprites when using shader filter (v5.3.3)

[jcwilk]

Hi, fairly new to pixi and very new to shaders so apologies in advance if I'm doing something very wrong, but the behavior I'm seeing very much has a "bug feel" to it so thought I'd bring it up to see if it's either a known issue with a workaround, if I'm using shaders wrong, or if I just shouldn't be using pixi for this (fingers crossed that's not the case).

Basically, I'm trying to arrange a grid of adjacent sprites with no gaps between them. These sprites are low-res (only 8px by 8px) and scaled up arbitrarily with nearest neighbor to fit a 90x90 area comfortably in the window. After combing through the forum and wikis I was able to piece this together pretty well and it seemed super reliable and straightforward once I got it working.

Then I tried to apply filters to each sprite which worked great except that a 1px gap (screen pixels not low-res game pixels) appeared between many of the tiles. Commenting out the line that applies the filter to each sprite removes the gaps so it's definitely something about rendering the filter that seems to be screwing with the positioning (or perhaps the edge pixels of the sprite).

Are filters known to ruin alignment with scaling? I tried disabling nearest neighbor so they were all blurry but there was still a sharp gap between the blurry tiles. I may very well be doing the filter very incorrectly, as I said I'm a total shader noob.

Here's a jsfiddle that demonstrates the issue: https://jsfiddle.net/jap4qurz/15/

Thanks in advance!

Edit: Turns out it was because I was hardcoding alpha to 1 in the shader, I guess some side effect of the scaling is that it adds in some transparent pixels around the edge or something? When I set the shader to respect the original alpha of the pixel then the black 1px borders went away, even though there were zero transparent pixels in the original image. Strange behavior but my problem is solved! Feel free to delete the post unless it would be useful to leave for others.

Edited August 24, 2020 by jcwilk
figured it out

[ivan.popelyshev]

> When I set the shader to respect the original alpha of the pixel then the black 1px borders went away

Not that strange, there are many interesting artifacts coming from combinations of LINEAR filtering,premultiplied/not-premultiplied alpha and filters that dont take into account those.