三角形光栅化时遇到的坑

前一段时间打算写一个完整的游戏, 客户采用Unity3D引擎, 服务端则采用我自己的Silly网络框架

然而,最终这个项目烂尾了。烂尾的原因有很多,比如缺少资源,在不断寻找资源过程中使自己开发的热情消失殆尽等。但更为重要的是,我发现在使用Unity3D过程中,除了拼接UI逻辑时,没有碰到太大困难外。在实现一些3D效果时竟处处掣肘,甚至连最简单的贴花系统都实现不了。

而此时我的图形学背景是,《3D数学基础:图形与游戏开发》,《DirectX9.9 3D游戏开发编程基础》,《Unity Shader入门精要》和其他一些Unity操作手册。

这使我意识到,我的图形学知识结构出现了根本性问题。之后偶然的一个机会,我在网上接触到了“光栅化软件渲染器”的概念。深挖之下,发现这正是我目前所缺少的知识。

《3D数学基础:图形与游戏开发》介绍了“物体坐标系”,“世界坐标系”,“摄相机坐标系”等各种坐标系,以及如何实现一个数学引擎来实现各坐标系之间的转换。

《DirectX9.9 3D游戏开发编程基础》则介绍的是我们如何使用DirectX提供的各种API来使用相机,光照等各种抽象好的模型。

但是,这两本书之间存在着明显的断层,很难明白在调用DirectX提供的API之后,底层渲染是如何工作。例如,一个物体到底是如何一步一步画到屏幕上的,纹理是如何映射到3D物体上的,Shader到底是如何工作等。虽然这几本书,每一本都会讲一遍渲染流水线,但是这些细节很难被提到。

从零实现一个“光栅化软件渲染器”可以完美的填充这个空白,哪是一个效率很低的”软件渲染器”,这对理解3D渲染是如何工作起着至关重要的作用。幸运的是刚好有一本《3D游戏编程大师技巧》讲的就是这些内容(虽然我不是很认可他的章节安排:D)。


按照《3D游戏编程大师技巧》实现自己的软件渲染器的过程中,数学引擎,坐标系转换,甚至连光照都没碰到什么大问题,在最后一步将屏幕坐标系下的2D三角形光栅化时,踩了一个3连坑,导致一下耽搁了半个月才终于在昨天找到问题所在。

在光栅化的过程中,为了防止重复绘制相素,一般会采用左上(top-left)填充规则。例如绘制一个对角定点为(0, 0), (6,6)的正方形时,会避免为第6行和第6列绘制相素。大概实现伪码如下:

//void draw_pixel(int x, int y, int color);
int x, y;
for (y = 0; y < 6; y++) {
        for (x = 0; x < 6; x++) {
                draw_pixel(x, y, color);
        }
        ... do something ...
}

然而,看实简单的代码背后,却隐藏着各种坑。

在经过渲染流水线计算之后的图元(一般为三角形)坐标一般为float类型,而且大部分情况下都会有小数部分,比如(94.65, 331.64)。这时就需要制定一个规则,是向上取整(即将坐标变成(95,332))或者向下取整(即将坐标变成(94,331))。

为了省事,我的第一版直接采用了相下取整进行坐标映射,渲染伪码如下(这里仅仅将x,y的类型从int变成了float,因为向draw_pixel传参时,将float转成int采用的就是去1法):

//这里仅假设光栅化一个平顶三角形【(x0,y0), (x1, y1), (x2, y2)】并且(x0 < x1 && y0 == y1 && y0 < y2)。
//void draw_pixel(int x, int y, int color);
void draw(float x0, float y0, float x1, float y1, float x2, float y2)
{
        float x, y;
        float h = y2 - y1;
        float xleft_step = (x2 - x0) / h;
        float xright_step = (x2 - x1) / h;
        xleft = x0;
        xright = x1;
        for (y = y0; y < y2; y++) {
                for (x = xleft; x < xright; x++) {
                        draw_pixel(x, y, color);
                }
                xleft += xleft_step;
                xright += xright_step;
        }
}

然而这是不对的,一个最简单的例子,当【xstart=9.1,xend = 18.5】时,由于采用去1法映射相素坐标,因此理论上x方向绘制的相素坐标最大值应该小于18。但是当x=18.1上仍然会执行draw_pixel函数,此时经过传参转换后,x的值为18,这违反了左上规则(y轴同样存在这个问题)。

