平移，然后旋转

在第3章中，虽然平移、旋转、缩放等变换操作都可以用一个4x4的矩阵表示，但是在写WebGL程序的时候，手动计算每个矩阵很耗费时间。为了简化编程，大多数WebGL开发者都使用矩阵操作函数库来隐藏矩阵计算的细节，简化与矩阵有关的操作。

书中的Matrix4代码放到了 /utils/matrix4_util.ts 中。

我们可以用Matrix4 和其相关的方法来把RotatedTriangles程序重写一遍，找找使用这个矩阵函数库的感觉.

import { Matrix4 } from '@/utils/matrix4_util';

// 新建一个矩阵
const xformMatrix = new Matrix4();
// 设置旋转
xformMatrix.setRotate(90.0, 0.0, 0.0, 1.0);

const u_xformMatrix = gl.getUniformLocation(gl.program, 'u_xformMatrix');

gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix.elements);

复合变换

<“平移”后的坐标>=<平移矩阵>x<原始坐标>

<“平移后旋转”后的坐标>=<平移矩阵>x<平移后的坐标>

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

这里

<旋转矩阵>x(<平移矩阵>X<原始坐标>)

等于(注意括号的位置)

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

最后，我们可以在JavaScript中计算<旋转矩阵>x<平移矩阵>，然后将得到的 矩阵传人顶点着色器。像这样，我们就可以把多个变换复合起来了。

强调一下，矩阵相乘的时候， A*B 不等于 B*A。

先旋转再平移

    // 创建Matrix4对象来进行模型变换
    const modelMatrix = new Matrix4();
    // 设置模型矩阵为旋转矩阵
    const angle = 60.0;
    const Tx = 0.5;
    modelMatrix.setRotate(angle, 0.0, 0.0, 1);
    modelMatrix.translate(Tx, 0, 0);

先平移再旋转

    // 创建Matrix4对象来进行模型变换
    const modelMatrix = new Matrix4();
    // 设置模型矩阵为旋转矩阵
    const angle = 60.0;
    const Tx = 0.5;
    modelMatrix.setTranslate(Tx,0,0);
    modelMatrix.rotate(angle, 0.0, 0.0, 1);