軟渲染教程(四):用Z-Buffer剔除被遮擋的面

本教程代碼位于我的github,參考的英文教程講解的比我好很多,推薦大家看一下站欺。

這篇課程我們來實現(xiàn)z-buffer。z-buffer是什么贾虽?z-buffer是一個緩沖區(qū)绰咽,里面存的是圖像內(nèi)頂點的z值。我們?yōu)槭裁匆秧旤c的z值存起來呢地粪?因為z值是場景內(nèi)頂點的深度值取募,因此通過z-buffer我們可以確定一個點p是否可以畫在屏幕上(當(dāng)點p的深度值大于z-buffer中已有的深度值時,證明p點沒有被遮擋)驶忌。
好了矛辕,我們先來直觀的看一眼z-buffer吧:

你可能會大吃一驚:z-buffer是一張圖付魔?這么說即對也不對聊品,我們確實可以把z-buffer顯示成一張圖,圖中每個像素對應(yīng)著我們實際圖像中像素的深度值几苍。所以這樣圖中越白的地方離我們越近(即z值越大)翻屈。

開始

我們先申請一塊內(nèi)存,用于存儲像素的z值妻坝,大小應(yīng)該等于我們圖像的大小

float zBuffer[width][height];

設(shè)置zBuffer的初始值伸眶,我們希望剛開始zBuffer是空的,任何像素都能寫入到圖像中刽宪,所以初始化的代碼應(yīng)該是這樣:

for(int i = 0; i < width; ++i)
    for(int j = 0; j < height; ++j)
        zBuffer[i][j] = -std::numeric_limits<float>::max();

好了厘贼,下一步祭出我們上次課程的代碼,額外加上這次zBuffer的代碼:

const int width = 500;
const int height = 500;
float3 lightDir(0, 0, -1);
Model model("resource/african_head/african_head.obj");
TGAImage image(width, height, TGAImage::RGB);
float zBuffer[width][height];
for(int i = 0; i < width; ++i)
    for(int j = 0; j < height; ++j)
        zBuffer[i][j] = -std::numeric_limits<float>::max();

for (int i = 0; i<model.nfaces(); i++) {
    std::vector<int> face = model.face(i);
    float3 screen_coords[3];
    float3 world_coords[3];
    for (int j = 0; j<3; j++) {
        float3 v = model.vert(face[j]);
        screen_coords[j] = float3(int((v.x + 1)*width / 2.0 + 0.5), int((v.y + 1)*height / 2.0 + 0.5), v.z);
        world_coords[j] = v;
    }
    float3 a = world_coords[2] - world_coords[0];
    float3 b = world_coords[1] - world_coords[0];
    float3 n = a.cross(b);
    float diffuse = n.normalize().dot(lightDir);
    if (diffuse > 0)
    {
        TGAColor lightColor(diffuse * 255, diffuse * 255, diffuse * 255, 255);
        Interpolation(screen_coords[0], screen_coords[1], screen_coords[2], [&](float3 p) {
            // 本次額外增加的代碼圣拄,如果p.z的值大于zBuffer中已有的值嘴秸,證明當(dāng)前點未被遮擋,則可以畫如image庇谆,并且更新zBuffer岳掐。
            if (p.z > zBuffer[int(p.x)][int(p.y)])
            {
                image.set(p.x, p.y, lightColor);
                zBuffer[int(p.x)][int(p.y)] = p.z;
            }
        });
    }
}
image.flip_vertically();
image.write_tga_file("output/lesson3/zBufferModel.tga");

關(guān)鍵代碼在于

Interpolation(screen_coords[0], screen_coords[1], screen_coords[2], [&](float3 p) {
    if (p.z > zBuffer[int(p.x)][int(p.y)])
    {
        image.set(p.x, p.y, lightColor);
        zBuffer[int(p.x)][int(p.y)] = p.z;
    }
});

當(dāng)z值大于zBuffer中已有值的時候,證明這一像素未被遮擋饭耳,則可以畫在屏幕上串述,最后別忘了更新zBuffer。
代碼另外還有一處修改寞肖,因為我們上次課程的代碼只對x,y進行了插值纲酗,這次我們需要額外對z值進行插值。修改Interpolation()的實現(xiàn)如下:

float3 barycentric(float3 A, float3 B, float3 C, float3 P) {
    float3 s[2];
    s[1].x = C.y - A.y;
    s[1].y = B.y - A.y;
    s[1].z = A.y - P.y;
    s[0].x = C.x - A.x;
    s[0].y = B.x - A.x;
    s[0].z = A.x - P.x;

    float3 u = s[0].cross(s[1]);
    if (std::abs(u.z)>1e-2) // dont forget that u[2] is integer. If it is zero then triangle ABC is degenerate
        return float3(1.f - (u.x + u.y) / u.z, u.y / u.z, u.x / u.z);
    return float3(-1, 1, 1); // in this case generate negative coordinates, it will be thrown away by the rasterizator
}