改良后第二版如下:

//这里仅假设光栅化一个平顶三角形【(x0,y0), (x1, y1), (x2, y2)】并且(x0 < x1 && y0 == y1 && y0 < y2)。
//void draw_pixel(int x, int y, int color);
void draw(float x0, float y0, float x1, float y1, float x2, float y2)
{
        int x, y;
        float h = y2 - y1;
        float xleft_step = (x2 - x0) / h;
        float xright_step = (x2 - x1) / h;
        xleft = x0;
        xright = x1;
        for (y = (int)y0; y < (int)y2; y++) {
                for (x = (int)xleft; x < (int)xright; x++) {
                        draw_pixel(x, y, color);
                }
                xleft += xleft_step;
                xright += xright_step;
        }
}

但是这依然不对, 当(x0, y0) = (2.1, 0.5)并且(x2, y2) = (7.1, 5.5) 时,代码实际绘制的第一个相素坐标为(2,0)。

但是根据直线【(x0, y0),(x2,y2)】的斜率可以算出当y=0时,x的值应该为1.1,换句话说理论上应该绘制的第一个相素坐标为(1, 0)。因此上述代码完美的将相素坐标(1,0)给避过去了,大部分情况下这种现象表现为,两个相邻的图元(这里指三角形)之间会有一条空白线(即两个三角形均没有绘制这条线)。

因此,当我们将y向下取整时,需要根据舍去去的小数修正x的值(因为斜率可能会非常大,有可能y只舍去了0.1,但是x会偏差好几个像素)。

修正版的代码如下:

//这里仅假设光栅化一个平顶三角形【(x0,y0), (x1, y1), (x2, y2)】并且(x0 < x1 && y0 == y1 && y0 < y2)。
//void draw_pixel(int x, int y, int color);
void draw(float x0, float y0, float x1, float y1, float x2, float y2)
{
        int x, y;
        float h = y2 - y1;
        float xleft_step = (x2 - x0) / h;
        float xright_step = (x2 - x1) / h;
        xleft = x0 - (y0 - (int)y0) * xleft_step;
        xright = x1 - (y0 - (int)y0) * xright_step;
        for (y = (int)y0; y < (int)y2; y++) {
                for (x = (int)xleft; x < (int)xright; x++) {
                        draw_pixel(x, y, color);
                }
                xleft += xleft_step;
                xright += xright_step;
        }
}

你以为事情就结束了么= =!

当直线【(x0, y0),(x2,y2)】的斜率为20时,y坐标向上取整时舍去y坐标0.5,x坐标会向左偏移10个坐标。这样原本(x0, y0) = (100, 10.5)的坐标经过取整后就会变成(80, 10)。这种错误大部分情况下表现为,三角形的顶部或底部突然多出一条直线。将所有逻辑改为向上取整,即可解决此问题。因为向上取整会保证所有坐标点都会落在原始三角形内,而向下取整会导致某些不在三角形内部。

修正版代码如下:

//这里仅假设光栅化一个平顶三角形【(x0,y0), (x1, y1), (x2, y2)】并且(x0 < x1 && y0 == y1 && y0 < y2)。
//void draw_pixel(int x, int y, int color);
void draw(float x0, float y0, float x1, float y1, float x2, float y2)
{
        int x, y;
        float h = y2 - y1;
        float xleft_step = (x2 - x0) / h;
        float xright_step = (x2 - x1) / h;
        xleft = x0 +(ceil(y0) - y0) * xleft_step;
        xright = x1 + (ceil(y0) - y0) * xright_step;
        for (y = ceil(y0); y < ceil(y2); y++) {
                for (x = ceil(xleft); x < ceil(xright); x++) {
                        draw_pixel(x, y, color);
                }
                xleft += xleft_step;
                xright += xright_step;
        }
}

至此,三连坑才算被踩完.


3月25日补充:

在进行仿射纹理映射时, 同样踩了两个坑。

1. 当y坐标向上取整时,相应的uv坐标需要采用与xleft和lright一样的算法进行修正。
2. 所有的纹理坐标范围是(0.0~1.0),在向位图坐标转换时(假设位图宽度为64×64)需要转换为(0, 63)

完整的修复代码在这里

发表评论

three × = 9