## Tuesday, June 5, 2012

### Faces in 3D

‹prev | My Chain | next›

I think I have my brain wrapped around meshes and materials as they relate to Gladius. Tonight, I aim to mess about with them to be sure.

The examples that come with Gladius are cubes:

If I understand things well, I ought to be able to convert that to a pyramid. A pyramid has a square base. In Cartesian coordinates, that could be (x, y) of (1, 0), (0, 1), (-1, 0), and (0, -1). The last point would be the tip of the pyramid, which is right in the middle (0,0), but with a z coordinate: (0, 0, 1).

So I convert the mesh proc definition to reflect that:
```function proc( options ) {

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

var mesh =
{
points: [
[ point, 0,      0],
[ 0,     point,  0],
[-point, 0,      0],
[ 0,    -point,  0],
[ 0,     0,      2.5*point]
],
faces: [
[0, 1, 2, 3],
[0, 1, 4],
[1, 2, 4],
[2, 3, 4],
[3, 0, 4]
],
// ...
};

return mesh;

}```
The faces connect the points to form one square and four triangles. Loading the demo up in my browser, I find that I have, in fact, created a pyramid:

Interestingly, it has no bottom:

I reexamine my definition to make sure that I have not missed a point. I try re-ordering the faces and the points. To no avail.

What fixes this in the end is reversing the face definition for the square. Instead of `[0, 1, 2, 3]`, I use `[3, 2, 1, 0]`:
``````  var mesh =
{
// ...
faces: [
[3, 2, 1, 0],
[0, 1, 4],
[1, 2, 4],
[2, 3, 4],
[3, 0, 4]
],
// ...
};``````
Yikes! That would seem to indicate that the rotation that the points in a `faces` definition decides the side that is the "face". That is, the face is the side from which the points are defined in a clockwise order. In the first case, I went from 0 through 3 which is a clockwise rotation from above:

In the second case, when I went from 3 through 0, the clockwise rotation would have been seen from below, defining the face:

That seems hard to remember.

Day #408