# Texturize a shape of multiple triangles in 2D

This is an example of a shape consisting of multiple points, triangles and eventually a shape:

Red Dots = Vector3 (X, Y, Z) or Vector2 (X, Y)

If I have a Texture of a certain size, how do I texturize this area in the best way so that the texture inside the shape matches the shape and does not overlap anywhere? Perhaps also with a chance to scale the texture in case it's too small or to big for the shape, but still so that it gets rendered correctly.

Do I treat the shape as a rectangle? Figure out it's 4 corners? Or do I calculate the distance between Center - (Texture Width / 2) and Point (to see how "many" times the texture can fit between on that axis to estimate at what Coordinates the Texture should be at that certain point?

I've looked at Texture Mapping but haven't found any concrete examples that it explains it well, it's also confusing with 0.0-1.0 values for Texture Coordinates.

• If you want to add a solution, do it as another answer, don't edit other answers with your own.
– House
Nov 24, 2012 at 7:23

This is the effect that will occur if you treat the shape as a rectangle, and use its bounding box as the 0,0 -> 1,1 mapping:

This is your texture: This is your shape with texture coords mapped to bounding box(approximate guesses shown): This is the final result:

As you can see you've basically sliced a shape out of the original texture. If that's not what you want to do, you'll need to find some other mapping that makes sense for your particular object.

• This is exactly as I thought about. But it seems scaled, how do I scale it and perhaps rotate it? I presumed that the center was X:0,Y:0. TopRight corner, X:1, Y:-1, BottomRight corner: X1 Y:1, BottomLeft corner: X: -1 Y: 1, TopLeft corner: X: -1, Y: -1... Perhaps that's why my methods have failed. I'll try using this as a reference point to see if I get results. If I want to scale it 2*Size I just use 2.0 instead of 1.0? Nov 24, 2012 at 2:59
• That depends on how you're wrapping your texture. Typically values greater than 1 have their >1 components ignored. This results in the texture repeating itself. Rotating it would take some more complex math and is not really in the scope of this question. To scale it bigger you would actually use smaller texture coordinates, not bigger. Nov 24, 2012 at 4:16

Solution:

public static class MappingHelper
{

public static VertexPositionTexture[] TextureMapping(VertexPositionTexture[] vertices, float scale = 1f)
{

bool initialized = false;

float x, y;
float lX = 0, hX = 0, lY = 0, hY = 0;

for (int i=0; i < vertices.Length; i++)
{

x = vertices[i].Position.X;
y = vertices[i].Position.Y;

if (!initialized)
{
hX = x;
lX = x;
hX = y;
hY = y;

initialized = true;
}
else
{
if (x > hX)
{
hX = x;
}
else if (x < lX)
{
lX = x;
}

if (y > hY)
{
hY = y;
}
else if (y < lY)
{
lY = y;
}
}

}

float width = (Math.Abs(lX) + Math.Abs(hX)) / scale;
float height = (Math.Abs(lY) + Math.Abs(hY)) / scale;

for (int i = 0; i < vertices.Length; i++)
{
vertices[i].TextureCoordinate.X = vertices[i].Position.X / width;
vertices[i].TextureCoordinate.Y = vertices[i].Position.Y / height;
}

return vertices;

}
}