记录：tinyrenderer---1.2 Rasterizing the boundary
光栅化三角形
Scanline rendering(扫描线渲染)，一个老式的算法
- 按y轴坐标进行排序，我这里采取降序，ay > by > cy
- 同时光栅化三角形的左右两边
- 绘制水平线段，连接左右边界点
不理解的可以看这里
这个很好理解，从最高的顶点出发，同步绘制此顶点连接的两条边，在每条边渲染的y值都发生一次变化，此时y值相同，绘制其连线即可。这是一张之前失败的图片，应该有一些辅助效果。
通过排序可以做到：在逻辑上ay就是最大的，这样可以减少大量没有必要的工作。
这里记录一下我最初的尝试
友情提示：该代码有些伤眼，请谨慎观看：
先是对y坐标进行了降序,ay > by > cy;
//y坐标降序
if(ay < by) { std::swap(ax, bx); std::swap(ay, by); }
if(ay < cy) { std::swap(ax, cx); std::swap(ay, cy); }
if(by < cy) { std::swap(bx, cx); std::swap(by, cy); }
之后我采取了先绘制三条边的策略，（现在看来是选了个不得了的策略）
在之前我们绘制一条直线时，需要求得两点steep，所以这次绘制三条直线，我计算了三次
没错，我计算了三个steep，这使我不得不考虑swap将会导致的混乱：
我选择了简单暴力的方法，copy一份。
//副本
int ax_copy = ax;
int ay_copy = ay;
int bx_copy = bx;
int by_copy = by;
int cx_copy = cx;
int cy_copy = cy;
//直线,消gap
//ab
bool steep_ab_gap = std::abs(bx - ax) < std::abs(by - ay);
if(steep_ab_gap){
std::swap(ax,ay);
std::swap(bx,by);
}
//ac
bool steep_ac_gap = std::abs(cx - ax_copy) < std::abs(cy - ay_copy);
if(steep_ac_gap){
std::swap(ax_copy,ay_copy);
std::swap(cx,cy);
}
//bc
bool steep_bc_gap = std::abs(cx_copy - bx_copy) < std::abs(cy_copy - by_copy);
if(steep_bc_gap){
std::swap(bx_copy,by_copy);
std::swap(cx_copy,cy_copy);
}
在消除缺口后，需要使光栅化从左至右进行，这样可以让我少写一些重复的代码。
不过这次需要存储大小比较的结果，而不直接交换，我不想打破y的排序，先以实现为先
//x大小确定
//ab
bool size_x1 = (bx < ax);
//ac
bool size_x2 = (cx < ax_copy);
//bc
bool size_x3 = (cx_copy < bx_copy);
好了，现在我可以以更水平的方式从左至右光栅化三条边，这也导致了一个问题，我无法统一每条边是按y或是x进行光栅化。
嘿，我又有了一个简单暴力的方法，我把每一次y+1或者x+1的第一个像素坐标保存，
在同步光栅化边和填充的问题中，我选择了将他们分开进行。
我需要三个std::vector<Vector3>来存储每条边需要的像素点
//pixel坐标
std::vector<Vector3> a_b;
std::vector<Vector3> a_c;
std::vector<Vector3> b_c;
接下来就是line（）函数的改版,c_line(),引入了参数std::vector<Vector3>& tri_pixl
//创建了Vector3 temp，赋给引用的std::vector<Vector3>& tri_pixl
void c_line(int ax,int ay,int cx,int cy,bool size_x,bool steep_gap,TGAImage &framebuffer,TGAColor color,std::vector& tri_pixl){
int ierror = 0;
int y = ay;
Vector3 temp;
if(size_x){
for(int x = ax; x > cx; x --){
//渲染，存储
if(steep_gap){
framebuffer.set(y,x,color);
//取点
ierror += 2 * std::abs(cy - ay);
if(ierror > (ax - cx)){
y += cy > ay ? 1 : -1;
ierror -= 2 * (ax - cx);
}
//存储
temp.x = y;
temp.y = x - 1;
tri_pixl.push_back(temp);
}
else{
framebuffer.set(x,y,color);
ierror += 2 * std::abs(cy - ay);
if(ierror > (ax - cx)){
y += cy > ay ? 1 : -1;
ierror -= 2 * (ax - cx);
temp.x = x - 1;
temp.y = y;
tri_pixl.push_back(temp);
}
}
}
}
else{
for(int x = ax; x < cx; x ++){
if(steep_gap){
framebuffer.set(y,x,color);
ierror += 2 * std::abs(cy - ay);
if(ierror > (cx - ax)){
y += cy > ay ? 1 : -1;
ierror -= 2 * (cx - ax);
}
temp.x = y;
temp.y = x + 1;
tri_pixl.push_back(temp);
}
else{
framebuffer.set(x,y,color);
ierror += 2 * std::abs(cy - ay);
if(ierror > (cx - ax)){
y += cy > ay ? 1 : -1;
ierror -= 2 * (cx - ax);
temp.x = x + 1;
temp.y = y;
tri_pixl.push_back(temp);
}
}
}
}
}
现在我有了每条边每行每列第一个光栅化的像素点的坐标，只需要按行或按列填充即可
//填充
void straight_line(int ax,int ay,int bx,int by,TGAImage &framebuffer,TGAColor color){
if(ax > bx){ std::swap( ax, bx );}
for(int x = ax; x <= bx; x++){
framebuffer.set(x,ay,color);
}
}
遍历
size_t i = 0;
size_t i_bc = 0;
for(;i < a_b.size(); i ++){ straight_line(a_b[i].x, a_b[i].y, a_c[i].x, a_c[i].y, framebuffer, color); }
for(i_bc = 0;i_bc < b_c.size(); i ++, i_bc ++){ straight_line(b_c[i_bc].x, b_c[i_bc].y, a_c[i].x, a_c[i].y, framebuffer, color); }
进行扫描线渲染，作者写了新的triangle函数
首先进行了冒泡排序，采用的升序,不过我用的降序。
//verts.y排序，冒泡
if(ay < by) { std::swap(ax, bx); std::swap(ay, by); }
if(ay < cy) { std::swap(ax, cx); std::swap(ay, cy); }
if(by < cy) { std::swap(bx, cx); std::swap(by, cy); }
扫描线渲染，我们需要两边的像素点作为开始和结束，b点将成为我们的分界点，用来区分ab，bc直线。
在b点水平切割，绘制它的上半部分
我们这次不选择去更换x或y轴，忽视间隙的产生，计算左右边界，遍历填充
这里有我的理解
仔细想一下，假设我们每次y --，那么可能会遇到y - 1，而x + n的情况，导致y和y-1在水平上有n - 1个间隙，之前绘制直线我们会等到在y填补完这些间隙后，才会跳到y - 1，进行第x + n的绘制。 现在我们进行填充，会直接从左边界绘制到有边界，不需要去考虑到下一行会有几个间隙了，因为都被填充了。
int total_height = ay - cy;
if(ay != by){
int segment_height = ay - by;
for(int y = ay; y >= by; y --){
int x_l = ax + ((ax - bx) * (y - ay) / segment_height);
int x_r = ax + ((ax - cx) * (y - ay) / total_height);
for(int x = std::min(x_l, x_r); x <= std::max(x_l, x_r); x ++){ framebuffer.set(x, y, color);}
}
}
之后是下半部分
if(by != cy){
for(int y = by; y >= cy; y--){
int segment_height = by - cy;
int x_l = bx + ((bx - cx) * (y - by) / segment_height);
int x_r = ax + ((ax - cx) * (y - ay) / total_height);
for(int x = std::min(x_l, x_r); x <= std::max(x_l, x_r); x ++){ framebuffer.set(x, y, color);}
}
}
扫描线光栅化是老式的方案，现在我们可以采取现代一些的光栅化方法
- 先找一个包围盒，有三角形的坐标很好计算，选取最小和最大的坐标即可
//计算包围盒 int bbminx = std::min(std::min(ax,bx),cx); int bbminy = std::min(std::min(ay,by),cy); int bbmaxx = std::max(std::max(ax,bx),cx); int bbmaxy = std::max(std::max(ay,by),cy); - 之后计算包围盒内点在不在三角形内，有很多算法，这里采取计算重心坐标。
这里通过计算PAB,PBC,PCA占ABC面积的权重来获取重心坐标，这里暂时不进一步介绍。#pragma omp parallel for for(int x = bbminx; x <= bbmaxx; x++){ for(int y = bbminy; y <= bbmaxy; y++){ //重心坐标 double alpha = signed_triangle_area(x,y,bx,by,cx,cy) / total_area; double beta = signed_triangle_area(x,y,ax,ay,bx,by) / total_area; double gamma = signed_triangle_area(x,y,cx,cy,ax,ay) / total_area; if(alpha < 0 || beta < 0 || gamma < 0) continue; framebuffer.set(x,y,color); } } - 如果需要考虑正反面的情况，要进行一次裁剪
注：这次裁剪将会删除所有背向三角形double total_area = signed_triangle_area(ax,ay,bx,by,cx,cy); if (total_area < 1) return;//删除覆盖少于一pixel的三角形
浙公网安备 33010602011771号