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 vec2 a_TexCoord;
		varying lowp vec2 v_TexCoord;
    void main(void){
    	gl_Position = a_Position;
      v_TexCoord = a_TexCoord;
    }`;
    // 片元着色器  glsl-es语言编写
    let fragmentSource = `
		#ifdef GL_ES
		precision mediump float;
		#endif
    uniform sampler2D u_Sampler;
    varying lowp vec2 v_TexCoord;
    void main(void){
    	gl_FragColor = texture2D(u_Sampler, v_TexCoord);
    }`;
		// return;
  	// 创建着色器程序
  	let shaderProgram = initShaderProgram(gl, vertexSource, fragmentSource);
	  gl.useProgram(shaderProgram);
		initBuffers(gl,shaderProgram);
		initTextures(gl,shaderProgram,'http://jsrun.net/res/css/img/wxpay.png')
}

function initBuffers(gl, program){
	var verticesTexCoords = new Float32Array([
		// 矩形坐标 & 贴图坐标
		-0.5,  0.5,   0.0, 1.0,
		-0.5, -0.5,   0.0, 0.0,
		0.5,  0.5,   1.0, 1.0,
		0.5, -0.5,   1.0, 0.0,
	]);
	
	 var vertexTexCoordBuffer = gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer);
   gl.bufferData(gl.ARRAY_BUFFER, verticesTexCoords, gl.STATIC_DRAW);
	
	 var FSIZE = verticesTexCoords.BYTES_PER_ELEMENT;
   var a_Position = gl.getAttribLocation(program, 'a_Position');
   gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 4, 0);
   gl.enableVertexAttribArray(a_Position);  // Enable the assignment of the buffer object

   // Get the storage location of a_TexCoord
   var a_TexCoord = gl.getAttribLocation(program, 'a_TexCoord');
	
	 gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, FSIZE * 4, FSIZE * 2);
   gl.enableVertexAttribArray(a_TexCoord);  // Enable the assignment of the buffer object

}

function initTextures(gl,program,url){
	var texture = gl.createTexture(); 
	var u_Sampler = gl.getUniformLocation(program, 'u_Sampler');
	var image = new Image();
  image.onload = function(){
		loadTexture(gl,texture, u_Sampler, image); 
	};
	image.src = url;
}

function loadTexture(gl, texture, u_Sampler, image){
	gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); // Flip the image's y axis
  // Enable texture unit0
  gl.activeTexture(gl.TEXTURE0);
  // Bind the texture object to the target
  gl.bindTexture(gl.TEXTURE_2D, texture);

  // Set the texture parameters
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  // Set the texture image
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);
  
  // Set the texture unit 0 to the sampler
  gl.uniform1i(u_Sampler, 0);
  
  gl.clear(gl.COLOR_BUFFER_BIT);   // Clear <canvas>
	// 画矩形 4个点
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); 
}

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>