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语言编写
    let vertexSource = `
		attribute vec4 a_Position;
		attribute vec4 a_Color;
		attribute float a_PointSize;
		varying lowp vec4 v_Color;
    void main(void){
    	gl_Position = a_Position;
      gl_PointSize = a_PointSize;
			v_Color = a_Color;
    }`;
    // 片元着色器  glsl-es语言编写
    let fragmentSource = `
		varying lowp vec4 v_Color;
    void main(void){
    	gl_FragColor = v_Color;
    }`;
	// return;
  	// 创建着色器程序
  	let shaderProgram = initShaderProgram(gl, vertexSource, fragmentSource);
	  
		initBuffers(gl,shaderProgram)
		// 绘制
		draw(gl, shaderProgram)
}

function initBuffers(gl, program){
  var verticesColors = new Float32Array([
    // 顶点坐标 & 颜色数据(rgb) & 顶点大小
     0.0,  0.5,  1.0,  0.0,  0.0, 10.0,
    -0.5, -0.5,  0.0,  1.0,  0.0, 20.0,
     0.5, -0.5,  0.0,  0.0,  1.0, 30.0
  ]);
  var n = 3;
	var vertexColorBuffer = gl.createBuffer();  
  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(program, 'a_Position');
	// 绑定数据给指定a_Position变量
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 6, 0);
  gl.enableVertexAttribArray(a_Position);  
	
	var a_Color = gl.getAttribLocation(program, 'a_Color');
  gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 2);
  gl.enableVertexAttribArray(a_Color); 
	
	var a_PointSize = gl.getAttribLocation(program, 'a_PointSize');
	gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, FSIZE * 6, FSIZE * 5);
  gl.enableVertexAttribArray(a_PointSize);
	
  // Unbind the buffer object
  gl.bindBuffer(gl.ARRAY_BUFFER, null);
}

function draw(gl,program){
		gl.useProgram(program);
      // Set clear color to black, fully opaque
    // 指定绘图区背景色  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);
    
	  // 执行顶点着色器， 
		//args: mode 绘制模式，接受的是gl常量 比如 gl.LINES 
		//     first 指定从哪个顶点开始绘制
		//     count 指定绘制需要用多少个顶点
    gl.drawArrays(gl.POINTS, 0, 3);
}

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>