✨ 图形学入门从二维变换到三维MVP一次讲透旋转、齐次坐标与视图投影Bilibili 同步视频一、 二维变换旋转矩阵的优雅性质1. 旋转矩阵的基本形式2. 旋转 -θ 角转置 逆✨3. 平移的 “小尴尬”二、 三维变换二维思路的完美延伸1. 三维齐次坐标2. 基础变换缩放 平移3. 三维旋转绕轴旋转 欧拉角1绕单轴旋转2任意旋转欧拉角 罗德里格斯公式3四元数旋转插值的 “神器”三、 View矩阵三维视角的核心变换详细推导1. 先明确定义相机的3个核心参数2. 图形学约定相机的“标准姿态”✨3. View矩阵推导两步完成平移 旋转1第一步推导平移矩阵T t e x t v i e w T_{text{view}}Ttextview​把相机移到原点2第二步推导旋转矩阵R t e x t v i e w R_{text{view}}Rtextview​把相机朝向转到标准轴3第三步合并得到View矩阵最终形式4. View矩阵推导总结新手可直接套用四、 本章核心总结五、 课后小任务Bilibili 同步视频[简化版 GAMES 101] 计算机图形学 06相机视图矩阵的由来在计算机图形学的世界里变换是连接三维空间与二维屏幕的桥梁。从最简单的二维旋转到复杂的三维模型观测每一步矩阵运算都在为虚拟世界的呈现铺路。今天我们就顺着课程思路把**二维变换→三维变换→View矩阵视图变换**这条核心脉络一次性梳理清楚一、 二维变换旋转矩阵的优雅性质抛开复杂公式二维变换的核心其实很纯粹不使用齐次坐标时一切线性变换都浓缩在 2×2 矩阵中。1. 旋转矩阵的基本形式绕原点旋转 θ 角矩阵长这样KaTeX parse error: Expected EOF, got at position 33: …atrix}costheta ̲amp; -sintheta …2. 旋转 -θ 角转置 逆✨当我们旋转 -θ 角反向旋转只需把 θ 替换为 -θcos (-θ)cosθ偶函数不变sin (-θ)-sinθ奇函数变号最终得到KaTeX parse error: Expected EOF, got at position 34: …atrix}costheta ̲amp; sintheta -…⚠️ 关键结论旋转矩阵的转置 旋转矩阵的逆满足这个性质的矩阵在数学上有一个超美的名字 ——正交矩阵 这意味着求旋转的逆变换不用复杂计算转置一下就搞定3. 平移的 “小尴尬”平移变换很特殊无法写成 矩阵 × 向量 的形式必须额外加平移分量。 为了统一所有变换齐次坐标应运而生 —— 二维点 (x,y)→(x,y,1)二维向量 (x,y)→(x,y,0) 变换矩阵也升级为3×3从此线性变换 平移完美融合二、 三维变换二维思路的完美延伸三维变换完全继承二维逻辑只是维度 1思路一模一样1. 三维齐次坐标三维点(x,y,z,1)三维向量(x,y,z,0)若 w≠0点 (x,y,z,w) 等价于 (x/w,y/w,z/w)变换矩阵4×4线性变换 3×3 平移 固定行 [0,0,0,1]2. 基础变换缩放 平移缩放左上角 3×3 对角阵各轴独立缩放平移最后一列存 Tx/Ty/Tz左侧 3×3 为单位矩阵3. 三维旋转绕轴旋转 欧拉角三维旋转分两步简单绕轴旋转→任意旋转分解1绕单轴旋转绕 X 轴X 坐标不变Y-Z 平面旋转绕 Z 轴Z 坐标不变X-Y 平面旋转绕 Y 轴符号相反 原因右手坐标系循环对称——X×YZY×ZXZ×XY轴顺序导致符号差异。2任意旋转欧拉角 罗德里格斯公式任意 3D 旋转 绕 X (α) 绕 Y (β) 绕 Z (γ)这三个角就是欧拉角。 更通用的罗德里格斯旋转公式可直接给出绕任意过原点轴的旋转矩阵。 小技巧绕任意轴旋转 先平移→使轴过原点→旋转→平移回去三步搞定3四元数旋转插值的 “神器”旋转矩阵直接平均≠中间角度插值而四元数完美解决这个问题是动画、游戏引擎的常用工具三、 View矩阵三维视角的核心变换详细推导在三维图形学中View矩阵视图矩阵是连接三维场景与相机视角的关键它的核心作用只有一个把相机从任意位置和姿态变换到图形学约定的标准位置同时让整个场景同步变换保证相机与场景的相对位置不变。 下面我们一步步拆解其推导过程从原理到公式新手也能看懂1. 先明确定义相机的3个核心参数想要唯一确定一个相机的姿态必须给出3个关键向量缺一不可相机位置 e (eye)相机在世界坐标系中的具体坐标记为 (eₓ, eᵧ, e_z)代表“相机在哪”观察方向 g (gaze/look-at)相机的朝向向量指向相机所看的方向代表“相机看哪”向上方向 t (up)相机“头顶”的朝向向量用于确定相机的旋转角度避免画面倾斜代表“相机怎么旋转”。2. 图形学约定相机的“标准姿态”✨为了统一计算规则减少复杂运算图形学中约定了相机的“标准位置和姿态”我们的目标就是把任意姿态的相机变换到这个标准状态标准位置世界坐标系的原点 (0, 0, 0)标准朝向指向 -Z 轴方向视线沿 -Z 轴看向场景标准向上指向 Y 轴方向画面正立不倾斜核心思路我们不移动相机而是反向移动整个场景—— 相机固定在标准位置不动让场景跟着反向移动最终相机与场景的相对位置和姿态和“移动相机、场景不动”的效果完全一致这样能极大简化矩阵计算。3. View矩阵推导两步完成平移 旋转View矩阵由“平移矩阵”和“旋转矩阵”复合而成矩阵运算顺序为先平移后旋转总公式为M t e x t v i e w R t e x t v i e w c d o t T t e x t v i e w M_{text{view}} R_{text{view}} cdot T_{text{view}}Mtextview​Rtextview​cdotTtextview​注齐次坐标下矩阵运算遵循“右到左”的执行顺序因此平移矩阵T t e x t v i e w T_{text{view}}Ttextview​写在右侧先执行旋转矩阵R t e x t v i e w R_{text{view}}Rtextview​写在左侧后执行。1第一步推导平移矩阵T t e x t v i e w T_{text{view}}Ttextview​把相机移到原点平移的目标将相机的初始位置 e (eₓ, eᵧ, e_z) 移动到标准位置0, 0, 0本质是让整个场景向相机位置的反方向平移。三维齐次坐标下平移矩阵的通用格式为KaTeX parse error: Expected EOF, got at position 44: …egin{bmatrix}1 ̲amp; 0 amp; 0 …为了让相机从 (eₓ, eᵧ, e_z) 移到原点平移量需取相机位置的相反数即D e l t a x − e x Delta x -e_xDeltax−ex​D e l t a y − e y Delta y -e_yDeltay−ey​D e l t a z − e z Delta z -e_zDeltaz−ez​因此视图平移矩阵最终为KaTeX parse error: Expected EOF, got at position 32: …egin{bmatrix}1 ̲amp; 0 amp; 0 …2第二步推导旋转矩阵R t e x t v i e w R_{text{view}}Rtextview​把相机朝向转到标准轴旋转的目标将相机的观察方向 g 转到 -Z 轴、向上方向 t 转到 Y 轴、相机右方向转到 X 轴。直接写“任意方向→标准轴”的旋转矩阵很困难这里用一个巧妙的思路先求逆变换再利用正交矩阵性质求最终旋转矩阵。① 构造相机自身的正交坐标系u-v-w 坐标系首先基于相机的3个参数构造出相机自身的三个正交单位向量右手坐标系这三个向量将作为旋转的核心依据w 向量相机后视方向w − t e x t n o r m a l i z e ( g ) w -text{normalize}(g)w−textnormalize(g)—— 观察方向 g 指向相机前方w 向量则指向后方归一化后保证是单位向量u 向量相机右方向u t e x t n o r m a l i z e ( t t i m e s w ) u text{normalize}(t times w)utextnormalize(ttimesw)—— 由向上方向 t 和后视方向 w 做叉乘得到相机的右方向归一化后为单位向量v 向量相机真正上方向v w t i m e s u v w times uvwtimesu—— 由 w 和 u 做叉乘修正初始向上方向 t 的偏差确保三个向量两两正交构成标准右手坐标系。② 写出逆旋转矩阵R t e x t i n v R_{text{inv}}Rtextinv​逆旋转的含义把世界坐标系的标准轴X, Y, Z旋转到相机自身的 u-v-w 坐标系X→uY→vZ→w。这个逆旋转矩阵非常好写直接将 u、v、w 三个向量按“列”摆放即可KaTeX parse error: Expected EOF, got at position 33: …in{bmatrix}u_x ̲amp; v_x amp; …③ 利用正交矩阵性质求R t e x t v i e w R_{text{view}}Rtextview​我们之前学到核心性质旋转矩阵是正交矩阵其逆矩阵 转置矩阵。而我们需要的旋转矩阵R t e x t v i e w R_{text{view}}Rtextview​正是逆旋转矩阵R t e x t i n v R_{text{inv}}Rtextinv​的逆矩阵因此R t e x t v i e w ( R t e x t i n v ) − 1 ( R t e x t i n v ) T R_{text{view}} (R_{text{inv}})^{-1} (R_{text{inv}})^TRtextview​(Rtextinv​)−1(Rtextinv​)T对R t e x t i n v R_{text{inv}}Rtextinv​做转置行变列、列变行得到最终的视图旋转矩阵KaTeX parse error: Expected EOF, got at position 34: …in{bmatrix}u_x ̲amp; u_y amp; …3第三步合并得到View矩阵最终形式将旋转矩阵R t e x t v i e w R_{text{view}}Rtextview​与平移矩阵T t e x t v i e w T_{text{view}}Ttextview​相乘即可得到完整的View矩阵KaTeX parse error: Expected EOF, got at position 73: …in{bmatrix}u_x ̲amp; u_y amp; …展开后得到工程中最常用的最简形式利用向量点积简化KaTeX parse error: Expected EOF, got at position 34: …in{bmatrix}u_x ̲amp; u_y amp; …注u c d o t e ucdot eucdote、v c d o t e vcdot evcdote、w c d o t e wcdot ewcdote分别是 u、v、w 向量与相机位置 e 的点积本质是简化后的平移分量。4. View矩阵推导总结新手可直接套用输入已知参数相机位置 e、观察方向 g、向上方向 t构造相机自身坐标系 u-v-ww − t e x t n o r m a l i z e ( g ) w-text{normalize}(g)w−textnormalize(g)u t e x t n o r m a l i z e ( t × w ) utext{normalize}(t×w)utextnormalize(t×w)v w × u vw×uvw×u构造平移矩阵T t e x t v i e w T_{text{view}}Ttextview​平移量为 -eₓ、-eᵧ、-e_z构造旋转矩阵R t e x t v i e w R_{text{view}}Rtextview​对R t e x t i n v R_{text{inv}}Rtextinv​转置R t e x t i n v R_{text{inv}}Rtextinv​由 u、v、w 按列摆放得到旋转矩阵 × 平移矩阵得到最终View矩阵。四、 本章核心总结旋转矩阵逆 转置正交矩阵计算超方便是View矩阵旋转部分的核心依据齐次坐标统一线性变换 平移二维用 3×3 矩阵三维用 4×4 矩阵是View矩阵的基础三维旋转绕轴分解 欧拉角 罗德里格斯公式为View矩阵旋转提供思路View矩阵核心是“移场景而非移相机”由平移矩阵和旋转矩阵复合而成推导关键是构造相机自身坐标系和利用正交矩阵性质。五、 课后小任务手写推导罗德里格斯旋转公式放入课程补充材料尝试用正交矩阵性质手动计算旋转逆矩阵给定相机参数 e(2,3,4)、g(0,0,-1)、t(0,1,0)手动推导View矩阵。 图形学的变换看似公式繁多实则逻辑连贯、环环相扣。只要抓住齐次坐标和正交矩阵这两个核心View矩阵的推导就会变得清晰又优雅而掌握View矩阵也为后续理解完整MVP变换打下了坚实基础