第三节 WebGL中使用gl.drawArrays()和gl.drawElements()绘制图形

我们可能都知道，很多三维模型构成的基本单位都是三角形（三角面片），例如.stl和.obj这两种应用广泛的三维模型文件格式。再复杂的模型都可以由三角面片来组成，由此可见三角形在图形学中的重要地位。而且WebGL里面除了支持点（gl.POINTS）、线（gl.LINES、gl.LINE_STRIP和gl.LINE_LOOP），就是三角形(gl.TRIANGLES、gl.TRIANGLE_STRIP、gl.TRIANGLE_FAN)绘制了，因此WebGL并不提供四边绘制的函数，但如果有需要可以自己构建相关的函数绘制四边形。 
WebGL有以下两个绘制函数：

void gl.drawArrays(mode, first, count);

mode: 画图函数，告诉系统你要画点、线，还是三角形；这里我们主要用到画三角形的函数，可参考我另外一篇博客：http://blog.csdn.net/qq_37338983/article/details/73742119，里面有对几种三角形的绘制方法的介绍，还有一个绘制示例。 
first:指定顶点开始绘制的位置； 
count:绘制图形的顶点数。 
例如，gl.drawsArrays(gl.TRIANGLES, 0, 3)，表示从第一个顶点开始画一个三角形，3表示三角形总共有三个顶点。当我们想绘制复杂的三维图形时，当count是一个很大的数，例如一些稍微复杂三维模型文件的顶点数一般少则几十万，多则几百万。这种情况下，不推荐使用gl.drawArrays()，而推荐WebGL另一个自带的绘制函数gl.drawElements()； 
因为前者比较适合于绘制简单的图形，后者更适合绘制复杂的三维图形，可以避免重复定义顶点，下面对gl.draeElements()做介绍：

void gl.drawElements(mode, count, type, offset);

mode: 画图函数，告诉系统你要画点、线，还是三角形；这里我们主要用到画三角形的函数可参考我另外一篇博客：http://blog.csdn.net/qq_37338983/article/details/73742119，里面有对几种三角形的绘制方法的介绍； 
count:所绘制图形的顶点个数； 
type: 指定缓冲区中的值的类型,常用的两个值，分别为gl.UNSIGNED_BYTE和gl.UNSIGNED_SHORT，前者为无符号8位整数值，后者为无符号16位整数值； 
offset:指定索引数组中开始绘制的位置，以字节为单位； 
例如，gl.drawElement(gl.TRIANGLES, n, gl.UNSIGNED_SHORT, 0),表示从顶点数组中的第一个顶点点开始画三角形，总共有n个顶点，而且数值的索引数据类型为：gl.UNSIGNED_SHORT。