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

The drawArrays() function will treat the vertices of the preceding diagram based on
the Mode parameter. If you want to draw a wire mesh, you will use the LINE_XXXX
mode values. If you want to draw solid geometries, you will use the TRIANGLE_XXXX
mode values.

We have listed the drawArrays function call with different mode values, as follows:

gl.drawArrays(gl.LINES, 0, vertexPositionBuffer.numItems);
gl.drawArrays(gl.LINE_STRIP, 0, vertexPositionBuffer.numItems);
gl.drawArrays(gl.LINE_LOOP, 0, vertexPositionBuffer.numItems);

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

V 1

V0

V0 V1 V0

V 1

V2
V4

V3
V5

V2

V3

V2

Lines

V4

Line strip

V3

Line loop

LINES draw a series of
unconnected line
segments. Three
individual lines are drawn
given by (V0,
V1), (V2,V3), and (V4, V5).
A total of Count / 2
segments are drawn.

LINE_STRIP draws a series
of connected line
segments. Three line
segments are drawn given
by (VO, V1), (V1, V2), and
(V2, V3). A total of (Count
- 1) line segments are
drawn.

LINE_LOOP works similar
to GL_LINE_STRIP, except
that a final line segment is
drawn from Vn-1 to V0.
Four line segments drawn
are (V0, V1), (V1, V2),
(V2, V3), (V3, V4), and
(V4, V0). A total of Count
line segments are drawn.

The following code shows the different parameters passed to the drawArrays
function to draw geometries:

gl.drawArrays(gl.TRIANGLES, 0, vertexPositionBuffer.numItems);
gl.drawArrays(gl.TRIANGLE_STRIP, 0,
vertexPositionBuffer.numItems);
gl.drawArrays(gl.TRIANGLE_LOOP, 0, vertexPositionBuffer.numItems);