怎么说呢，

主要概念

在 WebGL 中。矩阵是一个批量描述空间变换的表格。怎么说呢，它把一个点从“原来的坐标系”转换到“另一个坐标系”。包括平移、旋转、缩放和投影等变换。

• 向量描述的是一个点或方向；矩阵描述的是怎么去变换这些点和方向。
• 从举个例子来看，绘制一个立方体。它先在模型空间定义顶点，接下来通过一系列坐标变换最终映射到屏幕上。

为什么 WebGL 特别依赖矩阵？

• GPU擅长并行线性代数运算能一次性处理数千甚至数百万个顶点。
• 多次变换可合并为单一矩阵减少每个顶点的计算量。
• 痛点： 初学者往往会手动编写每一步公式，导致代码臃肿且易错。怎么说呢，

什么是 4×4 矩阵？说起来，为什么不是 3×3？

• $|\; m00\; m01\; m02\; m03\; |\; |\; m10\; m11\; m12\; m13\; |\; |\; m20\; m21\; m22\; m23\; |\; |\; m30\; m31\; m32\; m33\; |$
• 痛点： 很多人把“平移”当作额外操作，却忽略了齐次坐标让它也能写进矩阵中。
• Z轴与投影的统一表达
• 注意： 如果只用 $|\; a\; b\; c\; |\; |\; d\; e\; f\; |\; |\; g\; h\; i\; |$,平移就无法直接表示。齐次坐标引入了第四列/行来完成这一功能。

再看直观示例。平移

假设要将点 \\) 沿 x 方向移动 \ 单位：

// 平移矩阵 T_x|1 0 0 t|
|0 1 0 0|
|0 0 1 0|
|0 0 0 1|
// 点 v 的齐次坐标 v = 

\ \times v\)，得到 \\)。说起来，这正是“用同一套规则把所有顶点搬到新位置”。

WebGL 最常见的三个矩阵

Model Matrix

• 痛点： 很多人认为只需把物体移动到世界里就好了却忘记了旋转与缩放也必须包含在同一张表中。其实，
• 至于作用。把模型局部坐标转换为世界坐标。
• 从包含来看，平移 + 旋转 + 缩放。

View Matrix

• 痛点： 看起来像是摄像机在动。其实是整个世界相对摄像机反向移动，所以使用摄像机变换的逆矩阵。
• 说到作用，把世界坐标映射到摄像机空间。

Projection Matrix

• 痛点： 决定视野范围、远近面等参数；不懂其差异会导致物体被裁切或失真。
• 投影这方面。远处更小，符合真实相机，常用于游戏和漫游场景。
• 再看正交投影。远近大小不变，适用于 CAD、UI 等技术绘图场景。

"整个坐标变换链路"

"从局部 → 世界 → 摄像机 → 裁剪 → NDC → 屏幕"

"MVP 顺序很关键！"

glsl // 一个典型的顶点着色器 attribute vec3 aPosition;uniform mat4 uModelMatrix;uniform mat4 uViewMatrix;uniform mat4 uProjectionMatrix;

void main { gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * vec4;}

如果没有 Matrices 怎么办？

• 必须手写每个顶点的位移、旋转、缩放和投影公式。按理说，
• 效率极低且难以组合。
• 不适合 GPU 并行执行。

容易混淆之处

与 Three.js 对应关系

javascript object.matrix // 本地变换 object.matrixWorld // 世界空间 camera.matrixWorldInverse // View matrix camera.projectionMatrix // Projection matrix

// 最终渲染时仍然是 projection * view * model 的形式。不过，

父子层级为什么离不开 Matrices？按理说，

childWorld = parentWorld * childLocal

父物体变化即使仅仅是轻微移动。也会通过乘积传播到所有子物体。

常见混淆清单

• 不要把 “matrix” 当成某个具体位置 – 它是一组规则。
• 乘法顺序不可随意改动 – 因为 A × B ≠ B × A。
• 模型/视图/投影各自职责不同 – 别搞混！
• 齐次坐标让平移能写进四维矩阵 – 所以总使用 float。
• 非均匀缩放时法线不能直接用模型矩形乘 – 必须使用逆转置或专门的 normal‑matrix。
• 摄像机视图通常看起来倒着 – 它是摄像机运动的逆。

一句话

在 WebGL 中，MVP = Projection × View × Model.This single expression encapsulates everything you see on screen—positioning objects in world space。orienting camera toward m,and finally projecting that world onto your viewport through perspective or orthographic rules—all thanks to efficient matrix math executed on GPU.”