Cicada's blog

C2 Triangle rasterization

2026-02-06T00:00:00.000Z

三角形栅格化

V1 扫描线算法

通过逐行扫描绘制三角形的方法，核心思想是
三角形是”凸多边形“，将三角形切为上下两半
主要步骤如下：

排序顶点（最低-最高），得到长边和短边
短边由两条边组成，从其顶点水平切分三角形
由扫描线的 $y$ 坐标，确定扫描线的 $x$ 的左右边界
依次自底向上逐行绘制扫描线

代码如下：

void triangle(int ax, int ay, int bx, int by, int cx, int cy, TGAImage &framebuffer, TGAColor color) {
    if(ay > by) { std::swap(ax, bx); std::swap(ay, by); }
    if(ay > cy) { std::swap(ax, cx); std::swap(ay, cy); }
    if(by > cy) { std::swap(bx, cx); std::swap(by, cy); }
    int tot_h = cy - ay;

    // 下半部分
    if(ay != by) {
        int seg_h = by - ay;
        for(int y = ay; y <= by; y ++) {
            int ac_x = ax + (cx - ax) * (y - ay) / tot_h;
            int ab_x = ax + (bx - ax) * (y - ay) / seg_h;
            for(int x = std::min(ac_x, ab_x); x < std::max(ac_x, ab_x); x ++) {
                framebuffer.set(x, y, color);
            }
        }
    }

    // 上半部分
    if(by != cy) {
        int seg_h = cy - by;
        for(int y = by; y <= cy; y ++) {
            int ac_x = ax + (cx - ax) * (y - ay) / tot_h;
            int bc_x = bx + (cx - bx) * (y - by) / seg_h;
            for(int x = std::min(ac_x, bc_x); x < std::max(ac_x, bc_x); x ++) {
                framebuffer.set(x, y, color);
            }
        }
    }
}

V2 现代化方法

通过确认每点是否处于三角形内部，从而进行填充的方法。
核心思想是重心坐标的运用，在下一章详细展开
具体步骤如下：

找到三角形的包围盒（bounding box)
- 由左下角和右下角控制
对包围盒中的所有点，检查其是否处于三角形内部
- 若处于，则在此像素点位置填充颜色

这里的每个像素点都是单独处理的，因此这是一种便于并行计算的方法。

代码如下：

/**
 * @brief 现代栅格化算法
 * @note 便于并行计算
 * 
 * @param ax 
 * @param ay 
 * @param bx 
 * @param by 
 * @param cx 
 * @param cy 
 * @param framebuffer 
 * @param color 
 */
void triangle(int ax, int ay, int bx, int by, int cx, int cy, TGAImage &framebuffer, TGAColor color) {
    /* 左下角坐标 */
    int bbminx = std::min(ax, std::min(bx, cx));
    int bbminy = std::min(ay, std::min(by, cy));
    /* 右上角坐标 */
    int bbmaxx = std::max(ax, std::max(bx, cx));
    int bbmaxy = std::max(ay, std::max(by, cy));
    double tot_area = get_signed_area(ax, ay, bx, by, cx, cy);

    for(int x = bbminx; x <= bbmaxx; x ++ ) {
        for(int y = bbminy; y <= bbmaxy; y ++) {
            double alpha = get_signed_area(x, y, bx, by, cx, cy) / tot_area;
            double beta = get_signed_area(x, y, cx, cy, ax, ay) / tot_area;
            double gamma = get_signed_area(x, y, ax, ay, bx, by) / tot_area;

            if(alpha < 0 || beta < 0 || gamma < 0) continue;
            framebuffer.set(x, y, color);
        }
    }
}

重心坐标的计算

有很多方法可以检查一个点/像素是否属于三角形内部。
这里选择重心坐标（barycentric coordinates），因其对后续处理的帮助很大。

在三角形的语境中，重心坐标也称为面积坐标或面坐标 ，因为点 P 相对于三角形 ABC 的坐标等价于 PBC 、 PCA 和 PAB 的面积与参考三角形 ABC 面积的（有符号）比值。

每个三角形 ABC 都有一个带符号的面积值，即正负其面积：
$sarea(ABC)= \pm area(ABC)$
如果沿三角形逆时针方向绕行，则符号为正；如果沿三角形顺时针方向绕行，则符号为负。

设 P 为平面上的一个点， $(λ_1,λ_2,λ_3)$ 为其相对于三角形 ABC 的归一化重心坐标，则
$P = λ_1 A + λ_2 B + λ_3 C$
$λ_1 + λ_2 + λ_3 = 1$
归一化重心坐标也称为面积坐标，因为它们表示三角形有符号面积的比率：
$λ_1 = sarea(PBC) / sarea(ABC)$
$λ_2 = sarea(APC) / sarea(ABC)$
$λ_3 = sarea(ABP) / sarea(ABC)$

面积的计算

这里运用的是鞋带公式 / 高斯面积公式（Shoelace formula）对三角形的面积进行计算：

/**
 * @brief 鞋带公式求三角形面积
 * @note 逆时针求解面积，一般为正
 * 
 * @param ax 
 * @param ay 
 * @param bx 
 * @param by 
 * @param cx 
 * @param cy 
 * @return double 三角形有向面积
 */
double get_signed_area(int ax, int ay, int bx, int by, int cx, int cy) {
    return 0.5 * ((by - ay) * (bx + ax) + (cy - by) * (cx + bx) + (ay - cy) * (ax + cx));
}

C1 Bresenham's line drawing

2026-01-13T00:00:00.000Z

V1 朴素插值法算法

/**
 * @brief 朴素参数插值法画线
 * 
 * @param ax 
 * @param ay 
 * @param bx 
 * @param by 
 * @param framebuffer 
 * @param color 
 */
void line(int ax, int ay, int bx, int by, TGAImage &framebuffer, TGAColor color) {
    for (float t=0.; t<1.; t+=.02) {
        int x = std::round( ax + (bx-ax)*t );
        int y = std::round( ay + (by-ay)*t );
        framebuffer.set(x, y, color);
    }
}

当 $t = 0$ 时，点在起点；当 $t = 1$ 时，点在终点；
代码硬编码步长为0.02，说明固定采样50/51个点。

缺点：

长线会有“断点”，变成虚线形式。
短线会导致过于密集。
浮点数运算浪费性能。

V1.1 改进：采取不同的采样策略

/**
 * @brief 朴素参数插值法画线：步长改进
 * 
 * @param ax 
 * @param ay 
 * @param bx 
 * @param by 
 * @param framebuffer 
 * @param color 
 */
void line(int ax, int ay, int bx, int by, TGAImage &framebuffer, TGAColor color) {
    if(ax > bx) {   // ltr
        std::swap(ax, bx);
        std::swap(ay, by);
    }
    for(int x = ax; x <= bx; x ++) {
        float t = (x - ax) / static_cast<float>(bx - ax);
        int y = std::round(ay + (by - ay) * t);
        framebuffer.set(x, y, color);
    }
}

改进：
- 不再固定步长，可以比较合理的取样
缺陷：
- 不适用于陡峭的线，会导致线的断裂甚至程序崩溃（除以0）

V1.2 改进：识别陡峭部分

/**
 * @brief 朴素参数插值法画线：步长改进 + 陡峭翻转
 * 
 * @param ax 
 * @param ay 
 * @param bx 
 * @param by 
 * @param framebuffer 
 * @param color 
 */
void line(int ax, int ay, int bx, int by, TGAImage &framebuffer, TGAColor color) {
    bool isSteep = std::abs(ax - bx) < std::abs(ay - by);
    if(isSteep) {
        std::swap(ax, ay);
        std::swap(bx, by);
    }
    if(ax > bx) {   // ltr
        std::swap(ax, bx);
        std::swap(ay, by);
    }
    for(int x = ax; x <= bx; x ++) {
        float t = (x - ax) / static_cast<float>(bx - ax);
        int y = std::round(ay + (by - ay) * t);
        isSteep ? framebuffer.set(y, x, color) : framebuffer.set(x, y, color);
    }
}

优点

解决了之前的所有痛点
缺陷
性能瓶颈：循环体内部包含除法 / 浮点乘法 / 浮点加法 / 取整函数

V2 DDA 算法

DDA：digital differential analyzer
基于直线的微分方程来生成直线的方法

直线斜率：
$m = \frac{y2-y1}{x2-x1} = \frac{dy}{dx}$

通过 V1.2 的式子，可以看出

初始时， $x_0 = ax$ ， $y_0 = ay$ ，还未开始循环步进/采样

$x_1 = ax + 1，y_1 = y_0 + \frac{dy}{dx}$
$x_2 = ax + 2，y_2 = y_1 + \frac{dy}{dx}$
$x_3 = ax + 3，y_3 = y_2 + \frac{dy}{dx}$
$\dots$

