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

Love The Way You Lie 2022-06-05 04:11 329阅读 0赞

## **学习交流欢迎加群：789723098，博主会将一些demo整理共享** ##

我们可能都知道，很多三维模型构成的基本单位都是三角形（三角面片），例如.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][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][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。

[http_blog.csdn.net_qq_37338983_article_details_73742119]: http://blog.csdn.net/qq_37338983/article/details/73742119