在上一篇中，我們學會如何用Bresenham畫線演算法高效的畫線，在此篇中，我們將學習如何繪制一個三角形并對其進行著色，如何判斷螢屏中同一個像素位置頂點的前后順序
繪制三角形和平面著色
? 繪制圖形，我們需要畫線也就需要學習畫線演算法，但圖形種類多種多樣，為什么我們選擇學習三角形呢？
? 因為三角形是最基本的多邊形，其擁有許多特性：
- 三角形可以分解其他多邊形，也就是我們可以不斷分解其他多邊形，最終形成有多個三角形組成的多邊形
- 三角形保證是平面的
- 三角形可以用叉乘判斷內外
- 三角形內部可以定義插值
? 在講明為什么我們選擇三角形作為最基本的圖形后，我們現在來學習如何繪制一個三角形
? 按照之前的畫線演算法，我們可以很輕松的畫出三角形來,如下圖，但問題是我們平時在游戲中看到的豐富多彩的畫面，很明顯三角形內部是被填充了的，那么請想想我們如何對三角形進行填充呢？
? 實際上一個填充了的圖形也是由許多許多線組成的，也就是我們可以在三角形內部從下往上畫許多許多的水平線將其填充，具體實作上我們會將三角形分成上下兩部分，從下向上填充
void triangle(Vec2i t0, Vec2i t1, Vec2i t2, TGAImage &image, TGAColor color) {
// 將三角形三個頂點y這一維度按從小到大的順序排列
if (t0.y>t1.y) std::swap(t0, t1);
if (t0.y>t2.y) std::swap(t0, t2);
if (t1.y>t2.y) std::swap(t1, t2);
int total_height = t2.y-t0.y; //最大高度，三角形從最y維度上最大的點到最低的點的差
//填充三角形下半部分
for (int y=t0.y; y<=t1.y; y++) {
int segment_height = t1.y-t0.y+1; //y維度上，t1到t2的高度差
float alpha = (float)(y-t0.y) / total_height;
float beta = (float)(y-t0.y) / segment_height;
Vec2i A = t0 + (t2-t0) * alpha;
Vec2i B = t0 + (t1-t0) * beta;
if (A.x>B.x) std::swap(A, B);
for (int j=A.x; j<=B.x; j++) {
image.set(j, y, color); // 填充
}
}
//填充三角形上半部分，方法同上
for (int y=t1.y; y<=t2.y; y++) {
int segment_height = t2.y - t1.y + 1;
float alpha = (float)(y-t0.y) / total_height;
float beta = (float)(y-t1.y) / segment_height;
Vec2i A = t0 + (t2-t0) * alpha;
Vec2i B = t1 + (t2-t1) * beta;
if (A.x>B.x) std::swap(A, B);
for (int j=A.x; j<=B.x; j++) {
image.set(j, y, color);
}
}
}
? 雖然以上方法離結果已經很近了，但想想這樣繪制出的模型，終究是用單調的顏色填充出的，這跟我們平時看的模型相差甚遠,如下，這明顯著色不夠充分，少了明暗，沒有體積感
? 來回想一下,在圖形學中我們學到了著色，那什么是著色呢？引入明暗和不同顏色的程序叫做著色，顏色有了我們還差光照，接下來我們來實作光照
? 在生活中，我們可以觀察到當光線與平面垂直時，光照強度是最強的，也就是說光線與平面的夾角越大，光照越強，夾角越小，光照越弱，因此，我們用光線的負方向 * 法線方向 * cosθ來表示光照強度，對強度為負的情況，相當于夾角在[180,360]，這種所求的平面在相機方向是看不到的，我們會忽略它，這也就是背面剔除
? 那么一個三角形面的法向量如何求呢？我們可以使用叉乘，將三角形兩條邊上的向量進行叉乘，會得到一個垂直兩向量的向量，在下圖也就是$$\vec{AC} × \vec{AB}$$，這時存在一個問題，若調換C和B，也就是$$\vec{AB} × \vec{AC}$$此時法向量與之前方向截然相反，對于這種情況我們應該如何處理呢？在模型的制作程序中規定好頂點的順序，保證每個平面的法向量朝向模型外面
注：如何判斷兩個相同向量互換位置后叉乘的正負？對于左手坐標系來說,伸出左手，右手坐標系則伸出右手，除開大拇指，我們并攏其余四指，指向前一個向量的方向，然后四指向后一個向量的位置彎曲，，此時大拇指的朝向若是向上則是正，向下為負
Vec3f light_dir(0,0,-1); // 光源相對于物體的位置，光照的負方向
for (int i=0; i<model->nfaces(); i++) {
std::vector<int> face = model->face(i);
Vec2i screen_coords[3];
Vec3f world_coords[3];
for (int j=0; j<3; j++) {
Vec3f v = model->vert(face[j]);
screen_coords[j] = Vec2i((v.x+1.)*width/2., (v.y+1.)*height/2.);
world_coords[j] = v;
}
Vec3f n = (world_coords[2]-world_coords[0])^(world_coords[1]-world_coords[0]);
n.normalize();
float intensity = n*light_dir;
if (intensity>0) {
triangle(screen_coords[0], screen_coords[1], screen_coords[2], image, TGAColor(intensity*255, intensity*255, intensity*255, 255));
}
}
? 結果如上圖，是不是感覺有些違和感？沒錯，這個眼睛和嘴巴有些奇怪，原因是因為這兩個地方都有一層內腔，我們渲染的時候也將內腔給渲染出來了，覆寫了本來顯示的眼睛和嘴巴
zBuffer
? 之所以會出現內腔覆寫眼睛和嘴巴，是因為我們渲染的時候并未確立這兩個頂點的前后順序，從而導致的覆寫，因此我們需要想個辦法來區分前后順序
? 想想在我們生活中，我們畫畫如下圖，我們會先畫后面的山，再畫前面的草地和樹，那我們是不是可以將這種方法應用于此呢？答案是不行的，因為計算機無法分辨這些物體的前后關系，emm它只會按照頂點順序來繪制
? 轉換思路，既然每個按照上面的方法無法確定順序，那我們是否可以確立螢屏范圍內上每個像素位置上的點的深度值，根據這個深度值來確定我們面前能夠看到的，也就是說，這樣既能確立應該將哪個頂點繪制出來，又可以不關心繪制順序
? 那么這個深度值如何求得呢？我們只知道頂點的z坐標，不知道三角形內部的啊
? 這個時候就需要用到重心坐標求插值的方法了
? 那么什么是重心坐標（我們只考慮三角形）呢？如下圖，給定一個三角形ABC，該平面內任意一點都可以用三個頂點的線性組合進行表示:$$(x,y) = \alpha A + \beta B + \gamma C$$,其中$$α+β+γ = 1$$,我們將三個系數αβγ看作點A，B，C的權重，此時我們稱這個點(α,β,γ)就是三角形的重心，這種坐標系又稱重心坐標系，值得注意的是，當三個系數都為非負數時，這個點在三角形內部
利用面積來計算確定系數
利用坐標計算確定系數
在坐標系角度來求解，我們將重心坐標系中a點看作原點，$$\vec{ab}和\vec{ac}$$看作基向量，任意點p可以表示為$$p = a + \beta (b-a) + \gamma (c-a)$$，移項后可得$$p = (1-\beta - \gamma)a + \beta b + \gamma c$$,定義$$\alpha = 1 - \beta - \gamma$$,最終依舊可以得出$$ p = \alpha a + \beta b + \gamma c$$
看完這些，那么為什么重心坐標是三角形頂點屬性的平滑過渡呢？因為這個三系數時線性變化，那么它們每經過一個位置都是均勻變化的
注意！重心坐標插值，投影前后重心坐標可能會發生變化，所以需要在對應的階段計算重心坐標
? 那我們我們為什么需要插值呢？由于很多操作都是基于頂點完成，我們希望在三角形內完成平滑的過渡，插值的內容很多，如紋理坐標，顏色，法向量等等；用處很大，不僅在軟體光柵化，而且在如雷貫耳的光線追蹤中同樣會使用
? 補充一點，重心坐標可以求一個點是否在三角形內部，但我們可以用另一種方法來快速判定，我們事先需要知道一個三角形三個點的頂點坐標，以及要求的點的坐標，分別計算$$\vec{P0P1} × \vec{P0Q},\vec{P1P2} × \vec{P1Q}, \vec{P2P0} × \vec{P2Q}$$，若三個值同為正或同為負，則在三角形內部，否則在外部，其原理也就是重心坐標
? 那么接下來的實作就十分簡單了，
//判斷點是否在三角形內
bool isInsideTriangle( Vec3f* v, int x, int y )
{
Vec2f side1 = { v[1].x - v[0].x, v[1].y - v[0].y };
Vec2f side2 = { v[2].x - v[1].x, v[2].y - v[1].y };
Vec2f side3 = { v[0].x - v[2].x, v[0].y - v[2].y };
Vec2f v1 = { x - v[0].x, y - v[0].y };
Vec2f v2 = { x - v[1].x, y - v[1].y };
Vec2f v3 = { x - v[2].x, y - v[2].y };
float z1 = side1.x * v1.y - v1.x * side1.y;
float z2 = side2.x * v2.y - v2.x * side2.y;
float z3 = side3.x * v3.y - v3.x * side3.y;
if( ( z1 > 0 && z2 > 0 && z3 > 0) || ( z1 < 0 && z2 < 0 && z3 < 0 ) ) return true;
return false;
}
//計算重心坐標
Vec3f computeBarycentric2D(float x, float y, Vec3f* v)
{
float c1 = (x * (v[1].y - v[2].y) + (v[2].x - v[1].x) * y + v[1].x * v[2].y - v[2].x*v[1].y) / (v[0].x * (v[1].y - v[2].y) + (v[2].x - v[1].x) * v[0].y + v[1].x * v[2].y - v[2].x * v[1].y );
float c2 = (x * (v[2].y - v[0].y) + (v[0].x - v[2].x) * y + v[2].x * v[0].y - v[0].x*v[2].y) / (v[1].x * (v[2].y - v[0].y) + (v[0].x - v[2].x) * v[1].y + v[2].x * v[0].y - v[0].x * v[2].y );
float c3 = (x * (v[0].y - v[1].y) + (v[1].x - v[0].x) * y + v[0].x * v[1].y - v[1].x*v[0].y) / (v[2].x * (v[0].y - v[1].y) + (v[1].x - v[0].x) * v[2].y + v[0].x * v[1].y - v[1].x * v[0].y );
return Vec3f(c1, c2, c3);
}
//繪制三角形
void drawTriangle( Vec3f* v, TGAImage& image, TGAColor color )
{
float minX = std::min( v[0].x, std::min( v[1].x, v[2].x ) );
float maxX = std::max( v[0].x, std::max( v[1].x, v[2].x ) );
float minY = std::min( v[0].y, std::min( v[1].y, v[2].y ) );
float maxY = std::max( v[0].y, std::max( v[1].y, v[2].y ) );
for( int i = minX; i <= maxX; ++i )
{
for( int j = minY; j <= maxY; ++j )
{
if( isInsideTriangle( v, i, j ) == true )
{
//重心坐標插值求z值
auto bc_screen = computeBarycentric2D( i, j, v );
float tempZ = v[0].z * bc_screen.x / 1.0f + v[1].z * bc_screen.y / 1.0f + v[2].z * bc_screen.z / 1.0f;
//更新z值
if( tempZ > zBuffer[j][i] )
{
zBuffer[j][i] = tempZ;
image.set( i, j, color );
}
}
}
}
}
//
int main(int argc, char** argv)
{
//...
for( int i = 0; i < model->nfaces(); ++i )
{
//取頂點索引值
std::vector<int> face = model->face(i);
Vec3f screen_coords[3]; //螢屏坐標
Vec3f world_coords[3]; //世界坐標
for( int j = 0; j < 3; ++j )
{
//取當前索引值對應的頂點資訊
//這個頂點資訊就是這個當前這個頂點在世界空間下的坐標
world_coords[j] = model->vert( face[j] );
//將取到的頂點變換到螢屏坐標
//obj檔案中的頂點每個維度上取值范圍都在[-1,1]間,我們需要將其變換至螢屏坐標[0,0]到[width,height]這個范圍內
screen_coords[j] = { ( world_coords[j].x + 1 ) * width / 2 , ( world_coords[j].y + 1 ) * height / 2 , world_coords[j].z };
}
Vec3f n = (world_coords[2] - world_coords[0]) ^ ( world_coords[1] - world_coords[0]);
n.normalize();
float intensity = n * light_dir;
if( intensity > 0 ) drawTriangle( screen_coords, image, TGAColor( intensity * 255, intensity * 255, intensity * 255, 255 ) );
}
//...
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/528770.html
標籤：其他