WebGL -矩阵及其变换

1.模型矩阵——模型变换

局部（物体或本地）坐标系（局部（物体）空间）：
物体空间比较容易理解，就是需要绘制的3D物体所在的原始坐标系代表的空间。例如在进行设计时，物体的几何中心是摆放到坐标系原点的，这个坐标系代表的就是物体空间。

世界坐标系或者世界空间：
世界空间也不难理解，就是物体在最终3D场景中的摆放位置对应的坐标所属的坐标系代表的空间。

模型变换是将物体坐标系下的物体变换到世界坐标系下。
模型变换通过乘以模型矩阵来实现。
模型矩阵包含平移，旋转，缩放等基本变换的信息。模型矩阵也可以称作基本变换总矩阵。

注意：模型变换针对的是整个局部坐标系，或者说同一局部坐标系下的所有物体和所有坐标。

---

2.视图矩阵——视变换

摄像机坐标系（摄像机空间）：物体经摄像机观察后，进入摄像机空间。
视变换，是将世界坐标系下的坐标变化到摄像机坐标系，视变换是通过乘以视图矩阵( 摄像机观察矩阵)实现的。
并不存在真正的摄像机，只不过是在世界坐标系里面选择一个点，作为摄像机的位置，然后根据一些参数，在这个点构建一个坐标系。然后通过 视图矩阵将世界坐标系的坐标变换到摄像机坐标系下。
WebGL成像采用的是虚拟相机模型。在场景中通过模型变换，将物体放在场景中不同位置后，最终哪些部分需要成像，显示在屏幕上，主要由视变换、投影变换和视口变换等决定。其中在视变换阶段，通过假想的相机来处理矩阵计算能够方便处理。对于WebGL来说并不存在真正的相机，所谓的相机坐标空 间(camera space 或者eye space)只是为了方便处理，而引入的坐标空间。

---

3.投影矩阵——投影变换

剪裁坐标系（剪裁空间）：并不是摄像机空间中所有的物体都能最终被观察到，只有在摄像机空间中,位于视锥体内（投影范围内）的物体才能最终被观察到。因此，将摄像机空间内视锥体内的部分独立出来经过处理后就成为了剪裁空间。
投影变换是将摄像机坐标系下的物体变换到剪裁坐标系，投影变换是通过乘以投影矩阵实现。
投影方式有两种，一种是正交投影，一种透视投影。
正交投影：投影到近平面上相同尺寸大小的图形大小相同，不会有真实世界那种近大远小的感觉。
透视投影：同样尺寸的物体，近处的物体投影出来大，远处的物体投影出小，会产生与真实世界一样近大远小的感觉。
在乘以投影矩阵后，任何一个点的坐标[x,y,z,w]中的下x,y,z的分量将在-w~w内。

---

4.透视除法

标准设备坐标系（标准设备空间）：对剪裁空间执行透视除法后得到的就是标准设备空间了，对于WebGL而言标准设备空间3个轴的坐标范围都是-1.0～1.0。
从剪裁坐标系到标准设备坐标系的变换是通过执行透视除法来完成的。所谓透视除法其实很简单，就是将齐次坐标[x,y,z,w]的4个分量都除以w，结果为[x/w,y/w,z/w,1]，本质上就是对齐次坐标进行了规一化。

剪裁空间之后的变换就是由管线自动完成的，包括透视除法以及视口变换。

---

5.视口变换

屏幕坐标系（窗口空间）：实际窗口空间很容易理解，其一般代表的是设备屏幕上的一块矩形区域，用于呈现渲染结果，其坐标以像素为单位。
视口变换是从标准设备坐标系到屏幕坐标系变换，主要工作是将执行透视除法后的X、Y坐标分量转换为屏幕坐标系的XY像素坐标。主要的思路是将标准设备空间的XY平面对应到视口上，将-1.0～1.0范围内的X、Y坐标折算为视口上的像素坐标。当然，这个部分也是由管线自动完成。视口范围仅需要调用glViewPort这个函数进行设置即可。

---

矩阵变换与坐标系图解

上面的流程图就是顶点变换过程，顶点着色器的两种顶点变换写法

gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4( position, 1.0 );

<投影矩阵> * <视图矩阵> * <模型矩阵> * <顶点坐标>
矩阵相乘的顺序不能交换。

矩阵变换详解