Games-101 personal summary rasterization

( notes ： This article is based on the framework of personal knowledge , For the convenience of later review , On the basis of retaining the original course content framework , The introduction of individual concepts may be too simple , Interested readers can go to GAMES Platform in-depth learning )

Catalog

Rasterization

Different raster displays( A little )

Rasterizing a triangle

Antialiasing（ Anti aliasing ）

Sampling theory

Antialiasing in practice

Occlusions and Visibility（ Deep buffer ）

Visibility / occlusion - Z-buffering

Homework 2

The title is a brief introduction

Core code

1. Judge whether the pixel is in the triangle ：

2. Make the triangle in the scene z-buffer Deep buffer

3.MSAA Handle ：

design sketch

---

Rasterization

Different raster displays( A little )

Rasterizing a triangle

( Triangles produce everything ~~)

The judgment point is in the triangle ：

Cross product , The result is positive or negative , Indicates that the point is on the same side of three sides , That is, the point is in the triangle .

notes ：cross(P0Q,P0p1) -> left;cross(P1Q,P1P2) -> left; cross(P2Q,P2P0) -> right

Antialiasing（ Anti aliasing ）

Sampling theory

1. ( slang )artifacts: Everything is inaccurate , A result that doesn't seem quite right
2. Sampling problems ：

        Jaggies( sawtooth )

        Moiré Patterns( Moore pattern )： Remove the odd rows and columns of the picture and display them according to the original size of the picture .

        

         wagonWagon Wheel Illusion( Wheel illusion )： The human eye can't keep up with the speed in time , And the illusion of reverse rotation of the wheel .

        

        3. The Fourier transform , The process is not detailed , This is mainly to deal with aliasing  The two schemes provide a theoretical basis ：

        (1) Increase the sampling rate ( The essence of sampling is to move the frequency spectrum repeatedly , Sparse sampling in time domain , Corresponding to the frequency domain, the frequency spectrum moves more intensively , The more the spectrum overlaps , So aliasing The more obvious );

•         (2) Anti aliasing ： First do the blur （ Low pass filter the signal , Take off the high frequency signal ）, Resample . let me put it another way , Since you have spectrum aliasing aliasing Then I'll leave the missing part ( High frequency signal ) Take it off ： 

Antialiasing in practice

• MSAA(Multi-Sample Anti-Aliasing)/ Supersampling: Oversampling with more sampling points in a pixel .

        

•   Anti aliasing milestone in the industry ：

        (1)FXAA (Fast Approximate AA); Fast approximate anti aliasing ： Post process the aliasing in the image layer .

        (2)TAA (Temporal AA): A time-based optimization , The current frame multiplexes the pixel value of the previous frame （ stay RTRT There are also related applications ）.

Occlusions and Visibility（ Deep buffer ）

Visibility / occlusion - Z-buffering

• Concept ： The objects in the scene are measured in the order of far to near Z value Do depth buffering , Same pixel , What is near covers what is far away .
• expenses ： You need an extra buffer, Color values are saved framebuffer; The depth value is saved depth buffer(z-buffer).
• other:z-buffer Cannot handle transparent objects
• Algorithm：complex:O(n)

Homework 2

Homework 2 Original link

The title is a brief introduction

Based on job 1 On the basis of space transformation , Rasterize multiple triangles , And the pixels in the triangle are deeply interpolated , And the results antialiasing.

Core code

1. Judge whether the pixel is in the triangle ：

/// <summary>
///  Judge whether the pixel is in the triangle 
/// </summary>
/// <param name="x"> Pixel point  x</param>
/// <param name="y"> Pixel point  y</param>
/// <param name="_v"> Three vertices of a triangle </param>
/// <returns></returns>
static bool insideTriangle(float x, float y, const Vector3f* _v)
{
    // TODO : Implement this function to check if the point (x, y) is inside the triangle represented by _v[0], _v[1], _v[2]
    //  Using the result of vector cross product , Judge whether the pixel points are on the same side of three sides , That means the point is in the triangle 
    Eigen::Vector3f x1 = _v[0];
    Eigen::Vector3f x2 = _v[1];
    Eigen::Vector3f x3 = _v[2];

    //  Three sides of a triangle correspond to a vector 
    Eigen::Vector3f x1x2;
    Eigen::Vector3f x2x3;
    Eigen::Vector3f x3x1;
    x1x2 = { x2.x() - x1.x(), x2.y() - x1.y(), 0 };
    x2x3 = { x3.x() - x2.x(), x3.y() - x2.y(), 0 };
    x3x1 = { x1.x() - x3.x(), x1.y() - x3.y(), 0 };

    //  The pixel points are connected with the three vertices of the triangle to correspond to the vector 
    Eigen::Vector3f x1p;
    Eigen::Vector3f x2p;
    Eigen::Vector3f x3p;

    x1p ={ x - x1.x(), y - x1.y(), 0};
    x2p = { x - x2.x(), y - x2.y(), 0 };
    x3p = { x - x3.x(), y - x3.y(), 0 };

    //  Vector cross product , take z The axis determines whether it is positive or negative 
    float crs1 = x1x2.cross(x1p).z();
    float crs2 = x2x3.cross(x2p).z();
    float crs3 = x3x1.cross(x3p).z();
    return (crs1 > 0 && crs2 > 0 && crs3 > 0) || (crs1 < 0 && crs2 < 0 && crs3 < 0);
}

2. Make the triangle in the scene z-buffer Deep buffer

/// <summary>
/// Screen space rasterization
/// </summary>
/// <param name="t">the triangle need to rasterize</param>
void rst::rasterizer::rasterize_triangle(const Triangle& t) {
    auto v = t.toVector4();

    // compute the bounding box
    int max_x = MAX(v[0].x(), MAX(v[1].x(), v[2].x()));
    int max_y = MAX(v[0].y(), MAX(v[1].y(), v[2].y()));
    
    int min_x = MIN(v[0].x(), MIN(v[1].x(), v[2].x()));
    int min_y = MIN(v[0].y(), MIN(v[1].y(), v[2].y()));

    for (int x1 = min_x; x1 <= max_x; x1++) {
        for (int y1 = min_y; y1 <= max_y; y1++) {
            if (insideTriangle(x1 + 0.5, y1 + 0.5,t.v)) {
                //  Calculate the central coordinate of the point in the triangle , For the following interpolation algorithms, please refer to ：https://zhuanlan.zhihu.com/p/140926917
                auto [alpha, beta, gamma] = computeBarycentric2D(x1, y1, 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;

                if (depth_buf[get_index(x1, y1)] > z_interpolated) {
                    depth_buf[get_index(x1, y1)] = z_interpolated;//  to update  z-buffer  Depth value 
                    set_pixel({ (float)x1,(float)y1,1 }, t.getColor()); //  to update  frame-buffer  Color value 
                }
            }
        }
    }
}

3.MSAA Handle ：

/// <summary>
/// Screen space rasterization(super sampling)
/// </summary>
/// <param name="t">the triangle need to rasterize</param>
void rst::rasterizer::super_rasterize_triangle(const Triangle& t) {
    auto v = t.toVector4();

    // compute the bounding box
    int max_x = MAX(v[0].x(), MAX(v[1].x(), v[2].x()));
    int max_y = MAX(v[0].y(), MAX(v[1].y(), v[2].y()));

    int min_x = MIN(v[0].x(), MIN(v[1].x(), v[2].x()));
    int min_y = MIN(v[0].y(), MIN(v[1].y(), v[2].y()));

    for (int x1 = min_x; x1 <= max_x; x1++) {
        for (int y1 = min_y; y1 <= max_y; y1++) {
            int inner = 0;
            //  One pixel 16 Oversampling points 
            for (int sx = 0; sx < 4; sx++) {
                for (int sy = 0; sy < 4; sy++) {
                    if (insideTriangle(x1 + 0.125 + 0.25 * sx, y1 + 0.125 + 0.25 * sy, t.v)) {
                        inner++;
                    }
                }
            }

            if (inner > 0) {
                // Calculate the coordinates of the triangle center of gravity 
                auto [alpha, beta, gamma] = computeBarycentric2D(x1, y1, 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;

                if (depth_buf[get_index(x1, y1)] > z_interpolated) {
                    depth_buf[get_index(x1, y1)] = z_interpolated;//  to update  z-buffer  Depth value 
                    set_pixel({ (float)x1,(float)y1,1 }, t.getColor() * (inner / 16.f));//  to update  frame-buffer  Color value 
                }

            }

        }
    }
}

design sketch

1. Normal rasterization

2.MSAA Effect comparison after treatment ：