void Interpolation(float3 p0, float3 p1, float3 p2, function<void(float3)> handler)
{
    float2 bboxmin(1000, 1000);
    float2 bboxmax(0, 0);
    float2 clamp(1000, 1000);
    bboxmin.x = std::max(0.0f, std::min(bboxmin.x, p0.x));
    bboxmax.x = std::min(clamp.x, std::max(bboxmax.x, p0.x));
    bboxmin.y = std::max(0.0f, std::min(bboxmin.y, p0.y));
    bboxmax.y = std::min(clamp.y, std::max(bboxmax.y, p0.y));
    bboxmin.x = std::max(0.0f, std::min(bboxmin.x, p1.x));
    bboxmax.x = std::min(clamp.x, std::max(bboxmax.x, p1.x));
    bboxmin.y = std::max(0.0f, std::min(bboxmin.y, p1.y));
    bboxmax.y = std::min(clamp.y, std::max(bboxmax.y, p1.y));
    bboxmin.x = std::max(0.0f, std::min(bboxmin.x, p2.x));
    bboxmax.x = std::min(clamp.x, std::max(bboxmax.x, p2.x));
    bboxmin.y = std::max(0.0f, std::min(bboxmin.y, p2.y));
    bboxmax.y = std::min(clamp.y, std::max(bboxmax.y, p2.y));

    float3 P;
    for (P.x = bboxmin.x; P.x <= bboxmax.x; P.x++) {
        for (P.y = bboxmin.y; P.y <= bboxmax.y; P.y++) {
            float3 bc_screen = barycentric(p0, p1, p2, P);
            if (bc_screen.x<0 || bc_screen.y<0 || bc_screen.z<0) continue;
            P.z = 0;
            P.z += p0.z * bc_screen.x;
            P.z += p1.z * bc_screen.y;
            P.z += p2.z * bc_screen.z;
            handler(P);
        }
    }
}

思路與上次課程是一樣的新蟆,只是增加了對于z值的插值耕姊。
這樣就可以得到正確的模型圖片:

假如我們想看一下zBuffer中的值也很容易,增加如下代碼:

image.clear();
for (int i = 0; i < width; ++i)
{
    for (int j = 0; j < height; ++j)
    {
        int gray = (zBuffer[i][j] + 1) / 2 * 255;
        image.set(i, j, TGAColor(gray, gray, gray, 255));
    }
}
image.flip_vertically();
image.write_tga_file("output/lesson3/zBuffer.tga");

z值的范圍是[-1, 1]栅葡,為了把z值變成顏色值,我們需要先加1把z值約束到[0,2]尤泽,然后再除2乘以255欣簇,則深度值就變成了一個從0到255的數(shù)字规脸。
得到圖像:

下次課程,我們會為我們的圖像附上紋理熊咽,等到這樣的結(jié)果:

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末莫鸭,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子横殴,更是在濱河造成了極大的恐慌被因,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,265評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件衫仑,死亡現(xiàn)場離奇詭異梨与,居然都是意外死亡,警方通過查閱死者的電腦和手機文狱,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評論 2 385
  • 文/潘曉璐 我一進店門粥鞋,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人瞄崇,你說我怎么就攤上這事呻粹。” “怎么了苏研?”我有些...
    開封第一講書人閱讀 156,852評論 0 347
  • 文/不壞的土叔 我叫張陵等浊,是天一觀的道長。 經(jīng)常有香客問我摹蘑,道長筹燕,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,408評論 1 283
  • 正文 為了忘掉前任纹蝴,我火速辦了婚禮庄萎,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘塘安。我一直安慰自己糠涛,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,445評論 5 384
  • 文/花漫 我一把揭開白布兼犯。 她就那樣靜靜地躺著忍捡,像睡著了一般。 火紅的嫁衣襯著肌膚如雪切黔。 梳的紋絲不亂的頭發(fā)上砸脊,一...
    開封第一講書人閱讀 49,772評論 1 290
  • 那天,我揣著相機與錄音纬霞,去河邊找鬼凌埂。 笑死,一個胖子當(dāng)著我的面吹牛诗芜,可吹牛的內(nèi)容都是我干的瞳抓。 我是一名探鬼主播埃疫,決...
    沈念sama閱讀 38,921評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼孩哑!你這毒婦竟也來了栓霜?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,688評論 0 266
  • 序言:老撾萬榮一對情侶失蹤横蜒,失蹤者是張志新(化名)和其女友劉穎胳蛮,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體丛晌,經(jīng)...
    沈念sama閱讀 44,130評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡仅炊,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,467評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了茵乱。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片茂洒。...
    茶點故事閱讀 38,617評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖瓶竭,靈堂內(nèi)的尸體忽然破棺而出督勺,到底是詐尸還是另有隱情,我是刑警寧澤斤贰,帶...
    沈念sama閱讀 34,276評論 4 329
  • 正文 年R本政府宣布智哀,位于F島的核電站,受9級特大地震影響荧恍,放射性物質(zhì)發(fā)生泄漏瓷叫。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,882評論 3 312
  • 文/蒙蒙 一送巡、第九天 我趴在偏房一處隱蔽的房頂上張望摹菠。 院中可真熱鬧,春花似錦骗爆、人聲如沸次氨。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽煮寡。三九已至,卻和暖如春犀呼,著一層夾襖步出監(jiān)牢的瞬間幸撕,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評論 1 265
  • 我被黑心中介騙來泰國打工外臂, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留坐儿,地道東北人。 一個月前我還...
    沈念sama閱讀 46,315評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像挑童,于是被迫代替她去往敵國和親累铅。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,486評論 2 348

推薦閱讀更多精彩內(nèi)容