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