WebGL画一个彩色矩形

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

     今天和大家分享一个用WebGL画矩形(rectangle)的小Demo,也可用来绘制三角形(triangle)。本文适用于初学者掌握WebGL的基本绘图知识，WebGL是OpenGL的Web版本，所以它的绘图过程与OpenGL是一样的，这里不赘述，大家自行百度。

     今天分享的是绘制一个二维的图形--矩形；二维是三维的基础，二维图像的Z=0，由此，先掌握二维图像的绘制，再向三维拓展，自然水到渠成。废话不多说，直接进入正题。  

     首先，webgl不能直接画彩色矩形的，但webgl可以直接画三角形，画三角形有三种画法，分别是：gl.TRIANGLES、gl.TRIANGLE_STRIP、gl.TRIANGLE_FAN,如下图所示。

         本文用到的的是第二种绘制三角形的方法gl.TRIANGLE_STRIP，一定要特别注意，其绘制的顶点顺序为（v0,v1,v2）,(v2,v1,v3),由此得到两个三角形拼凑成一个矩形。详细过程示意图如下图：

     第三种方法gl.TRIANGLE_FAN也可以达到目的，但顶点的顺序要稍微调整