webGL之drawArrays

webGL中可以通过 webgl.drawArrays() 来画基本图形单位（图元），主要支持一下几种

• 点 webgl.POINTS

• 线

  • webgl.LINE_STRIP
  • webgl.LINE_LOOP
  • webgl.LINES

• 三角形

  • webgl.TRANGLES
  • webgl.TRANGLE_STRIP
  • webgl.TRANGLES_FAN

POINTS

点很好理解，一个坐标数据对应一个点。

LINE

其中LINES是最好理解的，ABCD四个顶点，就是两条线AB，CD

其中线的 LINE_STRIP 会将点两两连接，比如提供四个顶点（vertex）：ABCD会形成三条线段： AB，BC，CD

而 LINE_LOOP是将在LINE_STRIP的基础上，首尾相连，形成封闭的图形，即如上相同的ABCD，会形成四条线段： AB，BC，CD，DA

TRIANGLE

TRIANGLE_LINES是每三个点形成一个三角形，6个点形成两个三角形。数量不等于3的倍数时，三角形的数量为点数除以 3 然后向下取整，比如7或者8个点，只能形成2个三角形。 比如 ABCDEF，或者ABCDEFG或者ABCDEFGH，都会绘制出以下图形：

TRANGLE_STRIP和TRIANLE_FAN是计算机图形学中三角网格（TRIANGLE MESS）的相关应用。三角网格主要是解决内存问题：按正常三点形成一个三角形，两个三角形就得6个点；但是用三角网格可以使用四个点形成两个三角形。顶点（坐标）数量从3N 减少到 N - 2

TRANGLE_STRIP

每三个点形成一个三角形，如ABCDEF，就会形成ABCDEF，还是如上位置的六个点就会形成四个三角形ABC, BCD,CDE,DEF

TRIANGLE_FAN

与TRANGLE_STRIP类似，也是共享顶点，不同的是，它以最开始的点为中心点，绕着该点每两个点与中心点形成三角形，还是如上位置的六个点，此时也是四个三角形 ABC,ACD,ADE,AEF