九、高级变换

一、介绍

前面学习通过用公式和矩阵来实现图形的基础变换，因为基础变换的逻辑基本相似，只有参数不同，故市面上很多开源的webgl库函数将图形变换操作封装，来简化代码冗余，提高开发效率。本节使用cuon-matrix.js库函数来创建变换矩阵库，实现复合动画。

二、使用库函数进行旋转操作

    var modelMatrix = new Matrix4();
    var ANGLE = 60.0; 
    #设置旋转参数，ANGLE为旋转角度，'0,0,1'表示旋转轴
    modelMatrix.setRotate(ANGLE, 0, 0, 1);  
    gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);

三、复合变换：平移+旋转

<平移旋转后坐标> = <旋转矩阵> x (<平移矩阵> x <原矩阵>) = (<旋转矩阵> x <平移矩阵>) x <原矩阵>

    var modelMatrix = new Matrix4();
    var ANGLE = 60.0, Tx = 0.5;
    modelMatrix.setRotate(ANGLE, 0, 0, 1);  
    modelMatrix.translate(Tx, 0, 0);

四、动画示例

    ···
    var ANGLE_STEP = 45.0;
    function main() {
        ···
        var n = initVertexBuffers(gl);
        ···
        gl.clearColor(0, 0, 0, 1);
        var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix');
        
        var currentAngle = 0.0;
        var modelMatrix = new Matrix4();
        var tick = function() {
            currentAngle = animate(currentAngle); 
            draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix);    
            requestAnimationFrame(tick, canvas); 
        };
        tick();
    }
    
    function draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix) {
        modelMatrix.setRotate(currentAngle, 0, 0, 1);
        modelMatrix.translate(0.35, 0, 0);
    
        gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.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 newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0;
        return newAngle %= 360;
    }