天天看點

從零實作3D圖像引擎:(15)三角形的光栅化

1. 為什麼要光栅化一個三角形

我們不能總讓我們的引擎顯示線框,要支援實心顔色、光照還有紋理貼圖,這些都需要光栅化一個三角形作為支援。

2. 三角形的類型

為了友善光栅化,一般将三角形分為以下4種:

從零實作3D圖像引擎:(15)三角形的光栅化

3. 平底三角形光栅化

先上圖:

從零實作3D圖像引擎:(15)三角形的光栅化

光栅化平底三角形的原理很簡單,就是從上往下畫橫線。在圖裡我們取任意的一條光栅化直線,這條直線左邊的端點x值為XL,右邊的為XR。y值就不用考慮了,因為這些線是從上往下畫的,是以y就是從y0一直++,直到y1或者y2。

是以算法很簡單,就是每次增加一個y,就要計算一下XL和XR,然後調用我們很早以前寫的那個光栅化直線的函數,來畫這條線即可。

怎麼求XL和XR呢?

直線有很多種形式可以表示,因為我們現在知道頂點的坐标,是以最直覺的表示形式就是兩點式:

對于已知直線上的兩點(x1,y1)和(x2,y2)有:

(y-y1) / (y2-y1) = (x-x1) / (x2-x1)

因為y已知,我們變換一下公式,表示為x的值為:

x = (y-y1) * (x2-x1) / (y2-y1)

根據上圖的,我們隻要把P0,P1代入,就可以求得XL,把P0,P2代入,就可以求得XR。不多說了,直接給出實作代碼:

void _CPPYIN_3DLib::DrawTriangle1(int x1, int y1, int x2, int y2, int x3, int y3, DWORD color) // 畫實心平底三角形

{

for (int y = y1; y <= y2; ++y)

{

int xs, xe;

xs = (y - y1) * (x2 - x1) / (y2 - y1) + x1 + 0.5;

xe = (y - y1) * (x3 - x1) / (y3 - y1) + x1 + 0.5;

DrawLine(xs, y, xe, y, color);

}

}

4. 平頂三角形的光栅化

不用多說了,原理同上,直接貼代碼了。

void _CPPYIN_3DLib::DrawTriangle2(int x1, int y1, int x2, int y2, int x3, int y3, DWORD color) // 畫實心平頂三角形

{

for (int y = y1; y <= y3; ++y)

{

int xs, xe;

xs = (y - y1) * (x3 - x1) / (y3 - y1) + x1 + 0.5;

xe = (y - y2) * (x3 - x2) / (y3 - y2) + x2 + 0.5;

DrawLine(xs, y, xe, y, color);

}

}

5.  任意三角形的光栅化

從零實作3D圖像引擎:(15)三角形的光栅化

其實看了這個圖就應該發現特簡單,我們求得一個特殊點(xlongside, ymiddle),之後畫一個平底三角形,再畫一個平頂三角形就搞定了。

下面的代碼實作了這個功能,有幾點輔助說明一下:

1. 通過給定三個頂點的y值,可以判斷出是否是平頂還是平底,如果滿足其一,就直接畫。

2. 傳入函數的三個頂點是亂序的,是以要根據y值的情況來區分幾種情況,在我的實作裡,窮舉了y值的幾種情況,然後給上圖中的三個點指派。

3. 依次畫就是了,下面是代碼。

void _CPPYIN_3DLib::DrawTriangle(int x1, int y1, int x2, int y2, int x3, int y3, DWORD color) // 畫任意實心三角形