观察 $y$ 的序列，可以将 $v1.2$ 优化为如下算法：

/**
 * @brief DDA法
 * 
 * @param ax 
 * @param ay 
 * @param bx 
 * @param by 
 * @param framebuffer 
 * @param color 
 */
void line(int ax, int ay, int bx, int by, TGAImage &framebuffer, TGAColor color) {
    bool isSteep = std::abs(ax - bx) < std::abs(ay - by);
    if(isSteep) {
        std::swap(ax, ay);
        std::swap(bx, by);
    }
    if(ax > bx) {   // ltr
        std::swap(ax, bx);
        std::swap(ay, by);
    }
    float y = ay;
    for(int x = ax; x <= bx; x ++) {
        isSteep ? framebuffer.set(y, x, color) : framebuffer.set(x, y, color);
        y += (by - ay) / static_cast<float>(bx - ax);   // 每次x进，y就增斜率量
    }
}

效果如下：

优点

易理解
速度快
化除为加

缺陷

目前每轮循环还是包含除法（编译器可以优化）
没有解决浮点数计算的问题，对硬件不友好（还引入了float y )

V3 Bresenham 算法

前面所做的积累

依照直线调整步长，而非固定步长
只做平缓直线的绘制（陡峭情形化归到平缓）
循环除法 $\to$ 累加法

注意第2点，我们总是做平缓情形，这说明直线的斜率有
$|k| \leq 1$
这说明在主循环中，我们每当对 $x$ 做累加操作时， $y$ 的增量总不会超过 $1$ .

由于我们要求的 $x, y$ 坐标皆为整数，所以没有必要在 $x$ 累加时，通过直线方程去计算 $y$ 的坐标（因为这个结果通常是浮点数），我们引入一个 $e$ 来记录每一像素点与目标直线的误差（ $y$ 值）。

每当x的值增加1，误差的值就会增加斜率的值 $\frac{dx}{dy}$
每当误差的值超出0.5，线就会比较靠近下一个点，因此y的值便会加1，且误差减1。

代码如下：

/**
 * @brief Bresenham法
 * 
 * @param ax 
 * @param ay 
 * @param bx 
 * @param by 
 * @param framebuffer 
 * @param color 
 */
void line(int ax, int ay, int bx, int by, TGAImage &framebuffer, TGAColor color) {
    bool steep = std::abs(ax-bx) < std::abs(ay-by);
    if (steep) { // if the line is steep, we transpose the image
        std::swap(ax, ay);
        std::swap(bx, by);
    }
    if (ax>bx) { // make it left−to−right
        std::swap(ax, bx);
        std::swap(ay, by);
    }
    int y = ay;
    float error = 0;
    for (int x=ax; x<=bx; x++) {
        if (steep) // if transposed, de−transpose
            framebuffer.set(y, x, color);
        else
            framebuffer.set(x, y, color);
        error += std::abs(by-ay)/static_cast<float>(bx-ax);
        if (error>.5) {
            y += by > ay ? 1 : -1;
            error -= 1.;
        }
    }
}

上述是算法原理可理解性的代码，实际上可以去除浮点数，得到整数形式的算法，代码如下：

浮点数形式
- 判定 $error \gt 0.5$
- 每轮循环 $error$ += $\frac{dy}{dx}$
- 更新 $y$ 时， $error$ -= $1$
整数形式
- 判定 $ierror \gt dy$
- 每轮循环 $ierror$ += $2dy$
- 更新 $y$ 时， $ierror$ -= $2dx$

/**
 * @brief Bresenham法
 * 
 * @param ax 
 * @param ay 
 * @param bx 
 * @param by 
 * @param framebuffer 
 * @param color 
 */
void line(int ax, int ay, int bx, int by, TGAImage &framebuffer, TGAColor color) {
    bool isSteep = std::abs(ax - bx) < std::abs(ay - by);
    if(isSteep) {
        std::swap(ax, ay);
        std::swap(bx, by);
    }
    if(ax > bx) {   // ltr
        std::swap(ax, bx);
        std::swap(ay, by);
    }
    int y = ay;
    int ierror = 0;
    for(int x = ax; x <= bx; x ++) {
        isSteep ? framebuffer.set(y, x, color) : framebuffer.set(x, y, color);
        ierror += 2 * std::abs(by - ay);
        if(ierror > bx - ax) {
            y += by > ay ? 1 : -1;
            ierror -= 2 * (bx - ax);
        }
    }
}

这是我们最终使用的画线算法。效果如下：