顶点着色器到片元着色器的过程，varying变量

varying 变量： 从顶点着色器向片元着色器中传入数据。

varying 变量只能是float（以及相关的vec2，vec3，vec4，mat2，mat3，mat4）。

前面我们了解到顶点着色器是控制的几何图形的位置、尺寸甚至指定几何图形的颜色，最终片元着色器来决定几何图形的颜色！但是我们并不知道他们之间的具体过程！

下面就来了解两个过程：

图形装配过程： 这一步的任务是，讲孤立的顶点左边装配成几何图形，几何图形的类别由gl.drawArrays()函数的第一个参数决定。

光栅化过程： 这一步的任务是将装配好的几何图形转换为片元。

顶点着色器到片元着色器的过程

******************************************************************************************

前面的gl.deawArrays()函数的执行过程（n=3）：

步骤：

（1）根据 gl.drawArrays()的参数n，将执行顶点着色器n次（执行顶点着色器结果：将坐标传入并存储在装配区）

（2）开始装配图形。使用传入的点坐标，根据 gl.drawArrays()的第一个参数信息（如：gl.TRANGLES）来决定如何装配。

（3）光栅化

示例：

// 顶点着色器程序
var VSHADER_SOURCE =
    'attribute vec4 a_Position;\n'+
    'attribute vec4 a_Color;\n'+
    'varying vec4 v_Color;\n'+
    'void main() {\n' +
    'gl_Position = a_Position ;\n' + 
    'v_Color = a_Color;\n'+              
    '}\n';

// 片元着色器程序
var FSHADER_SOURCE =
    'precision mediump float;\n' +
    'varying vec4 v_Color;\n' +
    'void main() {\n' +
    'gl_FragColor = v_Color;\n' +
    '}\n';

function main() {
    // 获取 <canvas> 元素
    var canvas = document.getElementById('webgl');

    // 获取WebGL渲染上下文
    var gl = getWebGLContext(canvas);
    if (!gl) {
        console.log('Failed to get the rendering context for WebGL');
        return;
    }

    // 初始化着色器
    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
        console.log('Failed to intialize shaders.');
        return;
    }

    //设置顶点位置
    var n = initVertexBuffers(gl);
    if(n<0){
        console.log("fail initialTextexBuffer");
        return;
    }

    gl.clearColor(0.0, 0.0, 0.0, 1.0);

    // 清空<canvas>
    gl.clear(gl.COLOR_BUFFER_BIT);

    gl.drawArrays(gl.TRIANGLES,0,n);
}

function initVertexBuffers(gl)  {
    var verticesColors = new Float32Array([
        0.0 , 0.5 , 1.0,0.0,0.0,
        -0.5 , -0.5 , 0.0,1.0,0.0,
        0.5 , -0.5 , 0.0,0.0,1.0
    ]);
    var n =3;
    //创建缓冲对象
    var vertexColorBuffer = gl.createBuffer();
     if (!vertexColorBuffer) {
         console.log("vertexColorBuffer not exit");
         return;
     }

     //绑定缓冲对象到目标
     gl.bindBuffer(gl.ARRAY_BUFFER,vertexColorBuffer);
     //写入数据
     gl.bufferData(gl.ARRAY_BUFFER,verticesColors,gl.STATIC_DRAW);

     var FSIZE = verticesColors.BYTES_PER_ELEMENT;

     var a_Position = gl.getAttribLocation(gl.program,"a_Position");
     //将缓存区对象分配给a_position
     gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,FSIZE*5,0);

     //连接a_position变与分配给它的缓存区对象
     gl.enableVertexAttribArray(a_Position);

     var a_color = gl.getAttribLocation(gl.program,"a_Color");
     //将缓存区对象分配给a_position
     gl.vertexAttribPointer(a_color,2,gl.FLOAT,false,FSIZE*5,FSIZE*2);

     //连接a_position变与分配给它的缓存区对象
     gl.enableVertexAttribArray(a_color);

     return n;
}

           

运行效果：

为什么会是这样的效果呢，因为在这涉及到颜色内插的过程：