Game Development Reference
In-Depth Information
To explain the concept of shared vertices, we will render a square using two
triangles. A triangle will have three vertices; hence, we will need to use 2 * 3 vertices.
However, we realize that the two out of three vertices of each triangle are being
shared. Hence, we need to declare only four vertices. The following diagram explains
how we use two triangles with common vertices to render the
square
geometry:
V2
V
5
V
6
V
2
V
4
+
=
V1
V3
V4
V1
V3
Indices are numeric labels of vertices. They help us inform WebGL on how to
connect vertices to form a polygon or a surface. In the preceding example, we draw
one triangle with the vertices [0, 2, 3] and the other triangle with the vertices [0, 3, 1].
Understanding WebGL's rendering
pipeline
The following diagram expresses the actions that WebGL's rendering pipeline
needs to perform to project any object on a 2D display screen. The first two steps
(ModelView transformation and project transformation) are performed in the vertex
shader. Each vertex of an object has to be transformed with respect to its location as
well as the viewer's location (camera) on the scene. Then, the vertices that fall outside
the viewing area are clipped (perspective divide). Viewport transformation defines
the size and location of the final processed object, for example, whether the object
should be enlarged or shrunk:
