WebGL中gl.drawArrays详解

1,781 阅读1分钟

WebGL方法 gl.drawArrays 既强大又灵活,通过第一个参数指定不同的值,可以以7种不同的方式来绘制图形。下面将对这个方法进行详细的解释说明。

下面中的v0,v1,v2等表示缓冲区中的顶点,顶点的顺序将会影响绘制的结果

gl.drawArrays(mode, first, count);有三个参数

mode

表示 绘制图形的模式,有下面7个选项

  • gl.POINTS 表示绘制一系列的点,分别绘制在v0,v1,v2处
  • gl.LINES 表示绘制一系列单独的线段,分别绘制在(v0,v1),(v2,v3),(v4,v5)...
  • gl.LINE_STRIP 表示绘制一系列连续的线段,(v0,v1),(v1,v2),(v2,v3)...
  • gl.LINE_LOOP 表示绘制一个闭环的线段,(v0,v1),(v1,v2),(v2,v3)...(vn,v0)
  • gl.TRIANGLES 表示绘制一系列单独的三角形,三角形的三个点分别是(v0,v1,v2),(v3,v4,v5)...
  • gl.TRIANGLE_STRIP 表示绘制一系列相连接的三角形(v0,v1,v2),(v2,v1,v3),(v2,v3,v4)...(注意点的顺序保持一致)
  • gl.TRIANGLE_FAN 表示绘制一个以v0为圆心的扇形(v0,v1,v2),(v0,v2,v3),(v0,v3,v4)...

下图为各种模式下绘制的基本图形

image.png

first

指定从哪个顶点开始绘制,这个参数决定了上面v0,v1,v2的调用起点,假如first值为1,则从v1开始往后算。

count

指定绘制需要用到多少个顶点,即有多少个顶点参与绘制,多余的会被忽略。