回顾games101中的SSAA和MSAA

回顾games101中的AA（抗锯齿）

前言

善于进行课后总结，可以更加巩固自己的知识和具体细节

锯齿（走样）产生的原因

本质上，在光栅化阶段中，用有限离散的数据想表示连续的（类似三角形的某一边），就可能存在采样点不够的问题，也就引申出了锯齿（走样 Aliasing）的这个概念，在信号处理以及相关领域中，走样（混叠）在对不同的信号进行采样时，导致得出的信号相同的现象。它也可以指信号从采样点重新信号导致的跟原始信号不匹配的瑕疵

具体到实时渲染领域中，走样有以下三种：[3]

几何体走样（几何物体的边缘有锯齿），几何走样由于对几何边缘采样不足导致。

着色走样，由于对着色器中着色公式（渲染方程）采样不足导致。比较明显的现象就是高光闪烁。

上面一张图显示了由于对使用了高频法线贴图的高频高光BRDF采样不足时产生的着色走样。下面这张图显示了使用4倍超采样产生的效果。

时间走样，主要是对高速运动的物体采样不足导致。比如游戏中播放的动画发生跳变等。

SSAA（超采样反走样）

产生锯齿的原因本质上是因为采样点个数不够，少了，那我给你多一倍的采样点不就可以弥补了吗，比如一张800x600分辨率的图，我先长宽都加倍采样，变成1600x1200，那我在把它缩放回800x600不就可以了吗

过程:

对每个像素取n个子采样点，然后针对每个子像素点进行着色计算。最后根据每个子像素的值来合成最终的图像

MSAA（多重采样反走样）

在前面提到的SSAA中，每个子采样点都要进行单独的着色，这样在片断（像素）着色器比较复杂的情况下还是很费的。那么能不能只计算每个像素的颜色，而对于那些子采样点只计算一个覆盖信息（coverage）和遮挡信息（occlusion）来把像素的颜色信息写到每个子采样点里面呢？最终根据子采样点里面的颜色值来通过某个重建过滤器来降采样生成目标图像。这就是MSAA的原理。注意这里有一个很重要的点，就是每个子像素都有自己的颜色、深度模板信息，并且每一个子采样点都是需要经过深度和模板测试才能决定最终是不是把像素的颜色得到到这个子采样点所在的位置，而不是简单的作一个覆盖测试就写入颜色

代码实现

没有SSAA和MSAA之前，可以看到边缘锯齿化特别明显

SSAA

#define ssaa_sample 2
 	float sampling_period = 1.0f / ssaa_sample;

    // 2x2SSAA
    for (int x = xmin; x <= xmax; x++) {
        for (int y = ymin; y <= ymax; y++) {
            int in_num = 0;
            Eigen::Vector3f color_sum;
            for (int i = 0; i < ssaa_sample; ++i) {
                for (int j = 0; j < ssaa_sample; ++j) {
                    // 中心点
                    float new_x = x + (i + 0.5) * sampling_period;
                    float new_y = y + (j + 0.5) * sampling_period;

                    if (insideTriangle(new_x, new_y, t.v)) {
                        auto [alpha, beta, gamma] = computeBarycentric2D(new_x, new_y, t.v);
                        float w_reciprocal = 1.0 / (alpha / v[0].w() + beta / v[1].w() + gamma / v[2].w());
                        float z_interpolated =
                            alpha * v[0].z() / v[0].w() + beta * v[1].z() / v[1].w() + gamma * v[2].z() / v[2].w();
                        z_interpolated *= w_reciprocal;

                        // 左下角的点
                        int depth_buf_x, depth_buf_y;
                        depth_buf_x = x * ssaa_sample + i;
                        depth_buf_y = y * ssaa_sample + j;

                        if (z_interpolated < depth_buf[get_index(depth_buf_x, depth_buf_y)]) {
                            depth_buf[get_index(depth_buf_x, depth_buf_y)] = z_interpolated;
                            Vector3f temp_point = { depth_buf_x * 1.0f,depth_buf_y * 1.0f,0.0f };
                            Vector3f color = t.getColor();
                            set_temp_pixel(temp_point, color);

                        }
                    }
                }
            }
        }
    }

	// Down Sample
    for (int x = xmin; x <= xmax; x++)
    {
        for (int y = ymin; y <= ymax; y++)
        {
            Eigen::Vector3f color{ 0,0,0 };
            Eigen::Vector3f point{ x * 1.0f, y * 1.0f, 0 };

            for (int i = 0; i < ssaa_sample; ++i)
            {
                for (int j = 0; j < ssaa_sample; ++j)
                {
                    int depth_buf_x, depth_buf_y;
                    depth_buf_x = x * ssaa_sample + i;
                    depth_buf_y = y * ssaa_sample + j;
                    color += temp_frame_buf[get_index(depth_buf_x, depth_buf_y)];
                }
            }
            color /= (ssaa_sample * ssaa_sample);
            set_pixel(point, color);
        }
    }

通过放大对比，其实可以看到SSAA的效果比MSAA好很多，解决了出现黑边的问题，整体也是接近于完美的效果

MSAA

以下例子为8x8的MSAA，MSAA其实就是求出一个面积的覆盖率，然后通过覆盖率乘以rgb，然后更新深度缓冲区和颜色缓冲区

    auto v = t.toVector4();

    int xmin = MIN(MIN(floor(v[0].x()), floor(v[0].x())), floor(v[2].x()));
    int xmax = MAX(MAX(floor(v[0].x()), floor(v[1].x())), floor(v[2].x()));

    int ymin = MIN(MIN(floor(v[0].y()), floor(v[1].y())), floor(v[2].y()));
    int ymax = MAX(MAX(floor(v[0].y()), floor(v[1].y())), floor(v[2].y()));

    int sample_num = 8;
    std::vector<float> offset;

    for (int i = 0; i < sample_num; ++i)
    {
        offset.push_back((0.5 + i) * 1.0 / static_cast<float>(sample_num));
    }

    int index;

    // MSAA
    for (int x = xmin; x <= xmax; x++) {
        for (int y = ymin; y <= ymax; y++) {
            int in_num = 0;
            for (int i = 0; i < sample_num; ++i) {
                for (int j = 0; j < sample_num; ++j) {
                    if (insideTriangle(x + offset[i], y + offset[j], t.v)) {
                        ++in_num;
                    }
                }
            }
            if (in_num > 0 &&insideTriangle(x + 0.5, y + 0.5, t.v)) {
                auto [alpha, beta, gamma] = computeBarycentric2D(x, y, t.v);
                float w_reciprocal = 1.0 / (alpha / v[0].w() + beta / v[1].w() + gamma / v[2].w());
                float z_interpolated =
                    alpha * v[0].z() / v[0].w() + beta * v[1].z() / v[1].w() + gamma * v[2].z() / v[2].w();
                z_interpolated *= w_reciprocal;

                index = get_index(x, y);

                if (index < frame_buf.size() && depth_buf[index] > z_interpolated) {
                    depth_buf[index] = z_interpolated;
                    Eigen::Vector3f point;
                    point << static_cast<float>(x), static_cast<float>(y), z_interpolated;
                    set_pixel(point, t.getColor() * in_num / (sample_num * sample_num));
                }

            }
        }
    }

其中会遇到几个问题，一是三角形的边可能会呈现黑色，这是因为当覆盖率过低的时候，乘上rgb基于接近于0，也就是黑色，然后蓝色三角形在绿色三角形的后面，计算深度的时候大于绿色三角形的深度，所以无法写入，就会呈现黑边的情况。