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

The following diagram shows how WebGL will draw the same set of vertices with
the TRIANGLE_XXX option:

V3 V2

V1 V1

V5

V3

V2

V2 V3

V4

V1 V0 V0

V0

GL_Triangle GL_Triangle_Strip GL_Triangle_Fan

TRIANGLES draw a series
of separate triangles. Two
triangles given by vertices
(VO, VI, V2) and (V3, V4,
V5) are drawn. A total of
Count / 3 triangles are
drawn.

TRIANGLE_STRIP draws a
series of connected
triangles. Three triangles
are drawn given by (V0, V1,
V2), and (V2, V1, V3) (note
the order). (Count - 2)
triangles are drawn.

TRIANGLE_FAN also draws a
series of connected
triangles. The triangles
drawn are (V0, V1, V3), and
(V1, V2, V3). (Count - 2)
triangles are drawn.

The following function shows the usage of drawArrays with the gl.POINTS
mode value:

gl.drawArrays(gl.POINTS, 0, vertexPositionBuffer.numItems);

The following diagram shows how WebGL will draw the same set of vertices with
the POINTS option:

POINTS: A point sprite is drawn for each vertex specified.
They will be generally used for rain, fire, and mainly particle
effects.

The drawArrays function is effective when we have simple geometry; for complex
geometry, we use the drawElements function call:

gl.drawElements(Mode, Count, Type, Offset)

The drawElements function uses the index buffer object and the drawArrays
function uses the vertex buffer object to read the data. The parameters of the
drawElements function are explained as follows:

• Mode : This is similar to the drawArrays function.
•

Count : This specifies the number of indices to draw.