WebGL高级变换与动画基础

1、平移+旋转

 1.1 矩阵变换库cuon-matrix.js

OpenGL提供了一系列有用的函数来帮助我们创建变换矩阵。例如，通过调用glTranslate()函数并传入在X,Y,Z轴上的平移距离，就可以创建一个平移矩阵。

glTranslatef(5,80,30)  ==》

WebGL没有提供类似的矩阵函数，因此，如果想要使用它们，就得自己编写，或使用别人编好的(开源的)。例如：矩阵变换库：cuon-matrix.js

（WebGL-Programming-Guide/lib at master · hushhw/WebGL-Programming-Guide · GitHub）

Matrix4是矩阵库提供的新类型，Matrix4对象表示一个4*4的矩阵，该对象内部使用类型化数组Float32Array来存储矩阵的元素。 

示例：

//顶点着色器程序
var VSHADER_SOURCE = `
attribute vec4 a_Position;
uniform mat4 u_xformMatrix;
void main(){
    gl_Position = u_xformMatrix * a_Position;
    gl_PointSize = 10.0;
}
`;
//片元着色器程序
var FSHADER_SOURCE = `
precision mediump float;
uniform vec4 u_FragColor;//uniform变量
void main(){
    gl_FragColor = u_FragColor;//设置颜色
}`

function main() {
    //获取<canvas>元素
    var canvas = document.getElementById('myCanvas');
    if (!canvas) {
        console.log("failed to retrieve the canvas element");
        return;
    }
    //获取WebGL的绘图上下文
    var gl = canvas.getContext('webgl');
    if (!gl) {
        console.log("failed to get webgl context");
        return;
    }
    //初始化着色器
    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
        console.log("failed to initialize shaders");
        return;
    }
    //*************设置顶点位置start***************/
    var n = initVertexBuffers(gl);
    if (n < 0) {
        console.log("failed to set the positions of the vertices");
        return;
    }