頂點着色器到片元着色器的過程，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;
}

           

運作效果：

為什麼會是這樣的效果呢，因為在這涉及到顔色内插的過程：