Sign in to follow this  
eguneys

Texture Bleeding occurs on a sprite atlas

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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 by ivan.popelyshev

Share this post


Link to post
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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.