Getting Started with WebGL Game Development - WebGL Game Development - page 11

Using indices to save memory
For each vertex that we define, a numerical label is given; for example, "vertex 0" is
labeled as "0" and "vertex 1" as "1". These labels are called indices . In the following
code, we have defined four vertices in the vertices array. The next line defines the
indices array containing numbers [0, 2, 3...], the numbers in the array are labels to
each vertex in the vertices array:
function initBuffer() {
vertices = [
3.0, 3.0, 0.0, //Vertex 0
-3.0, 3.0, 0.0, //Vertex 1
3.0, -3.0, 0.0, //Vertex 2
-3.0, -3.0, 0.0 //Vertex 3
];
indices = [0,2,3,0,3,1];
...
}
If we render a sphere, the sphere mesh will be made up of polygons; if we use
quads, we will not get a smooth surface. To get a smoother surface, we will require
many quads. Hence, we use a polygon with minimum sides. A polygon can have a
minimum of three sides, and hence, we prefer triangles. WebGL uses primitives such
as points, lines, and triangles to generate complex 3D models.
When we think of a sphere, the vertices will be shared between triangles. We do not
want to repeat the shared vertices in our vertex array in order to save memory. The
following diagram displays a vertex shared between three triangles:
V1
This vertex is shared between three triangles
V4
V3
V2