{

if (y1 == y2)

{

if (y3 <= y1) // 平底

{

DrawTriangle1(x3, y3, x1, y1, x2, y2, color);

}

else // 平頂

{

DrawTriangle2(x1, y1, x2, y2, x3, y3, color);

}

}

else if (y1 == y3)

{

if (y2 <= y1) // 平底

{

DrawTriangle1(x2, y2, x1, y1, x3, y3, color);

}

else // 平頂

{

DrawTriangle2(x1, y1, x3, y3, x2, y2, color);

}

}

else if (y2 == y3)

{

if (y1 <= y2) // 平底

{

DrawTriangle1(x1, y1, x2, y2, x3, y3, color);

}

else // 平頂

{

DrawTriangle2(x2, y2, x3, y3, x1, y1, color);

}

}

else

{

double xtop, ytop, xmiddle, ymiddle, xbottom, ybottom;

if (y1 < y2 && y2 < y3) // y1 y2 y3

{

xtop = x1;

ytop = y1;

xmiddle = x2;

ymiddle = y2;

xbottom = x3;

ybottom = y3;

}

else if (y1 < y3 && y3 < y2) // y1 y3 y2

{

xtop = x1;

ytop = y1;

xmiddle = x3;

ymiddle = y3;

xbottom = x2;

ybottom = y2;

}

else if (y2 < y1 && y1 < y3) // y2 y1 y3

{

xtop = x2;

ytop = y2;

xmiddle = x1;

ymiddle = y1;

xbottom = x3;

ybottom = y3;

}

else if (y2 < y3 && y3 < y1) // y2 y3 y1

{

xtop = x2;

ytop = y2;

xmiddle = x3;

ymiddle = y3;

xbottom = x1;

ybottom = y1;

}

else if (y3 < y1 && y1 < y2) // y3 y1 y2

{

xtop = x3;

ytop = y3;

xmiddle = x1;

ymiddle = y1;

xbottom = x2;

ybottom = y2;

}

else if (y3 < y2 && y2 < y1) // y3 y2 y1

{

xtop = x3;

ytop = y3;

xmiddle = x2;

ymiddle = y2;

xbottom = x1;

ybottom = y1;

}

int xl; // 長邊在ymiddle時的x,來決定長邊是在左邊還是右邊

xl = (ymiddle - ytop) * (xbottom - xtop) / (ybottom - ytop) + xtop + 0.5;

if (xl <= xmiddle) // 左三角形

{

// 畫平底

DrawTriangle1(xtop, ytop, xl, ymiddle, xmiddle, ymiddle, color);

// 畫平頂

DrawTriangle2(xl, ymiddle, xmiddle, ymiddle, xbottom, ybottom, color);

}

else // 右三角形

{

// 畫平底

DrawTriangle1(xtop, ytop, xmiddle, ymiddle, xl, ymiddle, color);

// 畫平頂

DrawTriangle2(xmiddle, ymiddle, xl, ymiddle, xbottom, ybottom, color);

}

}

}

6. 實作物體的實心渲染

之前我們隻有一種渲染模式就是線框,有了上面的三角形光栅化函數,我們就可以做實心渲染了,下面是實作渲染的代碼,非常簡單。

就是周遊物體的每個三角面,然後調用上面的函數而已,嘿嘿。

void _CPPYIN_3DLib::ObjectDrawSolid(OBJECT_PTR obj) // 繪制物體實心多邊形

{

for (int i = 0; i < obj->PolyCount; ++i)

{

POINT4D_PTR p0 = &(obj->VertexListTrans[obj->PolyList[i].VertexIndexs[0]]);

POINT4D_PTR p1 = &(obj->VertexListTrans[obj->PolyList[i].VertexIndexs[1]]);

POINT4D_PTR p2 = &(obj->VertexListTrans[obj->PolyList[i].VertexIndexs[2]]);

// 隻畫正面

if (obj->PolyList[i].State == POLY_STATE_ACTIVE)

{

DrawTriangle(p0->x, p0->y, p1->x, p1->y, p2->x, p2->y, obj->PolyList[i].Color);

}

}

}

7. 截圖

這個就是實心渲染的Demo截圖了。

從零實作3D圖像引擎:(15)三角形的光栅化

8. 代碼下載下傳

完整項目源代碼:>>點選進入下載下傳頁<<

9. 特殊說明

前一陣為了找工作補了補C++,最近開始工作了,做一個網絡遊戲的用戶端,是以沒怎麼更新這個圖形庫,最近有空繼續更新吧。發現對C++還是不熟練,可能更多的會更新一些C++的東西了。

繼續閱讀