Projecting Complex Faces with Gladius / CubicVR.js

‹prev | My Chain | next›

Last night I found another aspect of UV mapping in Gladius that managed to confuse me. This time around, it was projecting a square image:



I had expected a projection onto a triangle to somehow squish the entire image into the triangle. Instead, I just got three corners projected onto the triangle. I can certainly understand why it works that way, but it begs the question: what happens when I try to project a square image onto a shape with more than four sides?

I am still working a pyramid shape, so I will add another point to the base:

    points: [
      [ point, 0,      0],
      [ point, point,  0],
      [ 0,     point,  0],
      [-point, 0,      0],
      [ 0,    -point,  0],
      [ 0,     0,      1.5*point]
    ],

Adding a point does nothing unless the faces built from points include them, so I have to add a fifth point to the bottom face (I also have to add a fifth triangle to the top):

    faces: [
      [4, 3, 2, 1, 0],
      [0, 1, 5],
      [1, 2, 5],
      [2, 3, 5],
      [3, 4, 5],
      [4, 0, 5]
    ],

As for the UV mapping, the bottom square had been easy enough. Just like points around an X-Y Cartesian system, I move from the origin at (0,0) around the positive ones: [ [0, 1], [1, 1], [1, 0], [0, 0] ]. For the triangles, I simply picked three coordinates: [ [1, 0], [0, 0], [0, 1] ]. But what to pick for a pentagon?

I try different variations of five points: [ [0, 0.5], [0, 1], [1, 1], [1, 0], [0, 0] ], [ [0, 0], [0, 1], [1, 1], [1, 0], [0, 0] ], etc. But the five point projection mappings all result no bottom face:



Even if I try just four project points, I still get no base on my five-sided pyramid. In the end, I can find no other recourse than to define two faces on the bottom: a triangle and a square:

    faces: [
      [4, 3, 2, 1],
      [1, 0, 4],
      [0, 1, 5],
      [1, 2, 5],
      [2, 3, 5],
      [3, 4, 5],
      [4, 0, 5]
    ],

The UV mapping for those first two points then become a four-pointer and a three-pointer:

    uv: [
      [ [1, 0], [0, 0], [0, 1], [1, 1] ],
      [ [1, 0], [0, 0], [0, 1] ],
      [ [1, 0], [0, 0], [0, 1] ],
      [ [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, with that, I have a solid face on the bottom of my five-sided "pyramid":



For reference, all of this is in the "procedural mesh", which looks like:

function proc( options ) {

  options = options || {};
  options.size = options.size || 1.0;
  var point = options.size / 2.0;

  var mesh =
  {
    points: [ /* ... */ ],
    faces: [ /* ... */ ],
    uv: [ /* ... */ ],
    // wireframe: true,
    uvmapper: {
      projectionMode: "cubic",
      scale: [1, 1, 1]
    }
  };

  return mesh;
}

And my "procedural material":

function proc( options ) {
  return {
    textures: {
      color: '/images/rygb.png'
    },
    opacity: 1.0
  };
}

In the end, I cannot project onto a shape more complex than a square. In other words, anything more complex than a square has to be assembled from a combination of squares and triangles. That is definitely useful information to know.

I will call it a night here. Up tomorrow, I think I will examine the projectionMode setting in uvmapper. None of this is feeling very "cubic" and initial experiments suggest that I am, in fact, doing "planar" projection instead. But I'll figure that out tomorrow.


Day #410