基于libpng的曲线超采样抗锯齿实现问题咨询

我尝试通过给邻域像素添加透明度的超采样抗锯齿技术来平滑曲线，以下是C语言实现代码：

#include <stdio.h>
#include <stdlib.h>
#include <math.h>
#include <png.h>

#define WIDTH 512
#define HEIGHT 512

int main()
{
    // Image buffer
    unsigned char image[HEIGHT][WIDTH][4];

    for (int i = 0; i < HEIGHT; i++)
    {
        for (int j = 0; j < WIDTH; j++)
        {
            image[i][j][0] = 255;
            image[i][j][1] = 255;
            image[i][j][2] = 255;
            image[i][j][3] = 0;
        }
    }

    // A sample curve
    for (double x = -M_PI; x <= M_PI; x += M_PI / WIDTH)
    {
        int y = (int)(HEIGHT / 2 - sin(x) * cos(x) * HEIGHT / 2);
        int i = (int)(x * WIDTH / (2 * M_PI) + WIDTH / 2);

        // The anti-aliasing part
        int sample = 2; // how far we are sampling
        double max_distance = sqrt(sample * sample + sample * sample);
        for (int ii = -sample; ii <= sample; ii++)
        {
            for (int jj = -sample; jj <= sample; jj++)
            {
                int iii = i + ii;
                int jjj = y + jj;
                if (iii >= 0 && iii < WIDTH && jjj >= 0 && jjj < HEIGHT)
                {
                    // Here is my question
                    int alpha = 255 - (int)(100.0 * sqrt(ii * ii + jj * jj) / max_distance);
                    image[jjj][iii][0] = 0;
                    image[jjj][iii][1] = 0;
                    image[jjj][iii][2] = 0;
                    image[jjj][iii][3] = alpha > image[jjj][iii][3] ? alpha : image[jjj][iii][3];
                }
            }
        }
    }

    FILE *fp = fopen("curve.png", "wb");
    png_structp png = png_create_write_struct(PNG_LIBPNG_VER_STRING, NULL, NULL, NULL);
    png_infop info = png_create_info_struct(png);
    png_init_io(png, fp);
    png_set_IHDR(png, info, WIDTH, HEIGHT, 8, PNG_COLOR_TYPE_RGBA, PNG_INTERLACE_NONE,
                 PNG_COMPRESSION_TYPE_BASE, PNG_FILTER_TYPE_BASE);
    png_write_info(png, info);
    for (int i = 0; i < HEIGHT; i++)
    {
        png_write_row(png, (png_bytep)image[i]);
    }
    png_write_end(png, NULL);
    fclose(fp);

    return 0;
}

虽然实现了一定的平滑效果，但与专业程序的效果差距较大，请问我哪里出错了？

我尝试根据每个邻域像素到曲线中心的距离计算透明度：

int alpha = 255 - (int)(100.0 * sqrt(ii * ii + jj * jj) / max_distance);

我使用100而非255作为系数，因为不需要完全透明。问题在于，当邻域像素的透明度会相互影响时，如何为每个像素设置合适的alpha值？

你的实现存在几个核心问题，导致抗锯齿效果远不如专业程序：

1. 采样逻辑错误：未实现真正的超采样（SSAA） #

SSAA的核心是在高分辨率缓冲区绘制内容，再通过下采样平均到目标分辨率，而你当前是直接在目标分辨率上给曲线点的邻域像素加透明度，本质是简单的模糊处理，并非真正的超采样。

2. Alpha计算与像素混合逻辑错误 #

• 直接覆盖像素RGB为黑色，忽略了背景色与曲线颜色的正确alpha混合公式：最终颜色 = 背景色*(1-alpha) + 前景色*alpha。
• 取alpha最大值的方式会导致曲线重叠区域透明度异常，正确做法是累计覆盖权重后计算最终alpha。
• 距离衰减的逻辑不符合实际：曲线是线条，应计算像素被曲线覆盖的面积比例，而非像素到曲线点的距离。

3. 曲线绘制的离散化误差 #

按固定步长遍历x生成曲线点，步长过大时曲线本身就有明显锯齿，后续抗锯齿无法弥补。

改进后的实现思路 #

步骤1：使用超采样缓冲区 #

创建N倍于目标分辨率的缓冲区（比如2x或4x），在高分辨率区域绘制曲线，再通过平均采样下采样到目标尺寸。

步骤2：精确计算像素覆盖比例 #

对高分辨率缓冲区的每个像素，判断是否被曲线覆盖，或计算曲线在像素内的覆盖比例，以此作为透明度依据。

步骤3：正确的像素混合与下采样 #

下采样时对高分辨率区域的像素进行加权平均，应用alpha混合公式计算最终颜色。

改进后的代码示例 #

