Getting started with webgl (4)

Use uniform Variable

The last section talked about , uniform Variables are mainly used for all vertices that are the same ( Vertex independent ) data . And attribute Variable passing is similar , The difference is uniform The target of the transfer is the slice shader .
example , Click the production point with the mouse , The position of the point is different in different quadrants, and the color of the point is different

//  Vertex shader program 
var VSHADER_SOURCE =
    'attribute vec4 a_Position;\n'+
    'void main() {\n' +
    '  gl_Position = a_Position ;\n' + 
    '  gl_PointSize = 30.0;\n' +                   
    '}\n';

//  Chip shader program 
var FSHADER_SOURCE =
    'precision mediump float;\n'+
    'uniform vec4 u_FragColor;\n'+
    'void main() {\n' +
    '  gl_FragColor = u_FragColor;\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;
    }

    var u_FragColor = gl.getUniformLocation(gl.program,"u_FragColor");
    // obtain attribute Storage location 
    var a_Position = gl.getAttribLocation(gl.program,"a_Position");
    if(a_Position < 0){
        console.log(" Failed to get storage location !");
        return;
    }
    // Register mouse response events 
    canvas.onmousedown = function(ev){click(ev,gl,canvas,a_Position,u_FragColor);};

    // Pass the vertex position to attribute Variable 
    // gl.vertexAttrib1f(a_Position,0.0);
    // gl.vertexAttrib2f(a_Position,0.0,0,0);
    // gl.vertexAttrib3f(a_Position,0.0,0.0,0.0);

    //  Specify empty <canvas> The color of the 
    gl.clearColor(0.0, 0.0, 0.0, 1.0);

    //  Empty <canvas>
    gl.clear(gl.COLOR_BUFFER_BIT);
}

var g_points = [];
var g_colors = [];
function click(ev,gl,canvas,a_Position,u_FragColor){
    var x = ev.clientX;
    var y = ev.clientY;
    var rect = ev.target.getBoundingClientRect();
    x = ((x-rect.left)-canvas.height/2)/(canvas.height/2);
    y = (canvas.width/2-(y-rect.top))/(canvas.width/2);
    g_points.push([x,y]);
    if(x>=0.0&&y>=0.0){
        g_colors.push([1.0,0.0,0.0,1.0]);
    }else  if(x<0.0&&y<0.0){
        g_colors.push([1.0,0.5,0.0,1.0]);
    }else{
        g_colors.push([1.0,1.0,1.0,1.0]);
    }
   //  Empty <canvas>
   gl.clear(gl.COLOR_BUFFER_BIT);

   var len = g_points.length;
   for(var i = 0;i<len;i++){
       var xy = g_points[i];
       var rgba = g_colors[i];
       gl.vertexAttrib3f(a_Position,xy[0],xy[1],0,0);
       gl.uniform4f(u_FragColor,rgba[0],rgba[1],rgba[2],rgba[3]);
       gl.drawArrays(gl.POINTS,0,1);
   }
}

Declare in the slice shader uniform The precision is defined when variables precision mediump float
Define precision ：
​ lowp、meduimp、highp They are low precision 、 Medium precision 、 High precision , The precision in vertices is very high, using the default high precision .
Fragment Shader uniform vec4 u_FragColor, Used uniform, It will make every vertex use the same value , Unless we change it , It is responsible for the color of each piece , There are four colors .

The process is ：
（1） Declaration accuracy is precision mediump float Of uniform Variable ;
（2） Use getAttribLocation Method to get uniform The address of the variable ;
（3） Use uniform4f Method pass value .;
（4) draw .

The effect is as shown in the picture ：