本教程代码位于我的github，参考的英文教程讲解的比我好很多，推荐大家看一下。
前言
上次教程我们成功画出了直线，这次我们首先要尝试画出这样的三角形片：
然后，我们会加入简单的光照，重新处理上次教程的头部模型，得到这样的一张图片：
好了，开始本次教程吧！
开始
模仿上次画线段的接口，我们设计了如下画三角形的接口：
// p1, p2, p3是三角形的三个顶点，handler会返回三角形内每个点的坐标
void Interpolation(float2 p1, float2 p2, float2 p3, function<void(float2)> handler)
则我们绘制三角形的代码类似这样：
const TGAColor red = TGAColor(255, 0, 0, 255);
float2 t[3] = { float2(10, 70), float2(50, 160), float2(70, 80) }; // 三角形的三个顶点
TGAImage image(200, 200, TGAImage::RGB);
// 绘制三角形的接口，p点是三角形内的点
Interpolation(t[0], t[1], t[2], [&](float2 p) {
image.set(p.x, p.y, red);
});
image.flip_vertically();
image.write_tga_file("output/lesson2/triangle.tga");
接下来的一步是实现Interpolation了。我们看一下如下伪代码:
triangle(vec2 points[3]) {
vec2 bbox[2] = find_bounding_box(points);
for (each pixel in the bounding box) {
if (inside(points, pixel)) {
put_pixel(pixel);
}
}
}
这个代码的逻辑很简单，遍历三角形包围盒内的像素，如果这个像素在三角形内，就画出来。现在的问题就变成了如何判断一个点在三角形内了。以下是代码的实现：
// 点是否在三角形内
float3 barycentric(float2 p0, float2 p1, float2 p2, float2 P) {
float3 v1 = float3(p2.x - p0.x, p1.x - p0.x, p0.x - P.x);
float3 v2 = float3(p2.y - p0.y, p1.y - p0.y, p0.y - P.y);
float3 u = v1.cross(v2);
if (std::abs(u.z)<1) return float3(-1, 1, 1);
return float3(1.f - (u.x + u.y) / u.z, u.y / u.z, u.x / u.z);
}
void Interpolation(float2 p0, float2 p1, float2 p2, function<void(float2)> 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));
float2 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;
handler(float2(P.x, P.y));
}
}
}
下面拿出我们的测试代码测试一下：
const TGAColor red = TGAColor(255, 0, 0, 255);
const TGAColor white = TGAColor(255, 255, 255, 255);
const TGAColor green = TGAColor(0, 255, 0, 255);
float2 t0[3] = { float2(10, 70), float2(50, 160), float2(70, 80) };
float2 t1[3] = { float2(180, 50), float2(150, 1), float2(70, 180) };
float2 t2[3] = { float2(180, 150), float2(120, 160), float2(130, 180) };
TGAImage image(200, 200, TGAImage::RGB);
Interpolation(t0[0], t0[1], t0[2], [&](float2 p) {
image.set(p.x, p.y, red);
});
Interpolation(t1[0], t1[1], t1[2], [&](float2 p) {
image.set(p.x, p.y, white);
});
Interpolation(t2[0], t2[1], t2[2], [&](float2 p) {
image.set(p.x, p.y, green);
});
image.flip_vertically();
image.write_tga_file("output/lesson2/triangle.tga");
得到结果：
随机颜色模型
好了，下面我们尝试着给我们的头部模型增加一些颜色，代码如下：
const float width = 1000;
const float height = 1000;
Model model("resource/african_head/african_head.obj");
TGAImage image(width, height, TGAImage::RGB);
for (int i = 0; i<model.nfaces(); i++) {
std::vector<int> face = model.face(i);
float2 screen_coords[3];
for (int j = 0; j<3; j++) {
float3 v = model.vert(face[j]);
screen_coords[j] = float2((v.x + 1)*width / 2.0, (v.y + 1)*height / 2.0);
}
TGAColor randomColor(rand() % 255, rand() % 255, rand() % 255, 255);
Interpolation(screen_coords[0], screen_coords[1], screen_coords[2], [&](float2 p) {
image.set(p.x, p.y, randomColor);
});
}
image.flip_vertically();
image.write_tga_file("output/lesson2/randomColorModel.tga");
得到结果：
这个只是小试牛刀，毕竟一个随机颜色的头部模型没什么意义，我们下面尝试给这个模型增加一个最简单的光照效果。
有光照的模型
首先简单介绍一下光照。光照是我们看见这个世界的基础，没有光照，一切在我们的眼中都是黑色（例如夜晚）。因此，光照会影响我们游戏内模型最终显示的颜色，而这个影响的程度与光照和模型三角形面的夹角有关。当光照方向垂直于三角形面时，光照最强，当光照方向与三角形面逐渐平行时，光照逐渐减弱，当光照方向由三角形面背面射入时，没有光照，此时三角形面应该是黑色。大家可以参照一下两张图想一下这个关系：
光照较强
光照较弱
为了获取光照方向与三角形面的位置关系，我们需要光照的方向与三角形面法线的点积，当点积值越大，说明光照的方向与三角形面的法线的夹角越小，则光照强度越大，当点积值越小，则光照强度越小，当点积值小于0，证明光照在三角形面的背面，此时我们看不见三角形面，根据以上理论，我们得出下面的代码：
const float width = 1000;
const float height = 1000;
float3 lightDir(0, 0, -1); // 光照的方向，由屏幕外摄像屏幕里的
Model model("resource/african_head/african_head.obj");
TGAImage image(width, height, TGAImage::RGB);
for (int i = 0; i<model.nfaces(); i++) {
std::vector<int> face = model.face(i);
float2 screen_coords[3];
float3 world_coords[3];
for (int j = 0; j<3; j++) {
float3 v = model.vert(face[j]);
screen_coords[j] = float2((v.x + 1)*width / 2.0, (v.y + 1)*height / 2.0);
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);
// 光照大于0的时候我们才进行绘制，这样我们可以剔除背面冲着光线的三角形面
if (diffuse > 0)
{
// 光照强度对颜色的影响
TGAColor lightColor(diffuse * 255, diffuse * 255, diffuse * 255, 255);
Interpolation(screen_coords[0], screen_coords[1], screen_coords[2], [&](float2 p) {
image.set(p.x, p.y, lightColor);
});
}
}
image.flip_vertically();
image.write_tga_file("output/lesson2/lightModel.tga");
最终我们得到的效果图为
好了，本次教程就结束了。希望这次能稍微有些进步，欢迎读者在评论里指出不足。
预告一下下次教程，上面的光照模型图大家一定觉得有些诡异，没错，嘴巴和眼睛看起来太奇怪了，这是为什么呢？这是因为我们把本应该在后面的图像画在了前面。下次教程，我们会引入一个叫z-buffer的东西，通过z-buffer，我们可以把本该在后面的三角形剔除，得到一个有正确遮挡关系的模型：
那我们下次见吧！
网友评论