從零實現3D映像引擎：(15)三角形的光柵化

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

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

 

 

2. 三角形的類型

為了方便光柵化，一般將三角形分為以下4種：

 

 

 

3. 平底三角形光柵化

先：

光柵化平底三角形的原理很簡單，就是從上往下畫橫線。在圖裡我們取任意的一條光柵化直線，這條直線左邊的端點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) // 畫實心平底三角形<br />{<br />for (int y = y1; y <= y2; ++y)<br />{<br />int xs, xe;<br />xs = (y - y1) * (x2 - x1) / (y2 - y1) + x1 + 0.5;<br />xe = (y - y1) * (x3 - x1) / (y3 - y1) + x1 + 0.5;<br />DrawLine(xs, y, xe, y, color);<br />}<br />}

 

 

 

4. 平頂三角形的光柵化

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

void _CPPYIN_3DLib::DrawTriangle2(int x1, int y1, int x2, int y2, int x3, int y3, DWORD color) // 畫實心平頂三角形<br />{<br />for (int y = y1; y <= y3; ++y)<br />{<br />int xs, xe;<br />xs = (y - y1) * (x3 - x1) / (y3 - y1) + x1 + 0.5;<br />xe = (y - y2) * (x3 - x2) / (y3 - y2) + x2 + 0.5;<br />DrawLine(xs, y, xe, y, color);<br />}<br />}

 

 

 

5.  任意三角形的光柵化

其實看了這個圖就應該發現特簡單，我們求得一個特殊點(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) // 畫任意實心三角形<br />{<br />if (y1 == y2)<br />{<br />if (y3 <= y1) // 平底<br />{<br />DrawTriangle1(x3, y3, x1, y1, x2, y2, color);<br />}<br />else // 平頂<br />{<br />DrawTriangle2(x1, y1, x2, y2, x3, y3, color);<br />}<br />}<br />else if (y1 == y3)<br />{<br />if (y2 <= y1) // 平底<br />{<br />DrawTriangle1(x2, y2, x1, y1, x3, y3, color);<br />}<br />else // 平頂<br />{<br />DrawTriangle2(x1, y1, x3, y3, x2, y2, color);<br />}<br />}<br />else if (y2 == y3)<br />{<br />if (y1 <= y2) // 平底<br />{<br />DrawTriangle1(x1, y1, x2, y2, x3, y3, color);<br />}<br />else // 平頂<br />{<br />DrawTriangle2(x2, y2, x3, y3, x1, y1, color);<br />}<br />}<br />else<br />{<br />double xtop, ytop, xmiddle, ymiddle, xbottom, ybottom;<br />if (y1 < y2 && y2 < y3) // y1 y2 y3<br />{<br />xtop = x1;<br />ytop = y1;<br />xmiddle = x2;<br />ymiddle = y2;<br />xbottom = x3;<br />ybottom = y3;<br />}<br />else if (y1 < y3 && y3 < y2) // y1 y3 y2<br />{<br />xtop = x1;<br />ytop = y1;<br />xmiddle = x3;<br />ymiddle = y3;<br />xbottom = x2;<br />ybottom = y2;<br />}<br />else if (y2 < y1 && y1 < y3) // y2 y1 y3<br />{<br />xtop = x2;<br />ytop = y2;<br />xmiddle = x1;<br />ymiddle = y1;<br />xbottom = x3;<br />ybottom = y3;<br />}<br />else if (y2 < y3 && y3 < y1) // y2 y3 y1<br />{<br />xtop = x2;<br />ytop = y2;<br />xmiddle = x3;<br />ymiddle = y3;<br />xbottom = x1;<br />ybottom = y1;<br />}<br />else if (y3 < y1 && y1 < y2) // y3 y1 y2<br />{<br />xtop = x3;<br />ytop = y3;<br />xmiddle = x1;<br />ymiddle = y1;<br />xbottom = x2;<br />ybottom = y2;<br />}<br />else if (y3 < y2 && y2 < y1) // y3 y2 y1<br />{<br />xtop = x3;<br />ytop = y3;<br />xmiddle = x2;<br />ymiddle = y2;<br />xbottom = x1;<br />ybottom = y1;<br />}<br />int xl; // 長邊在ymiddle時的x，來決定長邊是在左邊還是右邊<br />xl = (ymiddle - ytop) * (xbottom - xtop) / (ybottom - ytop) + xtop + 0.5;</p><p>if (xl <= xmiddle) // 左三角形<br />{<br />// 畫平底<br />DrawTriangle1(xtop, ytop, xl, ymiddle, xmiddle, ymiddle, color);</p><p>// 畫平頂<br />DrawTriangle2(xl, ymiddle, xmiddle, ymiddle, xbottom, ybottom, color);<br />}<br />else // 右三角形<br />{<br />// 畫平底<br />DrawTriangle1(xtop, ytop, xmiddle, ymiddle, xl, ymiddle, color);</p><p>// 畫平頂<br />DrawTriangle2(xmiddle, ymiddle, xl, ymiddle, xbottom, ybottom, color);<br />}<br />}<br />}

 

 

 

6. 實現物體的實心渲染

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

就是遍曆物體的每個三角面，然後調用上面的函數而已，嘿嘿。

void _CPPYIN_3DLib::ObjectDrawSolid(OBJECT_PTR obj) // 繪製物體實心多邊形<br />{<br />for (int i = 0; i < obj->PolyCount; ++i)<br />{<br />POINT4D_PTR p0 = &(obj->VertexListTrans[obj->PolyList[i].VertexIndexs[0]]);<br />POINT4D_PTR p1 = &(obj->VertexListTrans[obj->PolyList[i].VertexIndexs[1]]);<br />POINT4D_PTR p2 = &(obj->VertexListTrans[obj->PolyList[i].VertexIndexs[2]]);</p><p>// 只畫正面<br />if (obj->PolyList[i].State == POLY_STATE_ACTIVE)<br />{<br />DrawTriangle(p0->x, p0->y, p1->x, p1->y, p2->x, p2->y, obj->PolyList[i].Color);<br />}<br />}<br />}

 

 

 

7.

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

 

 

 

8. 代碼下載

完整項目原始碼：>>點擊進入下載頁<<

 

 

 

9. 特殊說明

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