Ugly texture on sf::VertexArray (sf::Quads)

[korczurekk]

Hi, here's my code:

#include <SFML/Graphics.hpp>

using namespace std;

const unsigned WINDOW_DEFAULT_WIDTH = 800;
const unsigned WINDOW_DEFAULT_HEIGHT = 600;

int main()
{
    sf::Texture tex;
    tex.loadFromFile("tex.png");

    sf::VertexArray quad1(sf::Quads, 4);
    quad1[0].position = sf::Vector2f(150, 110);
    quad1[3].position = sf::Vector2f(150, 210);

    quad1[0].texCoords = sf::Vector2f(0, 0);
    quad1[1].texCoords = sf::Vector2f(255, 0);
    quad1[2].texCoords = sf::Vector2f(255, 255);
    quad1[3].texCoords = sf::Vector2f(0, 255);

    sf::RenderWindow app(sf::VideoMode(WINDOW_DEFAULT_WIDTH, WINDOW_DEFAULT_HEIGHT),
                         "Qt Creator SFML template");

    sf::Clock time;
    while(app.isOpen())
    {
        /* clear screen */
        app.clear({20, 20, 20});

        /* handle events */
        for(sf::Event ev; app.pollEvent(ev);)
        {
            /* handle close button */
            if(ev.type == sf::Event::Closed)
                app.close();
        }

        quad1[1].position = sf::Vector2f(250, 110 - time.getElapsedTime().asSeconds());
        quad1[2].position = sf::Vector2f(250, 210 + time.getElapsedTime().asSeconds());

        app.draw(quad1, &tex);

        /* dipslay frame */
        app.display();
    }

    return 0;
}
 

The texture that I use:


And what I got after running my code:


Why texture looks like that?

[eXpl0it3r]

You need to set the position of all vertices not just two.

[korczurekk]

They're set in main loop.

[Laurent]

Quads are rendered as two separate triangles. Therefore there's no way to make sure that there will be continuity of texture mapping between both -- this is only possible in 3D with perspective correction enabled.

[Hapax]

You can reduce the apparent distortion by breaking the quad (original two triangle) into multiple smaller triangles. This doesn't technically "fix" the problem but can be satisfyingly close.

If your aim is to rotate a normal sf::Sprite around as if it is a three-dimensional plane, you may be interested in Selba Ward's Sprite 3D. It automatically splits sprites (quads) into as many triangles as you want and can be used in the same way as a normal sf::Sprite.

(click to show/hide)

Here's an image:

Here's a test video: