002_视图变换矩阵

games101 https://sites.cs.ucsb.edu/~lingqi/teaching/resources/GAMES101_Lecture_04.pdf

https://www.cnblogs.com/charlee44/p/11623502.html
https://www.cnblogs.com/charlee44/p/12828887.html#24-%E8%A7%86%E5%9B%BE%E5%8F%98%E6%8D%A2%E7%9F%A9%E9%98%B5

视图变换矩阵$M_{view}$

1、相机定义

position: $eye$
lookAt $g$
up: $t$

2、观察(相机)坐标系

• $U=g\times t$
• $V=t$
• $N=-g$

$$M_{view}=R_{view}{T}_{view}$$

$$T_{view}=\left[\begin{array}{cccc}1& 0& 0& -T_x\\ 0& 1& 0& -T_y\\ 0& 0& 1& -T_z\\ 0& 0& 0& 1\end{array}\right]$$

目标: 相机坐标系变换到世界坐标系

• 平移 相机位置 -> 原点(0,0,0)
• 旋转 g to -Z
• 旋转 t to Y,
• 旋转 (g x t) To X

由于从相机坐标系变换到世界坐标系比较复杂,所以考虑它的逆变换: 世界坐标系转观察坐标系。

3、世界坐标系转观察坐标系

• 原点(0,0,0)->相机位置 (平移)
• X轴(1,0,0) -> U (旋转)
• Y轴(0,1,0) -> V (旋转)
• Z轴(0,0,1) -> N (旋转)

$$R\left[\begin{array}{ccc}X& Y& Z\end{array}\right]=\left[\begin{array}{ccc}U& V& N\end{array}\right]$$

按列展开:
$$R\left[\begin{array}{ccc}1& 0& 0\\ 0& 1& 0\\ 0& 0& 1\end{array}\right]=\left[\begin{array}{ccc}{U}_x& V_x& N_x\\ U_y& V_y& N_y\\ U_z& V_z& N_z\end{array}\right]$$

因此:
$$R=\left[\begin{array}{ccc}U& V& N\end{array}\right]=\left[\begin{array}{ccc}{U}_x& V_x& N_x\\ U_y& V_y& N_y\\ U_z& V_z& N_z\end{array}\right]$$

旋转矩阵R为正交矩阵，所以有:
$$R_{view}=R^{-1}=\left[\begin{array}{ccc}{U}_x& U_y& U_z\\ V_y& V_y& V_z\\ N_x& N_y& N_z\end{array}\right]$$

4、视图变换矩阵

$$M_{view}=R_{view}{T}_{view}$$

$$M_{view}=\left[\begin{array}{cccc}1& 0& 0& -T_x\\ 0& 1& 0& -T_y\\ 0& 0& 1& -T_z\\ 0& 0& 0& 1\end{array}\right]\left[\begin{array}{cccc}{U}_x& U_y& U_z& 0\\ V_y& V_y& V_z& 0\\ N_x& N_y& N_z& 0\\ 0& 0& 0& 1\end{array}\right]$$

5、code

https://www.cnblogs.com/charlee44/p/12828887.html#24-%E8%A7%86%E5%9B%BE%E5%8F%98%E6%8D%A2%E7%9F%A9%E9%98%B5

lookAt 函数实现

var eye = new THREE.Vector3(0, 0, 100);
var up = new THREE.Vector3(0, 1, 0);
var at = new THREE.Vector3(1, 2, 3);

var N = new THREE.Vector3();
N.subVectors(eye, at);
N.normalize();
var U = new THREE.Vector3();
U.crossVectors(up, N);
U.normalize();
var V = new THREE.Vector3();
V.crossVectors(N, U);
V.normalize();

var R = new THREE.Matrix4();
R.set(U.x, U.y, U.z, 0,
    V.x, V.y, V.z, 0,
    N.x, N.y, N.z, 0,
    0, 0, 0, 1);

var T = new THREE.Matrix4();
T.set(1, 0, 0, -eye.x,
    0, 1, 0, -eye.y,
    0, 0, 1, -eye.z,
    0, 0, 0, 1);

var V = new THREE.Matrix4();
V.multiplyMatrices(R, T);
console.log(V);