【Games 101】HomeWork 2：Triangles and Z-buffering（光栅化 和 抗锯齿）

HomeWork 2：Triangles and Z-buffering（光栅化 和 抗锯齿）

代码

Eigen::Matrix4f get_projection_matrix(float eye_fov, float aspect_ratio, float zNear, float zFar)
{
    /*
    	这个里的 zNear，zFar 给的又是负数了...
    	所以这里是不用反转的...
    	不然结果会相反，大家可以试试
    */
    
    Eigen::Matrix4f projection = Eigen::Matrix4f::Identity();
	...
    return projection;
}

// 判断点是否在三角形内（我这里用的是叉积）
static bool insideTriangle(int x, int y, const Vector3f* _v)
{   
    // 这个表示叉积后的方向，0 表示负，1 表示正
    int flag = -1;

    for(int i = 0; i < 3; i++) 
    {
        // the current point
        Eigen::Vector3f p0 = {x, y, 0};
        // the 1st vertex
        Eigen::Vector3f p1 = _v[i];
        // the 2nd vertex
        Eigen::Vector3f p2 = _v[(i+1)%3];
        
        // 第一个向量 (p1-p0)
        Eigen::Vector3f v1 = p1-p0;
        // 第二个向量 (p1-p2)
        Eigen::Vector3f v2 = p1-p2;

        // 求一下叉积
        float cp = v1.cross(v2).z();
        if(cp == 0) continue;

        int sign = cp < 0 ? 0: 1;
        if(flag == -1) flag = sign;
        if(flag != sign) return false;
    }

    return true;
}

// 三角形光栅化
void rst::rasterizer::rasterize_triangle(const Triangle& t) 
{
    auto v = t.toVector4();
    
    int min_x = INT_MAX;
    int max_x = INT_MIN;
    int min_y = INT_MAX;
    int max_y = INT_MIN;

    // 求一下三角形的包围盒
    for (auto point : v) //获取包围盒边界
    {
        min_x = min(min_x, point[0]);
        max_x = max(max_x, point[0]);
        min_y = min(min_y, point[1]);
        max_y = max(max_y, point[1]);
    } 
    
    // 遍历包围盒里面的点
    for (int y = min_y; y <= max_y; y++)
    {
        for (int x = min_x; x <= max_x; x++)
        {
            if (insideTriangle((float)x+0.5, (float)y+0.5, t.v))
            {
                // 获取像素点在三角形内的 “重心坐标的系数”
                auto[alpha, beta, gamma] = computeBarycentric2D(x+0.5, y+0.5, 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;

                // 判断当前z值是否小于原来z表此位置的z值
                if (z_interpolated < depth_buf[get_index(x, y)]) 
                {
                    Eigen::Vector3f p = { (float)x,(float)y, z_interpolated }; // 当前坐标
                    set_pixel(p, t.getColor()); 
                    depth_buf[get_index(x, y)] = z_interpolated; // 更新z值
                }
            }
        }
    }
}

提高的抗锯齿可以看这里：

Games101｜作业2 + 光栅化 + SSAA vs MSAA + 黑边问题 - 知乎 (zhihu.com)

分析的太棒了！

结果

补一下提高 嘻嘻嘻

rasterizer.hpp 添加

std::vector<Eigen::Vector3f> color_list;

rasterizer.cpp

// 判断点是否在三角形内（我这里用的是叉积）
static bool insideTriangle(float x, float y, const Vector3f* _v)
{   
    // 这个表示叉积后的方向，0 表示负，1 表示正
    int flag = -1;

    for(int i = 0; i < 3; i++) 
    {
        // the current point
        Eigen::Vector3f p0 = {x, y, 0};
        // the 1st vertex
        Eigen::Vector3f p1 = _v[i];
        // the 2nd vertex
        Eigen::Vector3f p2 = _v[(i+1)%3];
        
        // 第一个向量 (p1-p0)
        Eigen::Vector3f v1 = p1-p0;
        // 第二个向量 (p1-p2)
        Eigen::Vector3f v2 = p1-p2;

        // 求一下叉积         float cp = v1.cross(v2).z();
        if(cp == 0) continue;

        int sign = cp < 0 ? 0: 1;
        if(flag == -1) flag = sign;
        if(flag != sign) return false;
    }

    return true;
}

/* ------------------------------------------------------------------------------- */

// 四个采样点 float dx[] = {0.25, 0.25, 0.75, 0.75};
float dy[] = {0.25, 0.75, 0.25, 0.75};
// 三角形光栅化
void rst::rasterizer::rasterize_triangle(const Triangle& t) 
{
    auto v = t.toVector4();
    
    int min_x = INT_MAX;
    int max_x = INT_MIN;
    int min_y = INT_MAX;
    int max_y = INT_MIN;

    // 求一下三角形的包围盒
    for (auto point : v) //获取包围盒边界     {
        min_x = min((float)min_x, point[0]);
        max_x = max((float)max_x, point[0]);
        min_y = min((float)min_y, point[1]);
        max_y = max((float)max_y, point[1]);
    } 
    
    // 遍历包围盒里面的点     for (int y = min_y; y < max_y; y++)
    {
        for (int x = min_x; x < max_x; x++)
        {
            // 取四个点(MSAA)
            for(int i=0;i<4;i++)
            {
                float xx = (double)x + dx[i];
                float yy = (double)y + dy[i];

                if (insideTriangle(xx, yy, t.v))
                {
                    // 获取像素点在三角形内的 “重心坐标的系数”
                	auto[alpha, beta, gamma] = computeBarycentric2D(x+0.5, y+0.5, 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;

                    // 判断当前z值是否小于原来z表此位置的z值                     if (z_interpolated < depth_buf[get_index(x, y)*4+i]) 
                    {
                        // 更新这个采样点                         depth_buf[get_index(x, y)*4+i] = z_interpolated;
                        color_list[get_index(x, y)*4+i] = t.getColor();

                        // 重新算一下这个像素点的颜色(取平均)
                        Eigen::Vector3f new_color(0.0f, 0.0f, 0.0f);
                        for(int j=0;j<4;j++) 
                            new_color += color_list[get_index(x, y)*4+j];
                        new_color /= 4;

                        // 更新当前像素的值                         Eigen::Vector3f p = { (float)x,(float)y, z_interpolated };
                        set_pixel(p, new_color);
                    }
                }
            }
        }
    }
}

结果

结果对比：

太神奇啦！