Meshes in Code

When a vertex has multiple attributes, we use multiple arrays. Here are the tables for the colored house.

var positions = [
    [  0.0,  1.0,  0.5 ],
    [ -0.5,  0.5,  0.5 ],
    [ -0.5,  0.0,  0.5 ],
    [  0.5,  0.0,  0.5 ],
    [  0.5,  0.5,  0.5 ],
    [  0.0,  1.0, -0.5 ],
    [ -0.5,  0.5, -0.5 ],
    [ -0.5,  0.0, -0.5 ],
    [  0.5,  0.0, -0.5 ],
    [  0.5,  0.5, -0.5 ],
    [  0.0,  1.0,  0.5 ],
    [ -0.5,  0.5,  0.5 ],
    [  0.5,  0.5,  0.5 ],
    [  0.0,  1.0, -0.5 ],
    [ -0.5,  0.5, -0.5 ],
    [  0.5,  0.5, -0.5 ]
];
var colors = [
    [ 1.0, 1.0, 0.9 ],
    [ 1.0, 1.0, 0.9 ],
    [ 1.0, 1.0, 0.9 ],
    [ 1.0, 1.0, 0.9 ],
    [ 1.0, 1.0, 0.9 ],
    [ 1.0, 1.0, 0.9 ],
    [ 1.0, 1.0, 0.9 ],
    [ 1.0, 1.0, 0.9 ],
    [ 1.0, 1.0, 0.9 ],
    [ 1.0, 1.0, 0.9 ],
    [ 0.8, 0.0, 0.0 ],
    [ 0.8, 0.0, 0.0 ],
    [ 0.8, 0.0, 0.0 ],
    [ 0.8, 0.0, 0.0 ],
    [ 0.8, 0.0, 0.0 ],
    [ 0.8, 0.0, 0.0 ]
];
var triangles = [
    [  0,  1,  4 ],
    [  4,  1,  3 ],
    [  3,  1,  2 ],
    [ 10, 13, 11 ],
    [ 13, 11, 14 ],
    [  1,  6,  2 ],
    [  2,  6,  7 ],
    [  2,  7,  3 ],
    [  3,  7,  8 ],
    [  3,  8,  4 ],
    [  4,  8,  9 ],
    [ 12, 15, 10 ],
    [ 10, 15, 13 ],
    [  5,  9,  6 ],
    [  6,  9,  7 ],
    [  7,  9,  8 ]
];

In truth, this array-of-arrays representation is used because it makes geometry processing more straightforward, which we'll see later on. To use these tables for rendering, we must flatten each to a single linear array. This JavaScript function does so, returning its input in a new, flat array.

function flatten(a) {
    return a.reduce(function (b, v) { b.push.apply(b, v); return b }, [])
}