visual glitches in PIXI.TilingSprite from PIXI.Spritesheet

Expected Behavior

PIXI.TilingSprite looking correct no matter from which source it was created.

Current Behavior

There are visual glitches (flickering) when moving a PIXI.TilingSprite that is created from a PIXI.Spritesheet that is created from an image for which mipmaps are generated which is the default for power-of-two sized images.

In the following screenshot the yellow lines in the middle (blue background) are looking wrong. In the provided “live” example those lines are flickering noticeably. The yellow lines on the left (red background) and the right (green background) are looking correct.

Possible Solution

Workaround 1: Use a non-power-of-two sized image for the sprite sheet.

Workaround 2: Disable mipmaps completely before creating anything: PIXI.settings.MIPMAP_TEXTURES = PIXI.MIPMAP_MODES.OFF

Both are only workarounds. I assume this has to be fixed within PIXI.TilingSprite.

Steps to Reproduce

Just open the provided example in any browser.

Environment

• pixi.js version: 5.3.0, 5.2.4
• Browser & Version: Firefox 77.0.1 on Windows 7 64 Bit, Ungoogled Chromium 80 on Windows 7 64 Bit, Chrome 84 on Android 9, Firefox Focus on Android 9
• OS & Version: Windows 7 64 Bit, Android 9
• Running Example on GitHub: https://gist.github.com/TeeTeeHaa/01f2188eb358f913f9dee5f4bed8d3da
• Running Example on my private website: https://www.teeteehaa.de/pixijs/tilingsprite-from-spritesheet/

[ivanpopelyshev]

Of course I’ll review your stuff in detail! When i have enough time.

All those isseus were addressed in https://github.com/pixijs/pixi.js/pulls?page=2&q=is%3Apr+tilingsprite , 4 years ago, I remember how difficult it was, and to improve that thins will be really hard

Usually, those kind of issues in other renderers are answered as “Its WebGL. the feature is not supported, use full-sized textures.” 😉

[TeeTeeHaa]

Some info has to be passed to texture.uvMatrix or tilingsprite.uvMatrix instance - clampOrigin has to be -0.5 or 0.5 depending on color of pixels are around your texture in spritesheet.

I tried out setting those attributes, with various different values, but without success. I would appreciate suggestions what I should do in my provided example to avoid the visual glitches (the flickering). I do not want to use any of the two workarounds I mentioned, because those have negative side effects.