Vertex shader to slice shader procedure, varying variable

varying Variable ： Pass data from vertex shader to slice shader .
varying Variables can only be float（ And related vec2,vec3,vec4,mat2,mat3,mat4）.

We learned earlier that vertex shaders control the position of geometry 、 Dimensions even specify the color of the geometry , The final slice shader determines the color of the geometry ！ But we don't know the specific process between them ！
Now let's understand the two processes ：
Graphic assembly process ： The task of this step is , The left side of isolated vertices is assembled into geometry , The category of geometry is determined by gl.drawArrays() The first parameter of the function determines .
Grating process ： The task of this step is to convert the assembled geometry into pieces .

The process from vertex shader to slice shader


******************************************************************************************
Ahead gl.deawArrays() The execution of the function （n=3）：
step ：
（1） according to gl.drawArrays() Parameters of n, Vertex shaders will be executed n Time （ Execute vertex shader results ： Input and store the coordinates in the assembly area ）
（2） Start assembly drawing . Use the incoming point coordinates , according to gl.drawArrays() The first parameter information of （ Such as ：gl.TRANGLES） To decide how to assemble .
（3） Rasterize


Example ：

//  Vertex shader program 
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';

//  Chip shader program 
var FSHADER_SOURCE =
    'precision mediump float;\n' +
    'varying vec4 v_Color;\n' +
    'void main() {\n' +
    'gl_FragColor = v_Color;\n' +
    '}\n';

function main() {
    //  obtain  <canvas>  Elements 
    var canvas = document.getElementById('webgl');

    //  obtain WebGL Rendering context 
    var gl = getWebGLContext(canvas);
    if (!gl) {
        console.log('Failed to get the rendering context for WebGL');
        return;
    }

    //  Initialize shaders 
    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
        console.log('Failed to intialize shaders.');
        return;
    }

    // Set vertex position 
    var n = initVertexBuffers(gl);
    if(n<0){
        console.log("fail initialTextexBuffer");
        return;
    }

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

    //  Empty <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;
    // Create buffer object 
    var vertexColorBuffer = gl.createBuffer();
     if (!vertexColorBuffer) {
         console.log("vertexColorBuffer not exit");
         return;
     }

     // Bind the buffer object to the target 
     gl.bindBuffer(gl.ARRAY_BUFFER,vertexColorBuffer);
     // Write data 
     gl.bufferData(gl.ARRAY_BUFFER,verticesColors,gl.STATIC_DRAW);

     var FSIZE = verticesColors.BYTES_PER_ELEMENT;

     var a_Position = gl.getAttribLocation(gl.program,"a_Position");
     // Assign cache objects to a_position
     gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,FSIZE*5,0);

     // Connect a_position Change to the cache object assigned to it 
     gl.enableVertexAttribArray(a_Position);

     var a_color = gl.getAttribLocation(gl.program,"a_Color");
     // Assign cache objects to a_position
     gl.vertexAttribPointer(a_color,2,gl.FLOAT,false,FSIZE*5,FSIZE*2);

     // Connect a_position Change to the cache object assigned to it 
     gl.enableVertexAttribArray(a_color);

     return n;
}

Running effect ：

Why is it such an effect , Because it involves the process of color interpolation ：