Vertex strange stripes

[Merulo]

Welcome!

I'm working on some project.

I wrote this function:

void Display::Draw(unsigned int layer)
{
        for (unsigned int i = 0; i < m_width; ++i)
                for (unsigned int j = 0; j < m_height; ++j)
                {
                        int tileNumber;

                        tileNumber = Map->MapData[i][j].TextureID;

                        int tu = tileNumber % (tilemap.getSize().x / 64);
                        int tv = tileNumber / (tilemap.getSize().x / 64);

                        sf::Vertex* quad = &vertices[(i + j * m_width) * 4];

                        quad[0].position = sf::Vector2f((float)i * 64 - MOVED, (float)j * 64 - MOVED);
                        quad[1].position = sf::Vector2f((float)(i + 1) * 64 - MOVED, (float)j * 64 - MOVED);
                        quad[2].position = sf::Vector2f((float)(i + 1) * 64 - MOVED, (float)(j + 1) * 64 - MOVED);
                        quad[3].position = sf::Vector2f((float)i * 64 - MOVED, (float)(j + 1) * 64 - MOVED);

                        quad[0].texCoords = sf::Vector2f((float) tu * 64, (float)tv * 64);
                        quad[1].texCoords = sf::Vector2f((float)(tu + 1) * 64, (float)tv * 64);
                        quad[2].texCoords = sf::Vector2f((float)(tu + 1) * 64, (float)(tv + 1) * 64);
                        quad[3].texCoords = sf::Vector2f((float) tu * 64, (float)(tv + 1) * 64);
                }

        window->draw(vertices, &tilemap);

}

 

But on some computers a strange thing happens. The file which is held in the tilemap is attached to the post.
(The textures aren't beautiful, so don't judge). The problem are the stripes which are showing (check the attached screenshot). They shouldn't since TextureID contains numbers 0-5.

Why are they showing,
and how to prevent them? 

[Mortal]

i had same problem with this,
so, the only solution that work for me, is by adding "half-pixel" to texture coordinate. as shown here

[Mario]

It's a precision problem. Round your coordinates. Sometimes you're rounding up, sometimes down (which then causes those gaps).

[Merulo]

Adding "half-pixel" is helping when its not zoomed-out. I guess i can tie it up to zooming, but still, this is not perfect solution.

If it's a precision problem then rounding correctly won't help. Even though i tried rounding all up, rounding all down, and rounding some down and some up it did not help.
The problem is probably in the non-perfect representation of numbers by the float type.

For the record, this is the way i round down:

                        quad[0].texCoords = sf::Vector2f(floor((float)tu *       64 + Fraction), floor((float)tv *       64 + Fraction));
                        quad[1].texCoords = sf::Vector2f(floor((float)(tu + 1) * 64 - Fraction), floor((float)tv *       64 + Fraction));
                        quad[2].texCoords = sf::Vector2f(floor((float)(tu + 1) * 64 - Fraction), floor((float)(tv + 1) * 64 - Fraction));
                        quad[3].texCoords = sf::Vector2f(floor((float)tu *       64 + Fraction), floor((float)(tv + 1) * 64 - Fraction));
 

[Mortal]

It's a precision problem. Round your coordinates. Sometimes you're rounding up, sometimes down (which then causes those gaps).

there is a question regard this issue in the forums , to add correction factor to texture coordinates is a valid solution to this problem. based on that question

Adding "half-pixel" is helping when its not zoomed-out. I guess i can tie it up to zooming, but still, this is not perfect solution.

thats true. the example that i showed has fix zooming. but incase varying zooming i added "0.1f" to the vertex position instead. as shown here.
note: i used isomeric grid.
i hope that will help

[BlueCobold]

When zooming, even perfectly aligned vertices/polygons might show weirdly colored pixels at the edges between the polygons. That's due to the fact that the color from the texture needs to be interpolated and that's where filters will be used by OpenGL. Those can cause texture-bleeds (where pixels next to your source-area must be taken or at least incorporated into the final color). You can't solve this problem by overlapping your vertices and you shouldn't overlap them anyway. You need to fix your texture to not have areas which during sampling might take a totally different color (as it will happen if you just put different types of textures right next to one another in the same texture file).
tl;dr: Change your texture to prevent-texture bleeding, and don't do weird offset-stuff in your render-code.