Getting rid of texture bleeding

Question

Edit: I figured out what problem I was facing, it's called Texture/Pixel bleeding, which I was not aware of yet. I posted an answer below consisting of a small description of the problem and a link to a post, that I felt explained the problem pretty well.

---

I'm building a little engine for myself (okay, let's say framework) to learn using DirectX 11. I'm pretty pleased with the results so far but today I ran into a little problem I was not able to solve. When rendering a textured model there are ugly gaps at some polygon joints observable. I will depict the issue more clearly with images of the example I'm rendering at the moment. My model consists of simple cuboids, one of those uses the following part of the UV map (marked vertices and triangles in yellow to clarify, the lines and points are not actually part of the texture).

(As you can see, The cuboid has 14 vertices

Now, I want to display the the pixels discrete. That means: Don't smooth the pixels. Doing this I got visual issues seen in the screenshot below. This is a screenshot of the edge, where the two triangles meet.

(When I use smoothed pixels by using a linear filter when creating the sampler Description there are no real gaps, but the edges of the plane are influenced by the color that would have been the gap)

As you can see, there is a gap between polygons. The corresponding spot on the uv map is marked in red on the top picture. This behaviour is observable at every spot two polygons, that are not adjacent on the UV map, meet. Also note how the gap is partly filled with orange/pink, the color that is adjacent to the polygon on the UV map (Pixels of other meshes, in this case the right arm).

Steps I took to find a solution:

• First I thought it could be caused by float inaccuracies. Moving every Vertex a little bit (the minimum a float can encode) to the inside of the UV-Map would probably solve the issues. But I think that this would be one hell of a workaround and can't be the solution.
• Changed the texture to be 16x16 (instead of 13x12) because I thought this would decrease the inaccuracies with float, but it didn't help much.
• I thought changing the filtering to something different could help, but I wasn't lucky.
• I even tried modifying the uv coordinates inside the Pixel Shader, but this was doomed to fail and resulted in some weird (but in some way funny) results.
• Googled around with various keyword, but couldn't find anything that appeared to solve this issue.
• When I tested drawing it as a wireframe the edge was drawn in orange/pink

---

I'm probably missing the obvious here, but how can I fix this and get rid of the gaps?
I triple checked that all vertex data (x|y|z and u|v) are correct. Is there any kind of filter I am missing? Or do I even have to use some nasty workaround (like surrounding the actual texture on the uv map with an extra row of correctly colored pixels)? I would like to resolve this before going on.

Thanks in advance to anyone taking the time to read (and even answer or point me in the right direction) this presumably stupid question.

In case it's relevant here is the data for the 4 involved vertices(numbering as depicted above). First Vector is x|y|z, second one u|v:

vertices[ 0] = { { -1, -1.5f, .5f },{  9.f / 16.f, 5.f / 16.f }};
vertices[ 1] = { {  1, -1.5f, .5f },{ 11.f / 16.f, 5.f / 16.f }};

vertices[11] = { { -1, -1.5f, .5f },{  8.f / 16.f, 4.f / 16.f }};
vertices[12] = { {  1, -1.5f, .5f },{  6.f / 16.f, 4.f / 16.f }};

(A screenshot of the complete model in case the look of the whole thing wasn't clear. There are also fragments visible at the head and the top of the arm. )

Answer 1

After much more research I found out what the source of these "gaps" was. They're not really gaps, they're effects of pixel/texture bleeding (I was not aware of this problem).

---

What is texture bleeding?

Texture bleeding is the effect of color values of adjacent pixels in the UV-map/texture "bleed over" in your polygon. If using linear filtering it alters the rendered colors at the edges of the polygon. If you're not using any filter a small line of the adjacent color appears at the edges (as in my case, see the pictures in the question).

---

How to solve/avoid it?

There are numerous ways to avoid it, depending on the specific case.

• Surround the pixels of the UV Map with at least one additional pixel (if using linear filtering or other filters you have to add more)
• For tiles filling the entire texture you can use D3D11_TEXTURE_ADDRESS_CLAMP (or the OpenGL equivalent), so you don't need the additional line. (When using a texture atlas for tiles I'd suggest extracting the tiles as individual texture ressources).

If you want to read more about it I'd recommend this forum post: Click

---

P.S. I edited the title and the question so that people stumbling over this question aren't confused by the weird description of the problem