变换矩阵

学习内容

1. 变换矩阵
2. WEBGL的变换矩阵

变换矩阵

平移矩阵

$\begin{bmatrix} x' \\\\ y' \\\\ z' \\\\ 1 \end{bmatrix} =\begin{bmatrix} 1 & 0 & 0 & T_x \\\\ 0 & 1 & 0 & T_y \\\\ 0 & 0 & 1 & T_z \\\\ 0 & 0 & 1 & 1 \end{bmatrix} ✖ \begin{bmatrix} x \\\\ y \\\\ z \\\\ 1 \end{bmatrix}$

旋转矩阵 (绕z轴旋转)

旋转后的等式:

$x'=xcosB-ysinB$

$x'=xsinB+ycosB$

---

推导公式：A：原始角，旋转B角度后的坐标：

$y'=sin(A+B)* l$ $x'=cos(A+B)* l$

利用 三角函数和角公式: sin(A+B)=sinA*cosB + cosA * sinB, sin(A-B)=sinA*cosB - cosA * sinB 。就可以得到上面旋转后的等式。

---

$\begin{bmatrix} x' \\\\ y' \\\\ z' \\\\ 1 \end{bmatrix} =\begin{bmatrix} cosB & -sinB & 0 & 0 \\\\ sinB & cosB & 0 & 0 \\\\ 0 & 0 & 1 & 0 \\\\ 0 & 0 & 1 & 1 \end{bmatrix} ✖ \begin{bmatrix} x \\\\ y \\\\ z \\\\ 1 \end{bmatrix}$

缩放矩阵

假设三个方向上的缩放因子分别为$S_x,S_y,S_z,$那边相关缩放等式:

$x'=S_x * x$

$y'=S_y * y$

$z'=S_z * z$

---

$\begin{bmatrix} x' \\\\ y' \\\\ z' \\\\ 1 \end{bmatrix} =\begin{bmatrix} S_x & 0 & 0 & 0 \\\\ 0 & S_y & 0 & 0 \\\\ 0 & 0 & S_z & 0 \\\\ 0 & 0 & 0 & 1 \end{bmatrix} ✖ \begin{bmatrix} x \\\\ y \\\\ z \\\\ 1 \end{bmatrix}$

WEBGL的变换矩阵

平移矩阵

var translationMatrix = [
    1,    0,    0,   0,
    0,    1,    0,   0,
    0,    0,    1,   0,
    x,    y,    z,   1
];

缩放矩阵

var scaleMatrix = [
    w,    0,    0,   0,
    0,    h,    0,   0,
    0,    0,    d,   0,
    0,    0,    0,   1
];

旋转矩阵

// 绕Z轴旋转
var rotateZMatrix = [
  cos(a), -sin(a),    0,    0,
  sin(a),  cos(a),    0,    0,
       0,       0,    1,    0,
       0,       0,    0,    1
];