SOURCE

/**
 * Created by hebo on 2017/12/26.
 * webgl base template
 */
main();

function main() {
    const canvas = document.querySelector("#glcanvas");
    // Initialize the GL context
    const gl = canvas.getContext("webgl");

    // Only continue if WebGL is available and working
    if (!gl) {
        alert("Unable to initialize WebGL. Your browser or machine may not support it.");
        return;
    }
	
    // 顶点着色器  glsl-es语言编写
		// 可以使用attribute变量
    let vertexSource = `
		attribute vec4 a_Position;
		attribute float a_PointSize;
    void main(){
    	gl_Position = a_Position;
      gl_PointSize = a_PointSize;
    }`;
    // 片元着色器  glsl-es语言编写
		// 使用uniform变量 varying变量
    let fragmentSource = `
    precision mediump float;
		uniform vec4 u_FragColor;
    void main(){
    	gl_FragColor = u_FragColor;
    }`;
	
		// 创建着色器程序
  	let shaderProgram = initShaderProgram(gl, vertexSource, fragmentSource);
		
		// 请求变量存储地址
		// args:  program  包含顶点/片元着色器的程序
		//        name     想要获取的变量名称
		let a_pos = gl.getAttribLocation(shaderProgram, 'a_Position');
		let a_pointSize = gl.getAttribLocation(shaderProgram, 'a_PointSize');
		let u_FragColor = gl.getUniformLocation(shaderProgram, 'u_FragColor');

		// 将顶点位置传递给变量 a_pos
		// args:  location  变量存储位置
		//        v1,v2,v3  3个值
		// gl.vertexAttrib3f(a_pos,0.5,0.0,0.0)
		gl.vertexAttrib1f(a_pointSize, 5.0)
		
		// 存储生成的点以及color;
		let g_points = [];
	  let g_colors = [];
		canvas.onmousedown = function(ev){
			drawPoints(ev,gl,canvas, a_pos, u_FragColor, g_points, g_colors);
		}
		gl.useProgram(shaderProgram);
		  // 指定绘图区背景色  arg: r,g,b,a
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    // Clear the color buffer with specified clear color
    // 清空绘图区域，用设定的背景色填充绘图区域
    gl.clear(gl.COLOR_BUFFER_BIT);
}

function drawPoints(ev, gl, canvas, a_Pos, u_color, points, colors){
	let x = ev.clientX;
	let y = ev.clientY;
	let rect = ev.target.getBoundingClientRect();
	// 换算成wbgl坐标系（ 因为canvas坐标系是 左上角原点, 而webgl 是中心远点
	//
	x = ((x - rect.left) - canvas.width/2)/(canvas.width/2);
  y = (canvas.height/2 - (y - rect.top))/(canvas.height/2);
  // 将点的位置存储进去
  points.push([x,y]); 
  // 根据xy来计算color值
	if (x >= 0.0 && y >= 0.0) {      // First quadrant
    colors.push([1.0, 0.0, 0.0, 1.0]);  // Red
  } else if (x < 0.0 && y < 0.0) { // Third quadrant
    colors.push([0.0, 1.0, 0.0, 1.0]);  // Green
  } else {                         // Others
    colors.push([1.0, 1.0, 1.0, 1.0]);  // White
  }
  gl.clear(gl.COLOR_BUFFER_BIT);
	
	let len = points.length;
	
  for(let i = 0; i < len; i++) {
		let xy = points[i];
    let rgba = colors[i];
    gl.vertexAttrib3f(a_Pos, xy[0], xy[1], 0.0);
		// 将数据传递给指定的 uinform变量 ，4f表示4个值 
	  gl.uniform4f(u_color, ...rgba)
    // Draw
    gl.drawArrays(gl.POINTS, 0, 1);
  }
}

function initShaderProgram(gl, vsSource, fsSource) {
    let vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
    let fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);

    const shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);

    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
        alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
        return null;
    }
    
    return shaderProgram;
}


function loadShader(gl, type, source) {
    // 依据type创建着色器
    const shader = gl.createShader(type);

    // Send the source to the shader object

    gl.shaderSource(shader, source);

    // Compile the shader program

    gl.compileShader(shader);

    // See if it compiled successfully

    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
    }

    return shader;
}

<h3>WebGL Demo</h3>
<canvas id="glcanvas" width="640" height="480"></canvas>