[从零开始的SoftRenderer]1.绘制三角形

  我们最终是要将三维的物体绘制到平面上，那么首先我们需要明白的是如何在屏幕上绘制二维的物体。而在二维的多边形中，三角形无疑是最特别的一种，它具有以下特性：

1. 是边数最少多边形
2. 所有多边形可以都可拆解成三角形
3. 即使在三维空间中，三角形的所有顶点也必然在同一平面上

  所以我们的软件渲染器的第一步，就是要在屏幕上绘制出一个三角形。绘制三角形的方式多种多样，而光栅化主要采用的是一种叫做重心坐标的方法。

重心坐标

  如上图所示，重心坐标的定义为，对于平面内任意一点P，都可以用三角形的三个顶点表示，即 $P=\alpha A+\beta B+\gamma C$，并且还满足$\alpha +\beta +\gamma =1$。而如果P点在三角形内，那么还会满足$(0⩽\alpha ⩽1,0⩽\beta ⩽1,0⩽\gamma ⩽1)$。可以类比求两点间一点公式来更好的理解：$P=\alpha A+(1-\alpha )B$。
  光栅化的过程其实就是求屏幕上每个像素的颜色的过程，所以我们可以遍历三角形可能覆盖的所有点作为点P，求出其重心坐标$(\alpha ,\beta ,\gamma )$，然后P点的任意属性(颜色，uv，深度等等)我们都可以通过三角形的三个顶点根据重心坐标插值求得了。下面我们来推导下重心坐标该怎么求。

公式推导

  根据重心坐标的定义，我们可以把公式改写为
$$\begin{array}{r}P=(1-\beta -\gamma )A+\beta B+\gamma C\end{array}$$  我们还可以进一步将其转换为关于三个向量的公式
$$\begin{array}{r}\overrightarrow{PA}+\beta \overrightarrow{AB}+\gamma \overrightarrow{AC}=\vec{0}\end{array}$$  这个公式还可以进一步拆成两个公式，分别计算x，y
$$\begin{array}{r}{\overrightarrow{PA}}_x+\beta {\overrightarrow{AB}}_x+\gamma {\overrightarrow{AC}}_x=0\end{array}$$$$\begin{array}{r}{\overrightarrow{PA}}_y+\beta {\overrightarrow{AB}}_y+\gamma {\overrightarrow{AC}}_y=0\end{array}$$  这两个公式可以再转为矩阵形式表示
$$\left[\begin{array}{ccc}\beta & \gamma & 1\end{array}\right]\left[\begin{array}{c}{\overrightarrow{AB}}_x\\ {\overrightarrow{AC}}_x\\ {\overrightarrow{PA}}_x\end{array}\right]=0$$$$\left[\begin{array}{ccc}\beta & \gamma & 1\end{array}\right]\left[\begin{array}{c}{\overrightarrow{AB}}_y\\ {\overrightarrow{AC}}_y\\ {\overrightarrow{PA}}_y\end{array}\right]=0$$  从上面的公式可以看出，向量$(\beta ,\gamma ,1)$分别与向量$({\overrightarrow{AB}}_x,{\overrightarrow{AC}}_x,{\overrightarrow{PA}}_x)$和向量$({\overrightarrow{AB}}_y,{\overrightarrow{AC}}_y,{\overrightarrow{PA}}_y)$垂直，即是这两个向量的叉乘。假定$({\overrightarrow{AB}}_x,{\overrightarrow{AC}}_x,{\overrightarrow{PA}}_x)$和向量$({\overrightarrow{AB}}_y,{\overrightarrow{AC}}_y,{\overrightarrow{PA}}_y)$的叉乘为向量$u$，那么$\beta =u.x/u.z$，$\gamma =u.y/u.z$。如果$u.z$为0，则说明该三角形其实已经退化成了线段。

代码实现

Vector3 DrawUtil::CalcuBarycentric(Vector2 *pts, Vector2 point) {
    Vector3 temp[2];
     for (int i = 0; i < 2; i++) {
        temp[i][0] = pts[1][i] - pts[0][i];
        temp[i][1] = pts[2][i] - pts[0][i];
        temp[i][2] = pts[0][i] - point[i];
    }
    Vector3 u = temp[0].cross(temp[1]);
    if (std::abs(u.z) > 1e-2) {
        return Vector3(1.0f - (u.x + u.y) / u.z, u.x / u.z, u.y / u.z);
    }
    return Vector3(-1.0f, 1.0f, 1.0f);
}

总结

  在绘制三角形这一章中，我们着重介绍了重心坐标的定义和推导，有了重心坐标，我们就可以通过三角形三个顶点的各种属性，插值得到三角形内任一点的各种属性。这对于光栅化渲染器是有着相当广泛的应用的，举个例子：
   Z-Buffer，即深度缓存，当三角形投影到了屏幕上后，它的z值我们并不是直接舍弃不用，相反，我们可以用z值来判断三角形距屏幕的距离，离屏幕近的肯定是会覆盖后面的。但是在空间中，两个三角形是完全可能互相穿插的，所以我们真正要比较的是像素所对应的三角形内的那一点的远近关系，而这一点的z值则是通过对三角形三个顶点z值进行插值得到的。Z-buffer则是用来记录某一像素最近深度的，在绘制过程中如果遇到大于缓存中深度的片段，就会直接舍弃。