阶段 3 · 3D基础18 分钟
矩阵变换：从模型空间到裁剪空间
Model、View、Projection 与齐次坐标
构建旋转立方体，用 MVP 矩阵串起模型、相机和透视投影。
LEARNING GOALS
先明确本课目标
1
理解 MVP 链
2
上传 mat4x4f uniform
3
观察透视除法的效果
MENTAL MODEL · 再建立心智模型
顶点依次经历模型、世界/观察、投影变换，最后到 WebGPU 裁剪空间；矩阵顺序表示坐标变换顺序。
MINIMAL EXAMPLE
三维顶点怎样最终变成 @builtin(position)？
Model 把局部坐标放入世界，View 把世界变到相机空间，Projection 把相机空间映射到裁剪空间。矩阵乘向量时，应用顺序从右向左。
wgslstruct Scene {
mvp: mat4x4f,
}
@group(0) @binding(0) var<uniform> scene: Scene;
@vertex
fn vs(@location(0) position: vec3f)
-> @builtin(position) vec4f {
return scene.mvp * vec4f(position, 1.0);
}- Model 缩放、旋转、平移单个物体。
- View 用相机的逆变换观察整个世界。
- Projection 产生透视缩小并把结果放入 WebGPU 裁剪空间。
CPU 预先计算 MVP 并写入 Uniform，顶点着色器每个顶点只做一次矩阵乘法。
OPTIONAL · 按需查阅完整术语表与概念边界遇到陌生术语时再展开，不打断主线实验。
展开⌄
3D 变换MVP MatrixModel、View、Projection 矩阵乘积，把模型空间顶点变换到裁剪空间。3D 变换Clip Space顶点着色器输出所在的齐次空间；WebGPU 的 z 裁剪范围为 0 到 w。3D 变换Model Matrix把顶点从模型局部空间变换到世界空间，表达对象自身的缩放、旋转和平移。3D 变换View Matrix把世界空间变换到相机观察空间，通常可理解为相机世界变换的逆矩阵。3D 变换Projection Matrix把相机空间映射到裁剪空间，定义透视或正交投影以及 near/far 深度范围。3D 变换Homogeneous Coordinates用 vec4 的 w 分量统一表达平移和投影；裁剪空间经过除以 w 才得到归一化设备坐标。3D 变换Coordinate Space用一套原点、坐标轴和单位解释点与向量的参考系；模型、世界、观察和裁剪空间表示同一点在不同参考系中的坐标。
LIVE EXPERIMENT · 先获得反馈
边改边运行
浏览器加载后会激活代码编辑器、独立运行环境与实时输出。
本课挑战
加入一个可拖拽轨道相机。
回到原理，解释刚才发生了什么
先用结果建立反馈，再按运行流程、核心原理和知识关系逐层深入。
CORE IDEA
核心讲解
WebGPU 裁剪空间
x、y 位于 -w 到 w，z 位于 0 到 w。顶点着色器输出齐次坐标，光栅化前会做透视除法。
列主序与乘法顺序
WGSL 矩阵按列组织，本教程的 mat4 工具使用列向量约定，因此 clip = projection × view × model × position。
OPTIONAL · 迁移时查阅WebGPU 与 WebGL2 对照主线实验完成后，再用完整映射处理跨平台或跨 API 迁移。
展开⌄
矩阵与坐标空间是共享知识，真正要检查的是内存布局和裁剪空间约定。
WebGL
GLSL 常用 mat4 与 column-major uniform；WebGL 裁剪空间 z 范围为 -w 到 w。
WebGPU
WGSL mat4x4f 通过 buffer 传入；WebGPU 裁剪空间 z 范围为 0 到 w。
复用数学库时最容易错的是 projection 的 z 映射，而不是矩阵乘法本身。