WebGL笔记_绘制流程以及三维坐标变换(一)

WebGL绘制一个模型的步骤：
1、获取模型的顶点坐标
2、图元装配（即画相应的三角形面片）
3、光栅化（生成片元，绘制每个三角片上的像素点，染色、纹理映射都在此步）

顶点坐标处理

现实中最常见的三维模型，都是通过3D建模软件导出的文件，文件内容通常包括，模型的顶点格式，模型的顶点坐标，以及定点之间的映射关系。通常要经过以下过程，才能将模型文件所描述的三维模型绘制到二维的屏幕上。

相关坐标系介绍：

• 本地坐标系：描述模型顶点的坐标系，一般都在模型的做下端，位置不是固定不变的。
• 世界坐标系：描述每个模型在三维场景中位置的坐标系。
• 视图坐标系：描述视点（可理解为眼睛或相机）的位置、上方向（正着看还是斜着看）、被观察者的位置。
• 裁剪坐标：描述投影盒子的坐标系，例如：如果是正方形投影盒子，则需要确定6个面的位置。

WebGL中给出的绘制基本几何的api为：
WebGL通过gl.drawArrays()函数可以绘制一些基本图形,接收的参数如下 :

• 点 (gl . POINTS)
• 线段 (gl . LINES)
• 线条 (gl . LINE_STRIP)
• 回路 (gl . LINE_LOOP)
• 三角形 (gl . TRIANGLES)
• 三角带(gl . TRIANGLE_STRIP)
• 三角扇(gl . TRIANGLE_FAN)

图元装配

一个复杂的模型，都是由一个个三角形画出来的。图元装配就是由顶点生成一个个的图元（即三角形）。也可以理解成是将一个三维模型的表面拆成一个个三角片，方便gpu进行光栅化。图元装配需要利用顶点着色器。

顶点着色器工作流程：有多少个顶点，顶点着色器就执行多少次。

光栅化

图元生成完毕之后，我们需要给模型“上色”，也可以理解为给每个图元进行像素点装填上色。完成这部分工作的，是运行在GPU的“片元着色器”来完成。模型的质地（颜色、漫反射贴图等）、灯光等由片元着色器来计算。

片元着色器工作流程：有多少个像素点，片元着色器就执行多少次。

图元装配之前获取顶点所用到的矩阵：

1 . 基本变换矩阵（平移、伸缩、旋转）
$$\begin{array}{cccc}1& 0& 0& t_x\\ 0& 1& 0& t_y\\ 0& 0& 1& t_z\\ 0& 0& 0& 1\end{array}\text{\hspace{1em}(平移变换)}$$

$$\begin{array}{cc}cos\theta & -sin\theta \\ sin\theta & cos\theta \\ 0& 0\\ 0& 0\end{array}$$