本教程代碼位于我的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é)果: