WebGL学习笔记--绘制三角形

image.png

三角形在现实世界有着重要的作用，如上图中的球体建筑是由一个个三角形构建起来的，同样地三角形在图形学中也有着重要的地位，构成三维模型的基本单位是三角形，因此理解如何绘制三角形是入门WebGL的基础。

image.png

本文记录自己在学习过程中遇到的迷茫之处以及自己的理解，甚至仅仅是为了让自己容易接受某个知识点而做出的天马行空的假想，也就是说仅是针对某个片段或知识点进行记录，比较碎片化，限于篇幅本文不会将整个绘制过程及代码重复贴在这里。《WebGL编程指南》一书相关章节已提供了详细的讲解和源码，请参阅相关章节。
WebGL应用的整体流程为：

image.png

想想我们在几何课上是怎么绘制三角形的，首先确定三角形的三个顶点坐标，然后依次画出三个顶点之间的边，这样就完成了三角形的作图。其实WebGL绘制三角形的思路也差不多，WebGL学习笔记--WebGL入门一文中提到WebGL系统运行在GPU中，而js代码运行在CPU中，最终绘制的图形通过html中的canvas元素进行呈现。

image.png

三个顶点唯一确定一个三角形，因此首先需要解决如何将js中的顶点坐标传给WebGL系统。就像货轮最高效的工作方式是一次装满一整船集装箱再出发一样，将三个或更多顶点坐标传给WebGL系统最高效的方法当然也是一次性传送多个坐标，而非一次仅传送一个。这里传送多个顶点使用的技术是缓冲区对象。

缓冲区对象是WebGL系统中的一块存储区，你可以在缓冲区对象中保存想要绘制的所有顶点的数据（仅针对本例而言，其实缓冲区对象可以保存任何想要保存的数据）。缓冲区对象的使用步骤及涉及的WebGL方法如下图所示。

image.png

• gl.createBuffer() 使用前要先创建缓冲区，无需过多解释

• gl.bindBuffer() 绑定缓冲区对象的作用就是指定缓冲区数据的用途，因为缓冲区不仅可以用来存储顶点信息，同样也可以存储颜色信息，需要进行明确的指定。

• gl.bufferData() 将js中的顶点坐标数据写入到缓冲区

• gl.vertexAttribPointer() 这一步的目的是将缓冲区和顶点着色器中存放顶点坐标的变量建立连接，但是此时着色器还不能从缓冲区读取顶点坐标数据

• gl.enableVertexAttribArray() 这一步正式启用缓冲区和顶点着色器之间的连接，也就是说顶点着色器可以从缓冲区读取顶点坐标数据了

本文暂不涉及片元着色器的内容，顶点着色器获取到顶点坐标数据后，WebGL系统的绘制流程就继续进行后续的绘制流程了，进而完成三角形的绘制。这里绘制用到基本图形的绘制方法gl.drawArrays(int mode, int first, int count)

• mode：表示绘制模式，可选值有如下几种

• gl.POINTS: 绘制一系列点。
• gl.LINE_STRIP: 绘制一个线条。即，绘制一系列线段，上一点连接下一点。
• gl.LINE_LOOP: 绘制一个线圈。即，绘制一系列线段，上一点连接下一点，并且最后一点与第一个点相连。
• gl.LINES: 绘制一系列单独线段。每两个点作为端点，线段之间不连接。
• gl.TRIANGLE_STRIP：绘制一个三角带。
• gl.TRIANGLE_FAN：绘制一个三角扇。
• gl.TRIANGLES: 绘制一系列三角形。每三个点作为顶点。

image.png

注：顶点序号从大到小的顺序为绘制的顺序

• first：指定从哪个点开始绘制，一般为0
• count：表示绘制需要使用多少个点

WebGL只能绘制三种图形：点、线段和三角形，但是这些是绘制更复杂图形的基础，熟练掌握了你就可以发挥自己的创造力用它来绘制任何你想要的东西。