#include <stdio.h>
#include <stdlib.h>
#include <math.h>
#include <png.h>

#define WIDTH 512
#define HEIGHT 512
#define SSAA_SCALE 2 // 2x超采样
#define SSAA_WIDTH (WIDTH * SSAA_SCALE)
#define SSAA_HEIGHT (HEIGHT * SSAA_SCALE)

// 判断超采样像素是否被曲线覆盖（线条宽度适配超采样比例）
int is_point_on_curve(double x, double y) {
    double curve_y = SSAA_HEIGHT / 2.0 - sin(x * 2 * M_PI / SSAA_WIDTH) * cos(x * 2 * M_PI / SSAA_WIDTH) * SSAA_HEIGHT / 2.0;
    // 点到曲线的垂直距离小于线条半宽则视为覆盖
    return fabs(y - curve_y) < SSAA_SCALE / 2.0;
}

int main()
{
    // 超采样缓冲区用浮点型存储，避免整数精度损失
    double ssaa_image[SSAA_HEIGHT][SSAA_WIDTH][4] = {0};

    // 初始化超采样缓冲区为白色背景
    for (int i = 0; i < SSAA_HEIGHT; i++) {
        for (int j = 0; j < SSAA_WIDTH; j++) {
            ssaa_image[i][j][0] = 255.0;
            ssaa_image[i][j][1] = 255.0;
            ssaa_image[i][j][2] = 255.0;
            ssaa_image[i][j][3] = 0.0;
        }
    }

    // 在超采样缓冲区绘制曲线
    for (int x = 0; x < SSAA_WIDTH; x++) {
        for (int y = 0; y < SSAA_HEIGHT; y++) {
            if (is_point_on_curve(x, y)) {
                // 曲线为黑色，alpha设为255（完全覆盖）
                ssaa_image[y][x][0] = 0.0;
                ssaa_image[y][x][1] = 0.0;
                ssaa_image[y][x][2] = 0.0;
                ssaa_image[y][x][3] = 255.0;
            }
        }
    }

    // 下采样到目标分辨率
    unsigned char image[HEIGHT][WIDTH][4];
    for (int i = 0; i < HEIGHT; i++) {
        for (int j = 0; j < WIDTH; j++) {
            double r = 0, g = 0, b = 0, a = 0;
            int total_samples = SSAA_SCALE * SSAA_SCALE;
            // 对超采样块内的像素做加权平均
            for (int di = 0; di < SSAA_SCALE; di++) {
                for (int dj = 0; dj < SSAA_SCALE; dj++) {
                    int ssaa_i = i * SSAA_SCALE + di;
                    int ssaa_j = j * SSAA_SCALE + dj;
                    double pixel_a = ssaa_image[ssaa_i][ssaa_j][3] / 255.0;
                    // 应用alpha混合公式
                    r += ssaa_image[ssaa_i][ssaa_j][0] * (1 - pixel_a) + 0 * pixel_a;
                    g += ssaa_image[ssaa_i][ssaa_j][1] * (1 - pixel_a) + 0 * pixel_a;
                    b += ssaa_image[ssaa_i][ssaa_j][2] * (1 - pixel_a) + 0 * pixel_a;
                    a += ssaa_image[ssaa_i][ssaa_j][3];
                }
            }
            // 取平均得到目标像素值
            image[i][j][0] = (unsigned char)(r / total_samples);
            image[i][j][1] = (unsigned char)(g / total_samples);
            image[i][j][2] = (unsigned char)(b / total_samples);
            image[i][j][3] = (unsigned char)(a / total_samples);
        }
    }

    // 写入PNG文件
    FILE *fp = fopen("curve_ssaa.png", "wb");
    png_structp png = png_create_write_struct(PNG_LIBPNG_VER_STRING, NULL, NULL, NULL);
    png_infop info = png_create_info_struct(png);
    png_init_io(png, fp);
    png_set_IHDR(png, info, WIDTH, HEIGHT, 8, PNG_COLOR_TYPE_RGBA, PNG_INTERLACE_NONE,
                 PNG_COMPRESSION_TYPE_BASE, PNG_FILTER_TYPE_BASE);
    png_write_info(png, info);
    for (int i = 0; i < HEIGHT; i++) {
        png_write_row(png, (png_bytep)image[i]);
    }
    png_write_end(png, NULL);
    fclose(fp);

    return 0;
}

额外优化建议 #

• 提高SSAA_SCALE（比如4x）可获得更细腻的抗锯齿效果，但会增加计算开销。
• 曲线覆盖判断可进一步优化：计算线条在像素内的覆盖长度比例，替代简单的距离判断，精度更高。
• 始终用浮点型存储中间颜色值，避免整数运算带来的精度损失。

内容的提问来源于stack exchange，提问作者Googlebot