WebGL学习笔记（五）：变换库

在WebGL开始绘制以前，咱们须要经过本身对3D空间进行矩阵和向量的运算，使用网上已经成熟的转换库，能够避免本身去实现这些复杂的数学运算。

咱们这里选择的是gl-matrix库，下载地址： https://github.com/toji/gl-matrix

变换运算

在最终开始绘制以前，咱们须要把3D世界中的物体的坐标系转换为WebGL的坐标系，肯定最终绘制的位置。

模型变换（顶点着色器阶段处理）

模型变换用来肯定一个模型在世界坐标系中的位置，全部的模型都有一个世界坐标系的矩阵，保证全部模型都处于同一个坐标系（即世界坐标系）之中，模型变换包括平移，旋转和缩放；

视图变换（顶点着色器阶段处理）

有了世界坐标系以后还不够，还须要一个一样位于该坐标系之中的摄像机的矩阵，用来表示观察者观看的位置和角度；

模型视图变换（顶点着色器阶段处理）

该变换就是模型变换和视图变换相乘以后的变换矩阵；

 

投影变换（顶点着色器阶段处理）

咱们在这一步获得了物体在摄像机中看起来的最终坐标，可是和咱们人眼能够看见的景象仍是有所区别，好比咱们看世界上的东西都是由一种近大远小的透视效果，投影变换就是用来实现这些效果的变换；

正交投影

正交投影，能够看作是一种平行投影，正交投影下的物体没有近大远小的视觉效果，不管远近看起来都是同样大的，该投影通常用在2D或2.5D（通常是3D角色2D场景）游戏中，3D游戏的UI实现也会用到该投影；

使用gl-matrix库建立正交投影代码以下：

1 var m4 = glMatrix.mat4.create();
2 // 经过设定每一个面的大小肯定投影区域
3 glMatrix.mat4.ortho(m4, -100, 100, -100, 100, -100, 100);

透视投影

透视投影，能够模拟人眼所看见的3D世界的近大远小的视觉效果，该投影通常用在3D游戏中；

使用gl-matrix库建立透视投影代码以下：

1 var m4 = glMatrix.mat4.create();
2 // 方法1：经过垂直范围、高宽比和近远面肯定投影区域
3 glMatrix.mat4.perspective(m4, 1, 1, 0, 100);
4 // 方法2：经过设定每一个面的大小肯定投影区域
5 glMatrix.mat4.frustum(m4, -100, 100, -100, 100, -100, 100);

透视除法（图元装配阶段处理）

透视除法即便用w份量除以x,y,z份量（w默认值是1），产生三维的透视效果。

更多的信息能够参考：https://www.jianshu.com/p/7e701d7bfd79

视口变换（图元装配阶段处理）

视口变换主是将三维空间中的物体投影到二维的平面上，在计算机图形学中，它的定义是将通过几何变换，投影变换和裁剪变换后的物体显示于屏幕指定区域内。

用户能够经过调用两个方法来控制这个步骤的变换：

gl.viewPort

肯定最终显示的位置和尺寸，单位为像素；

gl.depthRange

肯定最终能够显示出来的深度区域，可选范围[0-1]；

完整的变换管线（变换流水线）以下图所示

变换顺序的重要性

3D应用中矩阵的乘法很是重要，咱们须要注意的是，矩阵的两个乘数交换以后，获得的结果是不同的。

MN≠NM

能够看下面的图直观的了解下不一样的变换顺序获得不一样的结果：

 

变换矩阵堆栈

通常说来，矩阵堆栈经常使用于构造具备继承性的模型，即由一些简单目标构成的复杂模型。例如，一辆自行车就是由两个轮子、一个三角架及其它一些零部件构成的。它的继承性表如今当自行车往前走时，首先是前轮旋转，接着是后轮旋转，而后整个车身向前平移，如此进行下去，这样自行车就往前走了。

另外当咱们须要实现复杂模型绘制时，会须要全局坐标和本地坐标的概念，好比，一个桌子放在全局坐标的某个位置上，这个桌子内部包含了一个桌面和四个腿，这5个模型的矩阵的数据是相对桌子的本地坐标，而不是记录全局坐标，咱们但愿，在桌子的矩阵改变时，内部的5个模型的本地矩阵不须要改变。

入栈

当前矩阵乘于栈顶矩阵以后的值，做为新的栈顶矩阵压入栈中，能够理解为当前栈顶矩阵就是的本地坐标使用的矩阵；

出栈

弹出栈顶的矩阵，当前的栈顶矩阵就是上一个本地坐标的父级坐标矩阵；

经过变换矩阵堆栈绘制桌子：

1. 压入桌子的矩阵；
2. 用栈顶矩阵乘于桌面的矩阵，获得桌面位于全局坐标的矩阵；
3. 压入桌面的矩阵，当桌面上须要绘制物体时，可使用该栈顶矩阵乘于须要绘制的物体的矩阵；
4. 桌面已经没有物体须要绘制了，弹出栈顶的矩阵（即桌面的矩阵）；
5. 此时栈顶的矩阵即桌子的矩阵，用栈顶的矩阵乘于第一个腿的矩阵，获得第一个腿的全局坐标的矩阵；

如此往复，直到绘制完全部的模型；

示例

https://hammerc.github.io/dou3d-ts/examples/learningNotes/lesson_3/index.html