WebGL08

为什么我们给顶点只配了三种颜色，会出现一个渐变色的三角形呢。

图形装配和光栅化

通过顶点坐标将其装配成几何图形，再将装配好的几何图形转化成一个一个真实的像素，在使用片元着色器对其进行逐片元操作。

使用gl.drawArrays(gl.TRIANGLE_STRIP,0,4)进行图形绘制，count为4，说明顶点着色器将会执行4次。
执行第一个顶点着色器，将第一个坐标数据分配给attribute变量a_Position。然后赋值给内置变量gl_Position,进入图形装配阶段，数据就会被缓存起来。
同样执行剩余顶点着色器，坐标数据都会被缓存在图形装配阶段。
开始图形装配。
光栅化。将我们装配的图像转换成片元（像素）来显示在屏幕上。 gl.drawArrays传入不同参数，图形装配的结果是不一样。

片元着色器是如何工作的

对于每个片元，片元着色器都会计算出它的颜色值，然后将结果写到颜色缓冲区中。

内置变量 gl_FragCoord

gl_FragCoord是片元着色器中一个内置变量，是一个vec4类型变量，并且前两个分量表示x,y坐标值。 gl_FragCoord使用的坐标系统默认以左下角为坐标原点。
印证片元着色在绘制100px*100px的黄色正方形时执行了10000次，我们可以让每个像素点的颜色不同。
gl_FragCoord.x、gl_FragCoord.y分别是当前像素点的x，y值。示例

// 这是原本的着色程序代码
const fragmentCode = `
  void main () {
    gl_FragColor = vec4(1., 1., 0., .9); // 纯黄色
  }
`

// 现在我们对 r 、 g 两个值通过 gl_FragCoord 来进行修改
const fragmentCode = `
  void main () {
    // 将 r 的位置换成坐标 x 动态计算
    gl_FragColor = vec4((gl_FragCoord.x - 250.) / 100., 1., 0., .9);
  }
`

我们可以观察到正方形呈现出以x为轴从左往右的绿黄渐变。

varying 变量的内插过程

到现在我们再来看看为什么会出现一个三色渐变三角形。 gl_FragCoord.x对应当前像素的x坐标左下角为原点。

varying变量在顶点着色器传入片元着色之间，还有一个步骤就是内插。（在图形光栅化的步骤中）我们这个彩色三角形的内插过程中varying变量经历了怎样的变化。内插的过程中WebGL系统自动计算对应rgba值，产生渐变颜色的效果。总结，内插的过程就是WebGL系统在图形光栅化后，根据顶点着色器中varying变量计算出中间每个片元的颜色，最后将计算好的varying值传递到片元着色器中。

写在最后

未完待续…
希望大家好好生活，健康快乐。