WEBGL学习之三角形的旋转、平移、缩放

/**
 * 顶点着色器 
 */
var VSHADER_SOURCE = 
'attribute vec4 a_Position;\n'+//接收顶点坐标信息
'attribute vec4 a_Color;\n'+//接收顶点颜色信息
'uniform mat4 u_xformMatrix;\n'+//接收模型矩阵
'varying vec4 v_Color;\n'+//内插颜色信息
'void main() {\n'+
'gl_Position = u_xformMatrix * a_Position;\n'+
'v_Color = a_Color;\n'+//赋值颜色信息
'}\n'
/**
 * 片元着色器
 */
var FSHEADER_SOURCES = 
'precision mediump float;\n'+//精度声明
'varying vec4 v_Color;\n'+//接收顶点着色器内插进来的颜色信息
'void main() {\n'+
'gl_FragColor = v_Color;\n'+
'}\n'

var rotation_sleep = 45.0;

function main() {
    let canvas = document.getElementById('webgl');
    let gl = getWebGLContext(canvas);

    if(!gl){
        console.log("main gl error");
        return;
    }
    if(!initShaders(gl,VSHADER_SOURCE,FSHEADER_SOURCES)){
        console.log("main VSHADER_SOURCE FSHEADER_SOURCES error")
        return;
    }

    let u_xformMatrix = gl.getUniformLocation(gl.program,'u_xformMatrix');
    if(!u_xformMatrix){
        console.log("u_xformMatrix");
        return;
    }

    var currentAngle = 0.0;
    //创建一个矩阵
    var modelMatrix = new Matrix4();

    gl.clearColor(0.0,0.0,0.0,1.0);

    let n=initVertexBuffers(gl);
    var tick = function(){
        currentAngle = animate(currentAngle);
        draw(gl,n,currentAngle,modelMatrix,u_xformMatrix);
        requestAnimationFrame(tick);
    }
    tick();

}

function initVertexBuffers(gl){
    //颜色的坐标的数组
    var vertices = new Float32Array([
        0.2,0.0,1.0,0.0,0.0,
        0.5,0,0.0,1.0,0.0,
        0.35,0.3,0.0,0.0,1.0
    ]);

    var n=3;
    var vertexBuffer = gl.createBuffer();
    if(!vertexBuffer){
        console.log("initVertexBuffers vertexBuffer");
        return;
    }
    //字节长度
    var FSIZE = vertices.BYTES_PER_ELEMENT;
    gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
    
    gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);

    var a_Position = gl.getAttribLocation(gl.program,'a_Position');
    if(a_Position<0){
        console.log("initVertexBuffers a_Position");
        return;
    }

    gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,FSIZE*5,0);

    gl.enableVertexAttribArray(a_Position);

    //赋值颜色
    var a_Color = gl.getAttribLocation(gl.program,'a_Color');
    gl.vertexAttribPointer(a_Color,3,gl.FLOAT,false,FSIZE*5,FSIZE*2);
    gl.enableVertexAttribArray(a_Color);

    return n;
}

function draw(gl,n,currentAngle,modleMatrix,u_modelMatrix){
    //设置为旋转矩阵
    modleMatrix.setRotate(currentAngle,0.0,0.0,1.0);
    //乘以平移矩阵
    modleMatrix.translate(0.35,0,0,1);
    //将旋转矩阵传递给顶点着色器u_modelMatrix变量
    gl.uniformMatrix4fv(u_modelMatrix,false,modleMatrix.elements);

    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES,0,n);
}

var g_last = Date.now();
function animate(angle){
    var now = Date.now();
    var elapsed = now-g_last;
    g_last = now;
    var new_angle = angle+(rotation_sleep*elapsed)/1000.0;
    return new_angle%360;
}

对于矩阵顺序的把握为重点