Game Development Reference
In-Depth Information
Figure 8-3.
The tetrahedron model in 3D has four vertices, four faces, and six edges. Any point on the surface may
have a normal, but only one is shown.
From these JavaScript arrays, the code can directly construct the typed arrays that are sent to the WebGL
API. From the typed arrays, WebGL constructs vertex buffer objects to be rendered on the canvas.
Another popular mesh representation that I'm going to use is a quad mesh. A quad mesh is very similar to
a triangle mesh, but it is made of rectangles instead of triangles. In the mesh representation, a rectangle is
defined by four indices instead of three. WebGL is not capable of directly rendering rectangles, so before
rendering, the model needs to pass through some processing that will break each rectangle into two
triangles. This is trivially achieved if the rectangles are convex.
A straightforward generalization of the idea of the triangle and quad meshes is a general
polygon mesh
. In
a polygon mesh, every face of the model is a flat shape with an arbitrary number of vertices. As before,
any polygon can be divided into triangles using a process called “triangulation,” and thus any polygon
mesh can be converted into a triangle mesh. We will not use any polygon meshes in this chapter.
For reference, the following is a short list of some mesh geometry definitions that will be used throughout
this chapter:
Vertex
: A point in 3D space defined by three coordinate numbers for x, y and z.
Edge
: A segment line that spans between two vertices.
Face
: A flat surface, usually a triangle or a rectangle that spans between three or four vertices.
Mesh
: A collection of connected faces that together make up a shape. If the surface forms a
closed shape, that shape has an “inside” space and an “outside” space.
Normal
: A vector perpendicular to a surface at a certain point. That surface may be a single face
or a complete mesh. As a matter of convention, normals of a closed shape are set to point toward
the outside of the shape.
