经过前三节课，已经能够画出简单的图形，并且能给图形上色或者添加纹理了，在进行下个例子之前，先补充一下基础知识。
学习下《webGL编程指南第五章颜色和纹理》
关于顶点颜色
目前了解了三种给顶点上色的方法：
1. 直接给gl_FragColor赋值，gl_FragColor=vec4(1.0,1.0,1.0,1.0);
2. 通过uniform变量给gl_FragColor赋值：uniform vec4 u_FragColor; gl_FragColor= u_FragColor；
3. 通过varying变量，将外部数据绑定到顶点着色器属性，然后传递给gl_FragColor。
前两种只能给所有顶点赋值同样的颜色，后一种可以分别给不同的顶点不同的颜色。示意图如下
gl_posion获取到图形的节点坐标之后，如何画出图形呢
- 首先是顶点着色器和片段着色器之间的图形装配和光栅化。
图形装配和光栅化的过程如下图所示
- 光栅化完成之后，程序开始逐片元的调用片元着色器，进行着色了。
varying变量性质
varying变量将顶点着色器中的颜色传递到同名的片元着色器中的变量。但是，片元着色器中变量和顶点着色器中变量是不同的，中间经过了插值处理（应该是在光栅化过程中执行的）。
例如，
在图形上贴上图片
使用 ##纹理映射## 方法进行，就是根据纹理图像，为之前光栅化后的每个片元涂上合适的颜色。
* 在webGL中，要进行纹理映射，需要遵循以下四步:*
1. 准备好映射到集合图形上的纹理图像；
2. 为集合图形配置纹理映射方式；
3. 加载纹理图像，对其进行配置，以在webGL中使用它；
4. 在片元着色器中奖相应的纹素从纹理中取出来，将纹素的颜色付给片元。
纹理映射需要通过纹理坐标和图像坐标之间进行坐标转换，将纹理图像中像素映射到几何图形某个片元的颜色。
纹理坐标
* 纹理坐标是纹理图像上的坐标，在webGL系统中是二维的，使用st坐标系代替xy坐标系。
* 纹理坐标系范围(0,0)到(1,1).
* 映射关系如下图：
图像y轴反转
通过例子，初步认识到：
都是使用的texture2D实现的，所以根据参数说明，y坐标反转应该先将图形坐标转换到纹理坐标系范围(0,1)，然后再1.0-转换后的坐标
glMatrix.js
这里面包含在js中生成webGL中使用的2，3，4维向量和矩阵操作的函数。