SFML community forums

Help => Graphics => Topic started by: roccio on January 05, 2017, 01:37:25 pm

Title: Triangle texture mapping
Post by: roccio on January 05, 2017, 01:37:25 pm

Hello, I need to map a triangle in a way that the texture "follow" the lines of the triangle.
Now if I use sfml mapping I get the first image (assuming the texture is made of vertical red lines); I would like to get something like the second.

Any advice?

Title: Re: Triangle texture mapping
Post by: Laurent on January 05, 2017, 02:16:51 pm

Can you show how you create your triangle, and assign texture coordinates to it?

Title: Re: Triangle texture mapping
Post by: roccio on January 05, 2017, 02:26:17 pm

Yes, sir,

I have two tests, one with default convexshape:

Code: [Select]

sf::ConvexShape polygon;
polygon.setTexture(&compassStrip);
polygon.setPointCount(4);
polygon.setPoint(0, sf::Vector2f(-100, 0));
polygon.setPoint(1, sf::Vector2f( 100, 0));
polygon.setPoint(2, sf::Vector2f(200, 100));
polygon.setPoint(3, sf::Vector2f(-200, 100));
polygon.setOutlineColor(sf::Color::Red);
polygon.setOutlineThickness(1);
polygon.setPosition(300, 20);

and another with vertexarray (texture is 1630x274):

Code: [Select]

std::vector<sf::Vertex> vertices;
vertices.push_back(sf::Vertex(sf::Vector2f(400,100) + sf::Vector2f(0, 0 ),  sf::Color::White,    { 815,0 }));
vertices.push_back(sf::Vertex(sf::Vector2f(400,100) + sf::Vector2f(-300, 300), sf::Color::White, { 0,274 }));
vertices.push_back(sf::Vertex(sf::Vector2f(400,100) + sf::Vector2f( 300, 300), sf::Color::White, { 1630,274 }));


Title: Re: Triangle texture mapping
Post by: Laurent on January 05, 2017, 02:53:55 pm

And what if the top of your triangle was made of 2 points, at same position but first with top-left texture coordinates and second with top-right coordinates?

Title: Re: Triangle texture mapping
Post by: roccio on January 05, 2017, 02:59:53 pm

Already tryied this, and the result is always the same as the first image, no "deformation" at all.
I think I need to look at some affine shader...

Title: Re: Triangle texture mapping
Post by: Mario on January 05, 2017, 09:33:09 pm

As far as I know that's not really possible using the fixed function pipeline (given your input texture) due to how texture lookup works (it's more obvious when trying to add perspective by stretching a rectangle). I think if you try Laurent's idea it might work, but could also have an artifact line where the two triangles connect (see this SO issue (http://stackoverflow.com/questions/25108996/how-to-texture-a-random-convex-quad-in-opengl)).

As a random idea, I'd use a simple shader, something like my example here on Shadertoy (https://www.shadertoy.com/view/ltKXzw).

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Get the uv coordinates (shader toy specific)
        vec2 uv = fragCoord.xy / iResolution.xy;
   
    // Horizontal offset (start in the middle)
    uv.x -= .5;
   
    // Scale based on y coordinate
    uv.x /= (1. - uv.y);
   
    // Get the actual color value from the Sampler2D
    fragColor = texture2D(iChannel0, uv);
}

While you can't transfer this code 1:1 to SFML (you'll have to setup the uniforms etc. which shouldn't be too hard), it should give you an idea on how you could do it. Note that this requires the top vertex to have (0.5, 0) as its UV coordinates. The other two use (0, 1) and (1, 1).