欢迎来到NiceSpace!祝大家开心每一天!
  • C++
  • 图形学
3D图形学总结(七)—Gouraud着色和仿射纹理映射

gouraud着色和仿射纹理映射,两种算法非常相似,都是一种插值计算的算法,下面记录下原理。

Gouraud着色

着色是一种游戏物体线框或者网格的填充模式,因为游戏的物体线框和网格都是由三角形组成的,所以着色就是对三角形进行填充,是在二维空间中进行的,gouraud着色是根据三角形顶点的颜色,进行插值计算来完成三角形的填充。一般经过光照的物体,顶点中会存储着光照后的颜色信息,经过gouraud着色,会让物体看着更自然,当然这种着色也有弊端,就是这种着色依赖于顶点有光照信息。

概述:

如图所示,已知v0,v1,v2三个顶点的颜色信息,v0坐标(x0, y0),v1坐标(x1, y1),v2坐标(x2, y2),光栅化阶段从上到下逐行进行填充,所以先插值计算出v0->v2和v0->v1两条边的颜色信息,然后在计算每一行像素点逐一填充。

根据上图可以清晰的了解差值结算的原理,因为源代码比较多这里只记录下大概的算法流程。

在给定3个顶点v1,v2,v3组成的三角形,v1(x1, y1),v2(x2, y2),v3(x3, y3),对应的顶点颜色分别为c1(r1, g1, b1),c2(r2, g2, b2),c3(r3, g3, b3),我们首先需要判断三个顶点是否在一条直线上进而退化成了一条直线。在进行着色渲染时,我们是从y轴从上到下,x轴从左到右进行填充的,所以我们对顶点进行排下序,保证v1.y >= v2.y >= v3.y,如果v1.y等于v2.y则三角形退化成平顶三角形,如果v2.y等于v3.y则退化为平底三角形,否则则是一般的通用三角形。

1、平顶三角形,需要对v1.x和v2.x排下序,保证v1.x >= v2.x,也就是v1要在v2的左侧,

如图,整理后的平顶三角形会类似这种,接下来进行插值计算,先对v1->v3和v2->v3进行插值计算着两条边的rgb颜色值,从上到下dy = v3.y - v1.y, 所以v1->v3的red分量的插值为,drdy = (v3.r - v1.r) / dy, 这样知道了插值就可以逐像素计算出v1->v3边的所有像素的颜色值,v2->v3同理,伪代码:
 


for(i = 0 到 (v3.y-v1.y))
{
    //vi为v1->v3的点
    vi.r = drdy * i;
    vi.g = dgdy * i;
    vi.b = dbdy * i;
}

在知道了v1->v3与v2->v3边的颜色值后,继续从左向右填充整个三角形,如上面的第二个图,我们已知v1->v3边上的一点vl,与v2->v3边上的一点vr,vl与vr是在同一行上,即vl.y等于vr.y,从左向右进行逐像素填充,dx = vr.x - vl.x,red分量插值为drdx = (vr.r - vl.r) / dx,这样就可以计算vl到vr这一行所有像素点的颜色值,最后经过从上到下从左到右完全填充整个三角形。

2、对于平底三角形,跟平顶三角形是类似的,这里不做记录了。

3、对于一般的三角形,实际都可以拆分成一个平顶三角形和一个平底三角形,也可以不拆分,但是从上到下进行填充时要考虑到v2这个转折点,可以根据v1->v2与v1->v3的斜率,来判断v2转折点是左转折还是右转折:

上图分别为左转折和右转折,从上到下进行填充时遇到v2点后需要进行下判断处理,保证从左到右的渲染顺序,具体就不详细写了,与平顶三角形类似。

以上就是对三角形进行gouraud着色的原理。vs中运行的gouraud着色效果:

这是一个被不同颜色光源照射后的立方体,经过gouraud着色渲染后的效果图

仿射纹理映射

  仿射纹理映射也是一种插值计算的方式,通过插值计算纹理坐标,将一个纹理中的像素,对三角形进行填充,实际与gouraud着色没有什么区别。

  给定三角形v1,v2,v3,v1坐标(x1, y1),v2坐标(x2, y2),v3坐标(x3, y3),每个点对应的纹理坐标为t1(u1, v1),t2(u2, v2),t3(u3, v3),按照插值着色方法,计算出纹理坐标的插值,然后从上到下从左到右扫描三角形进行填充,计算出每个像素点的纹理坐标值,然后根据坐标取出纹理中的纹素,填充到三角形对应的像素中,这样就完成了纹理映射,跟上面的着色一样的原理,不详细描述了。vs中运行的仿射纹理映射效果:

这是将一个纹理图经过仿射纹理映射到一个立方体后的效果,实际仔细观看会发现纹理有些扭曲,是因为立方体是经过透视变换映射到屏幕上的,而仿射纹理变换是经过线性插值对纹理进行映射到立方体上的,但是经过透视变换后的物体坐标与物体对应的纹理坐标并不是线性的,需要经过一个透视矫正过程,后面会记录透视矫正。

 

随机文章
3D图形学总结(二)—相机坐标转换(欧拉相机) 3D图形学总结(三)—相机坐标转换(UVN相机) 3D图形学总结(十一)—深度缓存 Apache+mod_wsgi本地部署Django(Windows系统) 破解图片防盗链
推荐文章