7种WebGL图元_WebGL笔记6

写在前面

上一篇笔记中，我们利用buffer存储了多个顶点数据，再一次性绘制出来。解决了数据输入的问题，下面就可以绘制比point复杂一点的东西了，比如三角形、线条、矩形等等

一.图元

图元就是用来组成复杂模型的最小单元，WebGL中可以直接绘制7种基本图形，也就是所谓的图元：

孤立点
孤立线段
连续线段
连续线圈
孤立三角形
三角带
三角扇

“可以直接绘制”，反过来说就是只有这些东西能够直接绘制，而其它稍微复杂一点点的都要自己想办法用这7种图元构造出来，比如矩形、六边形、四面体、立方体…等等仔细想想也能算出顶点拼出来，但更复杂的，比如圆柱、球、半球…等等就需要从专业建模工具（比如3ds max, maya, blender等等）中导出顶点数据了

构造复杂模型通常使用三角带，或者孤立三角形，比如用三角带构造球，就像还原一条削下来的完整苹果皮一样，而用孤立三角形构造立方体，就完全是拼凑了

二.绘制图元

之前绘制孤立点时，最终负责绘制的代码只有一句：

// 绘制点
gl.drawArrays(gl.POINTS, 0, arrVtx.length / 2);
// gl.POINTS 孤立点
// gl.LINES 孤立线段
// gl.LINE_STRIP 连续线段
// gl.LINE_LOOP 连续线圈
// gl.TRIANGLES 孤立三角形
// gl.TRIANGLE_STRIP 三角带
// gl.TRIANGLE_FAN 三角扇

绘制其它图元只要修改gl.drawArrays的第一个参数即可，关于该函数的详细说明请查看attribute变量与顶点着色器_WebGL笔记2。简单理解，第一个参数用来告诉WebGL系统如何使用传入的顶点数据，想要画点还是画线画三角

P.S.实际上，第一个参数影响的是光栅化之前的图形装配过程，此时会按照参数指定的图元来把已处理过的顶点数据装配成几何图形，然后光栅化的过程就是把几何图形分解成一个个片元（或者说像素点），再由片元着色器上色，完成之后就是我们最终看到的效果。从传入顶点数据到绘制完成的具体过程，在下一篇关于varying变量的笔记中再详细说明

三.画矩形

最直接的方式有2种：

6个顶点画2个三角形
4个顶点确定三角带中的2个三角片

一般会考虑节省顶点数据，尽量减少传入的顶点数，以提高性能。所以我们采用后一种方法，主要代码如下：

var arrVtx = new Float32Array([
    -0.5, 0.5,
    -0.5, 0.0,
    0.5, 0.5,
    0.5, 0.0
]);
// 绘制矩形
gl.drawArrays(gl.TRIANGLE_STRIP, 0, arrVtx.length / 2);

看起来还是比较简单的，其实绘制复杂图形的最关键问题是顶点数据来源，矩形顶点可以直接用笔列出来，稍微复杂一点的画画草图也能写出来，再复杂一点的可能就需要专业建模工具了。从建模工具导出顶点数据文件，再解析文件获取我们需要的顶点数据，当然，从需要掌握的知识上来看，画一个球和画一个矩形并没有什么差别

四.DEMO

包含上述代码的完整的例子，请查看：

7种图元（每2s换一个）：http://www.ayqy.net/temp/webgl/triangle/index.html
矩形：http://www.ayqy.net/temp/webgl/rectangle/index.html

五.总结

指定图元，就是告诉WebGL想要如何使用传入的顶点数据，那么就有这么一种情况：传入5个顶点说要画孤立三角形，猜猜结果？当然是只画出了1个三角形，因为最后的2个顶点无法装配出三角形，所以也无法分解出这个三角形的一个个片元，最后就看不到它了

从传入顶点数据到图像被画出来，其间的过程比较长但每一步都很关键，下一篇笔记再详细说明

参考资料

《WebGL编程指南》

黯羽轻扬