The WebGL method gl.drawarrays is both powerful and flexible, drawing graphics in seven different ways by specifying different values as the first parameter. This method is explained in detail below.

V0,v1,v2, etc. below represent the vertices in the buffer. The order of vertices will affect the result of the drawing

gl.drawArrays(mode, first, count); There are three parameters

mode

Represents the mode for drawing graphics, with the following 7 options

  • gl.POINTSIt means to plot a series of points at v0,v1, and v2
  • gl.LINESRepresents to draw a series of separate line segments at (v0,v1),(v2,v3),(V4, V5)…
  • gl.LINE_STRIPDraw a series of consecutive line segments,(v0,v1),(v1,v2),(v2,v3)…
  • gl.LINE_LOOPRepresents to draw a closed-loop line segment,(v0,v1),(v1,v2),(v2,v3)… (vn,v0)
  • gl.TRIANGLESDraw a series of separate triangles, the three points of which are (v0,v1,v2),(v3, V4, V5)…
  • gl.TRIANGLE_STRIPDraw a series of connected triangles (v0,v1,v2),(v2,v1,v3),(v2,v3, V4)… (Keep the order of the points the same.)
  • gl.TRIANGLE_FANSaid to draw a fan of the centered on where v0 (where v0, v1, v2), (where v0, v2 and v3), (where v0, v3, v4)…

Below is the basic graph drawn in various modes

first

Specifies the vertex from which to draw. This parameter determines the starting point of calls to v0,v1, and v2 above. If first is 1, v1 starts from v1.

count

Specifies how many vertices will be used to draw, that is, how many vertices will be used to draw, any excess will be ignored.