Game Development Reference
In-Depth Information
A convenient and efficient way to represent a triangle mesh in a program is using three lists, as follows:
Vertices list
: Contains the 3D coordinates of all points where triangles meet. A point in a triangle
mesh is usually a meeting point of three to six triangles. An edge between two triangles spans
between two vertices.
Triangles list
: Contains an entry for every triangle that needs to be drawn for the model. Each
triangle is made of three indices of vertices from the vertices list. The vertices are referenced by
index so that their coordinates are not repeated.
Normal vectors list
(optional): A normal is a 3D vector that indicates a direction in 3D that is
perpendicular to the surface and pointing outward from the object. The normals are used in
lighting calculations, among other things. We usually specify a normal for every vertex of the
mesh, so the normal vectors list is identical in length to the vertices list. A later section will
describe a method to calculate normals in case they are not given.
In the game's JavaScript code, these lists are further simplified by flattening them into arrays of numbers.
A triangle mesh can be defined by an object that contains the following arrays of numbers:
The vertices array
: A list of floating-point numbers. Every triplet of consecutive numbers defines
the x, y, and z coordinates of a point in space.
The triangles indices array
: A list of integer numbers. Every triplet of consecutive integers
defines the three corner points of a triangle. The numbers are zero-based indices to the vertices
array. The order of the three indices in each triplet is significant. This will be discussed later.
The normals array
(optional): A list of floating-point numbers, similar to the vertices array. Every
consecutive triplet of floats defines the x, y, and z components of the normal vector of a vertex.
The following is an example of a simple, 3D model of a tetrahedron (without normal definitions) in JSON
format (JavaScript Object Notation).
var mesh {
"vertexPositions" :
[ 1.0, -1.0, -1.0, // vertex 0
-1.0, 1.0, -1.0, // vertex 1
-1.0, -1.0, 1.0, // vertex 2
1.0, 1.0, 1.0 ], // vertex 3
"trianglesIndices" :
[1, 2, 3,
0, 2, 1,
3, 2, 0,
0, 1, 3]
}
