摘要

寫作動機：畢業設計是從頭寫一個3D渲染器，編程語言為Rust，鑒于有幸聽過GAMES101相關課程，遂想為畢設加入4xMSAA抗鋸齒演算法，但踩了幾個大坑，差點自閉，解決后趁思路還算清晰，分享一下遇到的難點和對應方案，

這三篇博文給了我較大啟發：

博文一
博文二
博文三

另外，本文并不會教你MSAA的原理，討論僅從我在實作時應用的方案來切入，

問題的產生

接觸過GAMES101 CG課作業二的伙伴應該熟悉，課程定義的MSAA流程以及我們在網上看到的實作如下：

// 't'為當前三角形面片
seg_pos = {{0.25, 0.25}, {0.75, 0.25},{0.25, 0.75}, {0.75, 0.75}};
for(int x=x_l;x<=x_r;x++)
    for(int y=y_b;y<=y_t;y++) 
        int count = 0
        float min_depth = FLT_MAX;
        for(auto & e : seg_pos) 
            if(insideTriangle((float)x + e[0], (float)y + e[1], t.v)) 
                count++
                ...用重心坐標插值出當前采樣點深度
                min_depth = std::min(min_depth, 當前采樣點深度)
        if(count != 0 && depth_buf[get_index(x, y)] > min_depth) 
            像素顏色 = t.getColor() * (count / 4)
            設定顏色(像素顏色)

這是一種簡化版MSAA：四個子采樣點設定在像素中心的右上角，判斷每個采樣點是否在當前考慮的三角形面片內，若是則命中次數加1，并維護一個變數min_depth，記錄四個采樣點中最小的深度值，如果命中次數為0，或者未通過深度測驗，則直接discard當前像素；否則當前像素設定顏色為 三角形顏色 * 命中率，說白了就是簡單的算術平均，

于是乎，我為畢設實作MSAA時便屁顛屁顛地直接將上述流程照搬，結果出了大問題 -- 每個三角形面片之間出現了黑色裂縫：

一開始我以為又是什么舍入帶來的精度損失，查閱資料后，好像在實作GAMES作業2的時候也有類似問題，

于是我重新回去運行作業2，確實在三角形交界處會出現黑線：

直接原因便是，這種演算法存在一個缺陷，具體請看圖：

（注意，作業2比較特殊，整個場景就定義了兩個三角形面片，也就是藍色和黃綠色三角形）

圖中，我們正在藍色三角形內進行光柵化，考慮一種最壞的情況，即邊緣像素僅有左下角的采樣點命中了藍色三角形內部，

按照上面偽代碼的思路，根本不考慮另外三個處于黃綠色三角形內的采樣點的貢獻，當前像素顏色簡單粗暴設定為 t.getColor() * (1/4) ，這里的 \(t\) 即為藍色三角形，它的顏色為 \(RGB(194,217,233)\)，則當前像素會被設定為 \(RGB(48,54,58)\)，呈現出一種類似于黑色的顏色，所以也不難想象當采樣點命中為2、3個的時候，顏色也只是會稍微淺一點罷了，這與右邊的黃綠色產生了一種較強的割裂感，從而產生裂縫的錯覺，

嘗試解決

意識到問題后，我便查閱資料，并確定要實作一種開銷較大的MSAA：

每個像素有4bit的coverage mask，以及4個深度值（每個sample各一個），另外還有其他attribute（最簡單的就是color），并且是可以拿一份color copy給所有sample（準確地說是只copy給那些mask非0的sample），而這份color可以來自像素中心或者某個sample，

策略

我選用的策略是，對于一個像素，算出其每個被命中sample(采樣點)的顏色、深度，最后再對相關值進行關于命中次數的算術平均：

（這個例子和上述作業2不太一樣，這里假設背景的藍色和黃綠色僅恰巧為某些材質的接縫處，并不是簡單的兩個三角形交界；圖中的三角形是很多三角面片的其中一個）

如圖，按照我選擇的策略，該像素最右的sample在該三角形之外，被discard(丟棄)，那么該像素的顏色即為剩下三個sample顏色的算術平均，最終顏色在邊界處產生一種較為平滑的過渡，

實作

你可能會注意到我在講述策略時用了一種不太一樣的sample模式，也即采樣點并非在像素右上角，而是環繞像素中心并略微旋轉：

因為在應對三角形邊界情形時，順時針旋轉26.6度的算子被證明是一種比較有效的sample模式，下面來看如何通過代碼一步步實作：

為了得到目標模式，我們先確立一個正正方方的采樣模式，其各sample都是一個Vector2型別，為這些sample均乘以一個旋轉矩陣即可：

pub static MSAA_LEVEL: usize = 4;
pub static MSAA_OFFSET: f32 = 0.25;
pub static MSAA_SAMPLE_POS: Matrix2<Vector2<f32>> = Matrix2::new(
    Vector2::new(-MSAA_OFFSET,-MSAA_OFFSET),Vector2::new(MSAA_OFFSET,MSAA_OFFSET),
    Vector2::new(-MSAA_OFFSET,MSAA_OFFSET),Vector2::new(MSAA_OFFSET,-MSAA_OFFSET),
);

