SOURCE

/**
 * Created by hebo on 2017/12/26.
 * webgl base template
 */
var	g_last = Date.now();
var ANGLE_STEP = 45.0;
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;
		uniform mat4 u_ModelMatrix;
    void main(){
    	gl_Position = u_ModelMatrix * a_Position;
    }`;
    // 片元着色器  glsl-es语言编写
    let fragmentSource = `
    void main(){
    	gl_FragColor = vec4(1.0,1.0,0.0,1.0);
    }`;
	
  	// 创建着色器程序
  	let shaderProgram = initShaderProgram(gl, vertexSource, fragmentSource);
	
		initBuffers(gl,shaderProgram)
		
		gl.useProgram(shaderProgram);
	  
		// 指定绘图区背景色  arg: r,g,b,a
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
	  
		let u_ModelMatrix = gl.getUniformLocation(shaderProgram, 'u_ModelMatrix');
	
		// 初始旋转角度
		var currentAngle = 0.0;
		let modelMatrix = new Matrix4();
		// 
		function tick(){
			currentAngle = animate(currentAngle);
			draw(gl, currentAngle, modelMatrix,u_ModelMatrix);
			requestAnimationFrame(tick,canvas);
		}
		tick();
}

function draw(gl, angle, modelMatrix,u_ModelMatrix){
    // 清空绘图区域，用设定的背景色填充绘图区域
    // 设置旋转矩阵，按x轴旋转
  	modelMatrix.setRotate(angle, 1, 0, 0);
		// 设置平移矩阵，x y z大于0 即可进行平移
  	// modelMatrix.translate(0, 0, 0);
    gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, 3);
}

// 更新旋转角度
function animate(angle){
  var now = Date.now();
  var elapsed = now - g_last;
  g_last = now;
  // 
  var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0;
  return newAngle %= 360;
}

// 初始化顶点数据
function initBuffers(gl, shaderProgram){
	 let vertexBuffer = gl.createBuffer();
	 let vertexPoints = [
		 // x , y ,z ,w (z w 省略) ，每行代表一个点的坐标
		 0.0 , 0.5,
		 -0.5, -0.5,
		 0.5, -0.5
	 ];
	 gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
	 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexPoints), gl.STATIC_DRAW)
	 
	 let a_pos = gl.getAttribLocation(shaderProgram, 'a_Position')
	 gl.vertexAttribPointer(a_pos, 2, gl.FLOAT, false, 0, 0);
	 gl.enableVertexAttribArray(a_pos)
}



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>