Texture Bleeding occurs on a sprite atlas

[eguneys]

I have a texture atlas with sprite frames at x y w h; 0 0 16 16, 16 0 16 16 , when I try to render this frame textures side by side with no gap, I get black lines in between.

 

I asked this question on SO https://stackoverflow.com/questions/60702397/texture-bleeding-despite-disable-mipmaping-and-half-pixel-correction. The problem happens when I use Pixi.

[ivan.popelyshev]

Add transparency between sprites. Pack it with texturePacker or any free tool available.

Coding solutions are too big to be included in open-source lib by default, you have to do it yourself.

Use custom fragment shader that clamps texture coords like https://github.com/pixijs/pixi-tilemap/ does it. If your case is actually tilemap - just use the plugin itself!

If you need intro to pixi shaders, here it is:

https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js

https://www.pixiplayground.com/#/edit/--OBWFscGUsLwgex5VugD - not included in official examples yet. How to make custom batch shader for Graphics and Sprites. Put extra info in vertices, your texture frame, clamp it later.

SpriteMaskFilter should help you understand how to get that info:  https://github.com/pixijs/pixi.js/tree/dev/packages/core/src/filters/spriteMask ,  and here's where pixi-tilemap uploads texture info: https://github.com/pixijs/pixi-tilemap/blob/master/src/RectTileLayer.ts#L257

If you are overwhelmed by info about shaders - just add the transparent line between sprites in your atlas   In case you use mipmapping - you need bigger padding, depends on the scale you use. Dpwn to 8x - then it should be 8 pixels.

 

Edited March 21, 2020 by ivan.popelyshev