TinyRenderer 学习笔记01：点线面的绘制
关于TGA文件支持
系列课程不涉及TGA文件的处理，相关代码直接给出，可以在这里找到。
点的绘制
所谓“点”，其实就是位图上的一个像素。绘制点十分简单，只需要用image.set()将指定位置的像素设为想要的颜色即可：
c++
// 处理TGA文件
#include "tgaimage.h"
// 定义颜色常量
const TGAColor white = TGAColor(255, 255, 255, 255);
const TGAColor red = TGAColor(255, 0, 0, 255);
// 主函数
int main(int argc, char** argv) {
// 设定“画板”大小
TGAImage image(100, 100, TGAImage::RGB);
// 将 (52, 41) 位置的像素设为 red
image.set(52, 41, red);
// 原点在图像的左下角。
image.flip_vertically();
// 设置输出文件名
image.write_tga_file("output.tga");
return 0;
}输出结果：
也许会看不清，因为红点只有一个像素大小。
线的绘制（Bresenham画线算法）
连点成线，这是很简单的道理。所以一个十分简单的画线算法实现就是遍历两点之间的所有像素，并将其改变为指定的颜色。
直观的实现
一个最简单的实现：
c++
// 画线算法
void line(int x0, int y0, int x1, int y1, TGAImage &image, TGAColor color)
{
// 遍历 t为步长累加
for (float t = 0.; t < 1.; t += .01)
{
// x位置的累加
int x = x0 + (x1 - x0) * t;
// y位置的累加
int y = y0 + (y1 - y0) * t;
// 将 (x, y) 位置的像素设为 color
image.set(x, y, color);
}
}
// ----main----
// 绘制线段，从 (13, 20) 到 (80, 40)，绘制在image上，颜色为white
line(13, 20, 80, 40, image, white);绘制结果：
存在的问题
该实现很直观，符合人类的直觉。但正如所有更易阅读的代码都会存在效率问题一样，上面这串代码同样存在效率过低的问题。
此外，除了效率问题，步进
更优的解决方案
实际上很容易发现一点：我们只是在绘制像素而已。完成这一工作可以不选择遍历一个额外的变量t，而是选择遍历x或y。
在遍历过程中，有绘制到的位置（比例）：
这里以x为遍历对象，随化简出
代码实现如下：
c++
// 画线算法
void line(int x0, int y0, int x1, int y1, TGAImage &image, TGAColor color)
{
// 遍历x
for (int x = x0; x <= x1; x++)
{
// 画到的位置（比例）t
float t = (x - x0) / (float)(x1 - x0);
// 换算出y的位置
int y = y0 * (1. - t) + y1 * t;
// 将 (x, y) 位置的像素设为 color
image.set(x, y, color);
}
}我们用这个函数绘制三条直线：
c++
line(13, 20, 80, 40, image, white);
line(20, 13, 40, 80, image, red);
line(80, 40, 13, 20, image, red);结果：
可以看到，它完美的绘制了我们刚才的那条白色线段。但是第二条红色线段却“漏洞百出”，第三条线段则根本没有绘制出来。
解决第二条线的问题
第二条线的问题源自我们使用x作为遍历的变量，因此当线的高度大于宽度（即：与水平的夹角大于45°）时，就会出现“漏洞”。
要解决这个问题，我们只需要简单的转置图像（交换x与y）即可。（注意：绘制完成后记得转置回来）
解决第三条线的问题
第三条线的问题源自我们的代码是非对称的，无法处理从右向左的绘制，因此根本不会被绘制出来。
要解决这个问题，我们只需要简单的对所有
修复后的代码实现
c++
// 画线算法
void line(int x0, int y0, int x1, int y1, TGAImage &image, TGAColor color)
{
// 是否转置（记得转回去）
bool steep = false;
// 如果图像“陡峭”，对图像进行转置
if (std::abs(x0 - x1) < std::abs(y0 - y1))
{
std::swap(x0, y0);
std::swap(x1, y1);
steep = true;
}
// 当 x0 > x1，对二者进行交换
if (x0 > x1)
{
std::swap(x0, x1);
std::swap(y0, y1);
}
// 一样的遍历算法，不多赘述
for (int x = x0; x <= x1; x++)
{
float t = (x - x0) / (float)(x1 - x0);
int y = y0 * (1. - t) + y1 * t;
if (steep)
{
// 如果转置了，记得转置回来（其实就是x和y反着set）
image.set(y, x, color);
}
else
{
image.set(x, y, color);
}
}
}结果：
现在我们完美的完成了三条线的绘制。
代码的效率问题
正如我上面就说过的：所有更易阅读的代码都会存在效率问题。我们现在拥有的代码也一样，它虽然十分的直观，但是效率问题也依旧存在。
考虑到对代码的计时存在平台差异，我这里不做复现。对比详见：Lesson 1: Bresenham’s Line Drawing Algorithm · ssloy/tinyrenderer Wiki (github.com)
关于代码的优化实际上是一个很危险的事情，必须先搞清楚代码所在的平台，以及是针对GPU还是CPU的优化。
我们必须分析代码，找到最耗费资源的操作。
优化代码
面对上面修复后的代码，我们不难发现在for循环中，类似：
c++
x1-x0;
y1-y0;这样的代码出现了多次，这徒增了
具体实现：
c++
// 画线算法
void line(int x0, int y0, int x1, int y1, TGAImage &image, TGAColor color)
{
// 是否转置（记得转回去）
bool steep = false;
// 如果图像“陡峭”，对图像进行转置
if (std::abs(x0 - x1) < std::abs(y0 - y1))
{
std::swap(x0, y0);
std::swap(x1, y1);
steep = true;
}
// 当 x0 > x1，对二者进行交换
if (x0 > x1)
{
std::swap(x0, x1);
std::swap(y0, y1);
}
// 从循环中取出。注意这里用的是int类型，然后通过一个derror和error来实现浮点数。
int dx = x1 - x0;
int dy = y1 - y0;
float derror = std::abs(dy / float(dx));
float error = 0;
int y = y0;
// 一样的遍历算法，不多赘述
for (int x = x0; x <= x1; x++)
{
if (steep)
{
// 如果转置了，记得转置回来（其实就是x和y反着set）
image.set(y, x, color);
}
else
{
image.set(x, y, color);
}
error += derror;
if (error > .5)
{
y += (y1 > y0 ? 1 : -1);
error -= 1.;
}
}
}解决了不必要的循环内运算后，我们再次分析代码。很容易提出另一个问题：为什么我们需要float。
这里的error的唯一作用就是与循环体内的.5作比较。我们可以通过另一种方式来摆脱float，即error2，我们设定它等于error * dx * 2：
c++
void line(int x0, int y0, int x1, int y1, TGAImage &image, TGAColor color) {
bool steep = false;
if (std::abs(x0-x1)<std::abs(y0-y1)) {
std::swap(x0, y0);
std::swap(x1, y1);
steep = true;
}
if (x0>x1) {
std::swap(x0, x1);
std::swap(y0, y1);
}
int dx = x1-x0;
int dy = y1-y0;
int derror2 = std::abs(dy)*2;
int error2 = 0;
int y = y0;
for (int x=x0; x<=x1; x++) {
if (steep) {
image.set(y, x, color);
} else {
image.set(x, y, color);
}
error2 += derror2;
if (error2 > dx) {
y += (y1>y0?1:-1);
error2 -= dx*2;
}
}
}这样我们就完成了代码的优化，执行时间从2.95秒减少到了0.64秒（因平台性能而异），效率提高了4~5倍。
优化永无止境，但同时也是危险的。这里还可以参考：Simple speed up of Lesson 1 · Issue #28 · ssloy/tinyrenderer (github.com)
线框渲染
OBJ格式
这里不对OBJ格式进行深度解析，只说我们暂时用得到的。
我们的渲染器目前只需要从文件中读取顶点坐标以及面：
v 0.608654 -0.568839 -0.416318
f 1193/1240/1193 1180/1227/1180 1179/1226/1179有关面的信息，我们这里只对每个空格后的第一个数据感兴趣，它是顶点的编号。上面这一行意味着1193、1180和1179三个顶点构成一个三角形。
需要注意的是，OBJ格式索引从1开始，也就是说我们在C++中需要查找的是1192、1179和1178三个顶点。
一个简单的线框渲染器
完整代码：
c++
#include <vector>
#include <cmath>
#include "tgaimage.h"
#include "model.h"
#include "geometry.h"
// 定义颜色常量
const TGAColor white = TGAColor(255, 255, 255, 255);
const TGAColor red = TGAColor(255, 0, 0, 255);
// 设定模型
Model *model = NULL;
// 设定宽高
const int width = 800;
const int height = 800;
// 画线算法
void line(int x0, int y0, int x1, int y1, TGAImage &image, TGAColor color)
{
// 是否转置（记得转回去）
bool steep = false;
// 如果图像“陡峭”，对图像进行转置
if (std::abs(x0 - x1) < std::abs(y0 - y1))
{
std::swap(x0, y0);
std::swap(x1, y1);
steep = true;
}
// 当 x0 > x1，对二者进行交换
if (x0 > x1)
{
std::swap(x0, x1);
std::swap(y0, y1);
}
// 从循环中取出。注意这里用的是int类型，然后通过一个derror和error来实现浮点数。
int dx = x1 - x0;
int dy = y1 - y0;
int derror2 = std::abs(dy) * 2;
int error2 = 0;
int y = y0;
// 一样的遍历算法，不多赘述
for (int x = x0; x <= x1; x++)
{
if (steep)
{
// 如果转置了，记得转置回来（其实就是x和y反着set）
image.set(y, x, color);
}
else
{
image.set(x, y, color);
}
error2 += derror2;
if (error2 > dx)
{
y += (y1 > y0 ? 1 : -1);
error2 -= dx * 2;
}
}
}
// 主函数
int main(int argc, char **argv)
{
// 导入模型
if (2==argc) {
model = new Model(argv[1]);
} else {
model = new Model("obj/bun_zipper_res4.obj");
}
// 设定“画板”大小
TGAImage image(width, height, TGAImage::RGB);
// 绘制线框
for (int i = 0; i < model->nfaces(); i++)
{
std::vector<int> face = model->face(i);
for (int j = 0; j < 3; j++)
{
Vec3f v0 = model->vert(face[j]);
Vec3f v1 = model->vert(face[(j + 1) % 3]);
int x0 = (v0.x + 1.) * width / 2.;
int y0 = (v0.y + 1.) * height / 2.;
int x1 = (v1.x + 1.) * width / 2.;
int y1 = (v1.y + 1.) * height / 2.;
line(x0, y0, x1, y1, image, white);
}
}
// 原点在图像的左下角。
image.flip_vertically();
// 设置输出文件名
image.write_tga_file("output.tga");
return 0;
}结果：
面的绘制（填充三角形）
三角形绘制
三角形是模型的基本单位，我们可以很简单的用之前创建的画线函数line()来完成这一点，在此之前，我们先对line()进行一点改造：
c++
// 画线算法
void line(Vec2i p0, Vec2i p1, TGAImage &image, TGAColor color)
{
// 是否转置（记得转回去）
bool steep = false;
// 如果图像“陡峭”，对图像进行转置
if (std::abs(p0.x - p1.x) < std::abs(p0.y - p1.y))
{
std::swap(p0.x, p0.y);
std::swap(p1.x, p1.y);
steep = true;
}
// 当 x0 > x1，对二者进行交换
if (p0.x > p1.x)
{
std::swap(p0, p1);
}
// 从循环中取出。注意这里用的是int类型，然后通过一个derror和error来实现浮点数。
int dx = p1.x - p0.x;
int dy = p1.y - p0.y;
int derror2 = std::abs(dy) * 2;
int error2 = 0;
int y = p0.y;
// 一样的遍历算法，不多赘述
for (int x = p0.x; x <= p1.x; x++)
{
if (steep)
{
// 如果转置了，记得转置回来（其实就是x和y反着set）
image.set(y, x, color);
}
else
{
image.set(x, y, color);
}
error2 += derror2;
if (error2 > dx)
{
y += (p1.y > p0.y ? 1 : -1);
error2 -= dx * 2;
}
}
}然后就可以实现我们的三角形绘制算法：
c++
// 三角形绘制算法
void triangle(Vec2i t0, Vec2i t1, Vec2i t2, TGAImage &image, TGAColor color)
{
// 连接三条线
line(t0, t1, image, color);
line(t1, t2, image, color);
line(t2, t0, image, color);
}在主函数内调用：
c++
Vec2i t0[3] = {Vec2i(10, 70), Vec2i(50, 160), Vec2i(70, 80)};
Vec2i t1[3] = {Vec2i(180, 50), Vec2i(150, 1), Vec2i(70, 180)};
Vec2i t2[3] = {Vec2i(180, 150), Vec2i(120, 160), Vec2i(130, 180)};
triangle(t0[0], t0[1], t0[2], image, red);
triangle(t1[0], t1[1], t1[2], image, white);
triangle(t2[0], t2[1], t2[2], image, green);结果：
三角形填充
扫线算法
我们现在已经成功绘制了三角形，接下来就是来填充它。
类比我们在线的绘制中做的那样，面的绘制最容易想到的方案就是老派的“扫线”算法。
同时我们也可以类比一些要求，比如：
- 算法必须是迅速的，我们对效率要求很高。
- 算法必须是对称的，不能依赖输入的顶点顺序。
- 如果两个三角形有公共顶点，那么他们之间不应该有缝隙。
- ……
这里面最简单的就是关于对称性的处理，只需要对三个顶点进行排序即可：
c++
// 三角形绘制算法
void triangle(Vec2i t0, Vec2i t1, Vec2i t2, TGAImage &image, TGAColor color)
{
// 将顶点t0、t1、t2从低到高排序
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);
// 为了区分边界，这里写定了颜色
line(t0, t1, image, green);
line(t1, t2, image, green);
line(t2, t0, image, red);
}结果：
这里我们区分了一下边界A和边界B，即：
- 边界A（红色）：
t2 -> t0 - 边界B（绿色）：
t0 -> t1 -> t2
不幸的是，边界B由两部分构成，这会导致很多麻烦。
不过考虑到我们的扫线算法是水平工作的，因此我们可以在折点t1处将三角形水平分割：
c++
// 三角形绘制算法
void triangle(Vec2i t0, Vec2i t1, Vec2i t2, TGAImage &image, TGAColor color)
{
// 将顶点t0、t1、t2从低到高排序
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;
// 遍历三角形下半部分
for (int y = t0.y; y <= t1.y; y++)
{
// 下半部分的高度
int segment_height = t1.y - t0.y + 1;
// alpha是当前位置和总高度之比
float alpha = (float)(y - t0.y) / total_height;
// beta是当前高度和下半部分高度之比 //小心除以0
float beta = (float)(y - t0.y) / segment_height;
// 计算边界A的x坐标
Vec2i A = t0 + (t2 - t0) * alpha;
// 计算边界B的x坐标
Vec2i B = t0 + (t1 - t0) * beta;
image.set(A.x, y, red);
image.set(B.x, y, green);
}
}结果：
有些线有漏洞，不过我们并不在乎。因为现在是面的绘制，只要面不出现问题即可。
然后用一个遍历水平扫线填充：
c++
// 三角形绘制算法
void triangle(Vec2i t0, Vec2i t1, Vec2i t2, TGAImage &image, TGAColor color)
{
// 将顶点t0、t1、t2从低到高排序
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;
// 遍历三角形下半部分
for (int y = t0.y; y <= t1.y; y++)
{
// 下半部分的高度
int segment_height = t1.y - t0.y + 1;
// alpha是当前位置和总高度之比
float alpha = (float)(y - t0.y) / total_height;
// beta是当前高度和下半部分高度之比 //小心除以0
float beta = (float)(y - t0.y) / segment_height;
// 计算边界A的x坐标
Vec2i A = t0 + (t2 - t0) * alpha;
// 计算边界B的x坐标
Vec2i B = t0 + (t1 - t0) * beta;
image.set(A.x, y, red);
image.set(B.x, y, green);
if (A.x>B.x) std::swap(A, B);
for (int j=A.x; j<=B.x; j++) {
// 注意，由于int casts t0.y+i != A.y
image.set(j, y, color);
}
}
}结果：
上半部分同理：
c++
// 三角形绘制算法
void triangle(Vec2i t0, Vec2i t1, Vec2i t2, TGAImage &image, TGAColor color)
{
// 将顶点t0、t1、t2从低到高排序
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;
// 遍历三角形下半部分
for (int y = t0.y; y <= t1.y; y++)
{
// 下半部分的高度
int segment_height = t1.y - t0.y + 1;
// alpha是当前位置和总高度之比
float alpha = (float)(y - t0.y) / total_height;
// beta是当前高度和下半部分高度之比 //小心除以0
float beta = (float)(y - t0.y) / segment_height;
// 计算边界A的x坐标
Vec2i A = t0 + (t2 - t0) * alpha;
// 计算边界B的x坐标
Vec2i B = t0 + (t1 - t0) * beta;
image.set(A.x, y, red);
image.set(B.x, y, green);
if (A.x > B.x)
std::swap(A, B);
for (int j = A.x; j <= B.x; j++)
{
// 注意，由于int casts t0.y+i != A.y
image.set(j, y, color);
}
}
// 遍历三角形上半部分
for (int y = t1.y; y <= t2.y; y++)
{
// 上半部分的高度
int segment_height = t2.y - t1.y + 1;
// alpha是当前位置和总高度之比
float alpha = (float)(y - t0.y) / total_height;
// beta是当前高度和上半部分高度之比 //小心除以0
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);
}
}
}结果：
代码优化
因为几乎相同的代码出现两次，徒增了计算量。为了效率，我们将其合二为一：
c++
// 三角形绘制算法
void triangle(Vec2i t0, Vec2i t1, Vec2i t2, TGAImage &image, TGAColor color)
{
// 将顶点t0、t1、t2从低到高排序
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;
// 遍历整个三角形
for (int i = 0; i < total_height; i++)
{
// 确定现在是上下哪部分
bool second_half = i > t1.y - t0.y || t1.y == t0.y;
// 不同的部分用不同的公式计算局部高度
int segment_height = second_half ? t2.y - t1.y : t1.y - t0.y;
float alpha = (float)i / total_height;
//小心除以0
float beta = (float)(i - (second_half ? t1.y - t0.y : 0)) / segment_height;
Vec2i A = t0 + (t2 - t0) * alpha;
Vec2i B = second_half ? t1 + (t2 - t1) * beta : t0 + (t1 - t0) * beta;
if (A.x > B.x)
std::swap(A, B);
for (int j = A.x; j <= B.x; j++)
{
// 注意，由于int casts t0.y+i != A.y
image.set(j, t0.y + i, color);
}
}
}结果：
重心坐标算法
扫线算法是为单线程CPU设计的老派算法，其性能受到了自身理论设计的严重影响。三角形重心坐标算法则更加“现代化”。
伪代码：
c++
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);
}
}
}这看起来很简单，找到边界，并判断点是否属于这个区域。
重心坐标是什么？
点
或者换句话说：
即：
也就是：
这个公式可以列出一个简单的向量方程：
计算机图形学都是矩阵，所以为什么不用矩阵表示呢：
这意味着我们正在寻找一个与
寻找平面上两条直线的交点，计算一个叉积就够了。
代码实现：
c++
// 重心坐标
Vec3f barycentric(Vec2i *pts, Vec2i P)
{
// 计算叉积
Vec3f u = cross(Vec3f(pts[2][0] - pts[0][0], pts[1][0] - pts[0][0], pts[0][0] - P[0]), Vec3f(pts[2][1] - pts[0][1], pts[1][1] - pts[0][1], pts[0][1] - P[1]));
// `pts`和`P`有整数值作为坐标，所以`abs(u[2])`<1意味着`u[2]`是0，这意味着三角形是退化的，在这种情况下，返回负坐标的东西。
if (std::abs(u.z) < 1)
return Vec3f(-1, 1, 1);
// 返回重心坐标
return Vec3f(1.f - (u.x + u.y) / u.z, u.y / u.z, u.x / u.z);
}
// 三角形光栅化（重心坐标）
void triangle(Vec2i *pts, TGAImage &image, TGAColor color)
{
Vec2i bboxmin(image.get_width() - 1, image.get_height() - 1);
Vec2i bboxmax(0, 0);
Vec2i clamp(image.get_width() - 1, image.get_height() - 1);
// 迭代三角形，寻找最小/最大坐标
for (int i = 0; i < 3; i++)
{
bboxmin.x = std::max(0, std::min(bboxmin.x, pts[i].x));
bboxmin.y = std::max(0, std::min(bboxmin.y, pts[i].y));
bboxmax.x = std::min(clamp.x, std::max(bboxmax.x, pts[i].x));
bboxmax.y = std::min(clamp.y, std::max(bboxmax.y, pts[i].y));
}
Vec2i P;
// 遍历，找出三角形内的点。
// 遍历x
for (P.x = bboxmin.x; P.x <= bboxmax.x; P.x++)
{
// 遍历y
for (P.y = bboxmin.y; P.y <= bboxmax.y; P.y++)
{
// 重心坐标
Vec3f bc_screen = barycentric(pts, P);
// 是否在边界内
if (bc_screen.x < 0 || bc_screen.y < 0 || bc_screen.z < 0)
continue;
// 绘制像素
image.set(P.x, P.y, color);
}
}
}
// 主函数
int main(int argc, char **argv)
{
TGAImage frame(200, 200, TGAImage::RGB);
Vec2i pts[3] = {Vec2i(10, 10), Vec2i(100, 30), Vec2i(190, 160)};
triangle(pts, frame, red);
// 原点在图像的左下角
frame.flip_vertically();
frame.write_tga_file("framebuffer.tga");
return 0;
}结果：
关于代码的细节，注释中都有写。
大概概括一下就是：
先计算出给定三角形重心
的坐标； 然后通过迭代三角形顶点计算了一个边框，由两个点描述：左下和右上
最后判断点是否在边框内，并选择性的绘制像素。
除此之外，代码还对屏幕边框外的内容进行了裁剪，这样可以更加节省CPU时间。
平面着色渲染
使用我们的三角形填充算法来进行平面着色：
c++
// 绘制
// 遍历所有面
for (int i = 0; i < model->nfaces(); i++)
{
std::vector<int> face = model->face(i);
Vec2i screen_coords[3];
// 遍历，将所有的顶点储存在screen_coords中
for (int j = 0; j < 3; j++)
{
Vec3f world_coords = model->vert(face[j]);
screen_coords[j] = Vec2i((world_coords.x + 1.) * width / 2., (world_coords.y + 1.) * height / 2.);
}
// 随机颜色绘制填充三角形
triangle(screen_coords[0], screen_coords[1], screen_coords[2], image, TGAColor(rand() % 255, rand() % 255, rand() % 255, 255));
}结果：
然而，这小丑般的随机颜色让我们的斯坦福兔子看起来就像从哥谭走出来的小丑一样。
我们要为我们的渲染器添加光照效果，这其实很容易理解，参考现实中：
可以得出一个不一定完全正确，但确实符合规律的结论：光照强度等于光矢量和给定三角形的法线的标量积。
三角形的法线可以简单地计算为其两条边的叉乘。
顺便说一句，在本课程中，我们将对颜色进行线性计算。但是（128，128，128）颜色的亮度不是（255，255，255）的一半。我们将忽略伽马校正，并容忍颜色亮度的不正确。
c++
// 光照方向
Vec3f light_dir(0, 0, -1);
// ...
// ——main——
// 绘制
// 遍历所有面
for (int i = 0; i < model->nfaces(); i++)
{
std::vector<int> face = model->face(i);
Vec2i screen_coords[3];
Vec3f world_coords[3];
// 遍历，将所有的顶点储存在screen_coords中，同时将三角形边的向量储存在world_coords中
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;
// 如果光线强度大于0
if (intensity > 0)
{
// 依据光线强度，绘制填充三角形
triangle(screen_coords[0], screen_coords[1], screen_coords[2], image, TGAColor(intensity * 255, intensity * 255, intensity * 255, 255));
}
}结果：
用面数更高的斯坦福兔子来查看效果：
效果十分不错。