MSAA_LEVEL表征一個像素的sample個數
MSAA_OFFSET表征每個sample與像素中心x、y的偏移絕對值
MSAA_SAMPLE_POS表征還未旋轉的sample模式

計算旋轉后的模式：

pub fn calc_conv() -> Matrix2<Vector2<f32>> {
    let mut conv_tmp: Matrix2<Vector2<f32>> = Default::default();
    let rotate: Matrix2<f32> = rotate_matrix2d(-26.6);
    for i in 0..4 {
        conv_tmp[i] = rotate*MSAA_SAMPLE_POS[i];
    }
    conv_tmp
}

為了方便輸出單個像素四個sample的狀態，我定義了一個結構叫做 MsaaTensor

pub struct MsaaTensor {
    mask:  Vector4<bool>,
    dept:  Vector4<f32>,
    colo:  Vector4<Vector3<f32>>,
}

mask記錄各sample是否被激活(命中 / hit)
dept記錄各sample的深度
colo記錄各sample的顏色

進入渲染例程，通過三個變數奠基：

for 像素(x,y) in 當前三角形包圍盒 {
    let 像素坐標 = x + y * self.height;
    let 張量 = msaa_tensors[像素坐標];
    let hit = 0.0;
    ......
}

為每個像素計算其MsaaTensor四個角的資訊：

for 像素(x,y) in 當前三角形包圍盒 {
    ......
    for idx in 0..MSAA_LEVEL {
        let 采樣點重心坐標 = barycentric(三角形三頂點,像素.x+采樣模式[idx].x,像素.y+采樣模式[idx].y);
        if 在三角形內(采樣點重心坐標) {
            hit += 1.0;
            let 深度 = 深度插值(采樣點重心坐標,三角形三頂點);
            tensor.設定標志(idx,true);
            tensor.設定深度(idx,深度);
            tensor.設定顏色(idx,著色器.顏色(采樣點重心坐標));
        }else {
            tensor.設定標志(idx,false);
        }
    }
    ......
}

如果沒有子sample被hit，那么直接discard此像素：

for 像素(x,y) in 當前三角形包圍盒 {
    ......
    if hit == 0.0 {
        continue;
    }
    ......
}

只要有一個sample被hit，計算blend資訊并著色：

for 像素(x,y) in 當前三角形包圍盒 {
    .......
    else {
        let 漫反射_blend = Default::default();
        let 深度_blend = 0.0;
        for idx in 0..MSAA_LEVEL {
            if msaa_tensors[ipixel].標志位(idx) == true {
                漫反射_blend += msaa_tensors[ipixel].顏色(idx);
                深度_blend   += msaa_tensors[ipixel].深度(idx);
            }
        }

        // 當前pixel的深度由被hit的子sample混合得到
        深度_blend /= hit;
        if 深度快取(像素.x,像素.y)>深度_blend {
            continue;
        }

        深度快取(像素x, 像素.y, depth_blend);
        幀快取(像素.x, 像素.y, 漫反射_blend/hit);
    }
    ......
}

運行程式看看效果：

對比發現，好像除了一些地方變糊了，模型內部顏色交界處改善不太明顯，那么試著把MSAA_OFFSET的步長改大一點：

pub static MSAA_OFFSET: f32 = 0.5;

效果相對明顯了，但我發現除了顏色變換劇烈的邊緣，一些較為平滑的區域也被MSAA處理得糊成一片，原因是我們的策略會對一切sample hit數不為0的像素進行算術平均處理，這與MSAA的理念相違背了，

改進

若像素的sample hit數為4，則表明該像素并不處于三角形面片邊緣，也就沒必要進行MSAA平均處理，直接用改像素點本身的顏色著色就行了，有了這個覺悟，為代碼加一段判定：

for 像素(x,y) in 當前三角形包圍盒 {
    .......
    else if hit == 4.0 {
        let 像素重心坐標 = barycentric(三角形三頂點,像素.x,像素.y);
        let 深度 = 深度插值(像素重心坐標,三角形三頂點);
        if 深度快取(像素.x,像素.y)>深度 {
            continue;
        }
        深度快取(像素x, 像素.y, 深度);
        幀快取(像素.x, 像素.y, 著色器.顏色(像素重心坐標));
        continue;
    }
    ......
}

看看效果：

很明顯內部平滑部分未被MSAA影響，但似乎對比起來效果不顯著，這里我還是感到比較困惑，歡迎伙伴一起討論，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/282226.html

標籤：其他

上一篇：求助用python kivy開發的app的微信、支付寶登錄和支付的相關課程

下一篇：javase面試問題

[畢設] 用Rust實作一個3D渲染器 - 淺談MSAA抗鋸齒

摘要

問題的產生

嘗試解決

策略

實作

改進