上一节我们绘制了一个三个角分别为红绿蓝颜色的三角形，然而我们只是给三角形的每个顶点指定一个颜色，WebGL就能自动在三角形表面产生颜色平滑过渡的效果。
这一节讲解顶点着色器和片元着色器直接的数据传输细节，也就是varying变量起作用的地方。
一、顶点着色器到片元着色器间步骤
步骤
（1）顶点坐标
（2）图形装配
（3）光栅化
（4）执行片元着色器
描述
（1）顶点坐标
执行顶点着色器，缓冲区对象的第一个坐标被传给attribute变量，且第一个顶点坐标赋给gl_Position，就进入图形装配区域。并暂存在那里。到所有顶点着色器执行完毕，全部顶点坐标都在未装配区。
（2）图形装配
将孤立的顶点坐标装配为几何图形
几何图形类别由gl.drawArrays()第一个参数决定
（3）光栅化过程
将装配好的几何图形转化为片元
二、调用片元着色器（光栅化结束后）
（1）逐片元调用
（2）每调用一次，处理一个片元
（3）对每个片元，片元着色器计算该片元颜色，并写入颜色缓冲区
（4）所有片元处理完成，浏览器显示最终结果
var FSHADER_SOURCE =
'precision mediump float;\n' +
'uniform float u_Width;\n' +
'uniform float u_Height;\n' +
'void main() {\n' +
' gl_FragColor = vec4(gl_FragCoord.x/u_Width, 0.0, gl_FragCoord.y/u_Height, 1.0);\n' +
'}\n';
注：
（1）
光栅化生成的片元带坐标信息，调用片元着色器时随片元传入。可通过片元着色器中的内置变量（gl_FragCoord）访问
（2）
u_Width表示传入的颜色缓冲区宽度，其值为gl.drawingBufferWidth;
u_Height表示传入的颜色缓冲区宽度，其值为gl.drawingBufferHeight
三、varying变量的作用和内插过程
指定三个顶点颜色，得到渐变色三角形
顶点着色器中的v_Color变量在传入片元着色器前，经历了内插过程
所以片元着色器中的v_Color与顶点着色器中的v_Color不一样
内插过程
顶点着色器中的v_Color（光栅化之前）:
- 红色（1.0, 0.0, 0.0）
- 蓝色(0.0, 0.0, 1.0)
片元着色器中的v_Color（光栅化之后）:
- 红色（1.0, 0.0, 0.0）
- 内插颜色(0.75, 0.0, 0.25)
- 内插颜色(0.5, 0.0, 0.5)
- 内插颜色(0.25, 0.0, 0.75)
- 蓝色(0.0, 0.0, 1.0)
四、颜色值的内插
每个varying变量都会经历内插过程;
光栅化： 将矢量的几何图形转化为光栅格化片元（像素）
