## Wednesday, June 6, 2012

### UV Mapping and Triangles

‹prev | My Chain | next›

I continue tonight trying to understand UV mapping, specifically UV mapping in Gladius.

I have been working with a pyramid (square bottom and four trangles), whose faces can be defined as:
``````  var mesh =
{
// ...
faces: [
[3, 2, 1, 0],
[0, 1, 4],
[1, 2, 4],
[2, 3, 4],
[3, 0, 4]
],
uv: [
[ [0, 1], [1, 1], [1, 0], [0, 0] ],
[ [0, 1], [1, 1], [1, 0], [0, 0] ],
[ [0, 1], [1, 1], [1, 0], [0, 0] ],
[ [0, 1], [1, 1], [1, 0], [0, 0] ],
[ [0, 1], [1, 1], [1, 0], [0, 0] ]
],
// ...
};``````
I am not sure about the UV mappings for the triangles. Obviously, triangles have three sides, so how do those UV mappings work? My guess would be that, if I had a square image:

Then mapping it into a triangle should squish two top corners together in the vertex of the triangle while the other two corners of the square occupy the other corners of the triangle.

When I update the material to use my graphic:
``````        return {
textures: {
color: '/images/rygb.png'
},
opacity: 1.0
};
``````

The result is:

Hunh. So it seems that my hypothesis was wrong. The UV mapper only uses the first three corners to map. If the UV coordinates work out like:

Then I ought to be able to get the red, green, and blue corners with:
``````    uv: [
[ [0, 1], [1, 1], [1, 0], [0, 0] ],
[ [1, 0], [0, 0], [0, 1] ],
[ [1, 0], [0, 0], [0, 1] ],
[ [1, 0], [0, 0], [0, 1] ],
[ [1, 0], [0, 0], [0, 1] ]
],``````
And, that is exactly what I see:

I wonder how that maps into hexagons or more complicated shapes. I will have to pick back up with that tomorrow.

Day #409