前言
作为待过游戏行业的人，发现老知识太久没用之后发现慢慢忘记了，于是打算写个文章记录下，顺便也分享一下。
渲染三维物体跟chrome渲染机制类似，相同点都是有一步一步的步骤来产生最终产物，这种步骤划分清晰。图形学把这种流程叫做渲染管线
先讲一下数据。首先跟浏览器一样，绘制三维物体也需要数据。浏览器里是把html,css,js等作为数据。根据这些数据最终绘制一个网页呈现给用户。而我们的图形学里数据最简单只需要顶点，那么什么是顶点呢？顶点是表示空间中三个点坐标用向量（x,y,z）表示
一个典型的渲染管线想要把n个顶点作为数据绘制成三维物体，那么需要mvp步骤
预备知识点
正式进入前先讲几个知识点
左手坐标系和右手坐标系
左手坐标系是X轴向右，Y轴向上，Z轴向前，右手坐标系的Z轴正好相反，是指向“自己”的，在计算机中通常使用的是左手坐标系，而数学中则通常使用右手坐标系。计算机里面其实很多也有用右手坐标系，这个只是根据实际应用不同，没有说哪个比较好。
矩阵的乘向量
Model阶段
三维渲染里边采用笛卡尔坐标系来表示三维空间中的位置，包括旋转角度。
那么model阶段做什么呢？这个就涉及到世界坐标跟局部坐标了，也可以理解成绝对坐标跟相对坐标。 下图点是我把物体放到空间（0,0,0）那么这个正方体构成的绝对坐标如下图所示。如果我现在把正方体往上移1个单位，那么正方体构成的所有点y轴都要加1。但是8个顶点相对于正方形中心的位置不变，即相对坐标不变。为了方便抽象，我们是不希望直接改8个顶点而是把正方形坐标改成（0,1,0）然后有个公式帮我们处理所有顶点就好了，旋转同理。model阶段就是做这个的。
移动模型Translation matrices
假设我们有（10,10,10,1）位置或者叫向量，以后统一叫向量。我要把他往右移动10单位
旋转模型Rotation matrices
以下是左手坐标系例子。
以下等式围绕 x 轴旋转点 (x, y, z)，从而产生新点 (x', y', z')。
以下等式围绕 y 轴旋转此点。
以下等式围绕 z 轴旋转点。
缩放模型Scaling matrices
假设我们有（x,y,z,w）向量。我们要让他变成原来的两倍
组合所有矩阵
ModelMatrix =TranslationMatrix * RotationMatrix * ScaleMatrix;
通过该矩阵就可以从相对坐标获得绝对坐标了。
