一、重心坐标，插值

上篇的最后我们提到了，当顶点在纹理上的对应uv坐标成功找到之后，三角形三个顶点中间的值需要用三角形的重心坐标插值计算得到，那么这个运算是怎么进行的，本篇我们将介绍。插值的运算不仅仅在纹理中，包括三角形内部的颜色和法线都可以用插值来计算并由此得到一个平滑的过度。

那么什么是重心坐标？首先我们明确重心坐标是定义在三角形上的一个坐标系，而不同的三角形有不同的重心坐标。重心坐标告诉我们，三角形内任意一点的坐标都可以由三个顶点的坐标的线性组合来表示，只要满足线性组合系数之和(α+β+γ)为1并且α,β,γ>0，如上图。（如果不满足α,β,γ>0，那么只能确定该点在三角形所在平面内，至于是三角形内外并不能确定）

重心坐标的表示就是(α,β,γ),如A点的重心坐标就是(1,0,0)。那么如何确定任意一点的重心坐标呢？这里要通过面积比来算，如上图中一点的坐标，α,β,γ各个值就是另两个顶点连成的三角形在总面积的占比，如上图所示。

而通过如上的表示，我们马上可以找到一个及其特殊的点，就是三角形自己的重心，它的重心坐标是(1/3,1/3,1/3)，这个点与三个顶点连线分成的三个三角形面积也恰好相等。

上图为对于三角形内任意一点的重心坐标计算的通用表达式

通过以上的介绍，我们知道了三角形内部的任意一点的坐标可以通过重心坐标求出表示出来，那么我们也可以利用重心坐标求三角形内部任意一点的其它属性，其他三角形内部的属性也可以用重心坐标的线性组合表示出来，如上图的颜色插值。（注意：重心坐标并没有投影下不变的性质，所以在插值如深度这种空间中的性质时，应该先在3D空间中用三维的坐标算出三维空间中的重心坐标进行插值，然后再放回而不能直接在投影之后的三角形中做插值。至于如何在已经投影的三角形在回到三维空间，应用逆变换即可。）

二、应用纹理

1.纹理的放大

在应用纹理的过程中，如果纹理过小，会导致问题。这借化用闫令琪老师在GAMES101中举的例子，假设有一个4K分辨率的墙，但是贴上去的纹理只有256x256，那么当在查询纹理的时候，就会查到许多非整数，也就说纹理会被拉大，也就会形成下图所示的样子。

在第一幅图中(Nearest)，我们采用了简单的四舍五入，即如果映射到非整数，则四舍五入取整，这会导致问题，许多像素会被映射到同一个纹素(texel)上，如第一幅图中的锯齿/方块化

(1)双线性插值

如上所示的四舍五入达到的效果显然是不美观的，于是我们找到了其他方案：Bilinear interpolation，中文名双线性插值。

假设我们的某一个在高分辨率下的像素(上图的红点)映射到了比较小的一块纹理(上图的4X4区域)上，那么我们取临近这个点最近的四个纹素，从左下角的纹素的中心开始，计算它水平和竖直方向的距离，分别为s，t。接着我们定义一步插值(lerp)操作。(什么是插值：假如两点分别为0和1，那么中间即为0.5，0-0.5中间为0.25，其它同理来得出0-1中每个点的值，这种通过两点属性确定中间任何一点属性的办法叫做插值运算。公式如上图)。

通过插值运算，我们可以得出如上图中u01、u11之间和u00、u10之间的对应纹理颜色，也就是点u1和u0对应颜色，而再把u1和u0之间做一次插值运算，就可以得到红点对应纹理的颜色了。而如上的方法就叫做双线性插值。得到的下面第二幅图明显优于第一幅简单四舍五入得到的图。

(2)立方卷积插值

而第三幅图Bicubic，中文名立方卷积插值/双三次插值，则是取周围16个点进行插值的运算，达到的效果会更好。

(鄙人补充：在GAMES101中闫令琪老师没有提到的插值—兰索斯插值Lanczos，是取周围64个点做插值，但性能消耗很大，所以没有得到广泛应用，关于Bicubic和Lanczos，GAMES101中并没有详细介绍，但是思想和Bilinear几乎相同，只是参考样板变多了，感兴趣的朋友可以自行了解。)

2.纹理的缩小

纹理过小会导致问题，同样的纹理过大同样会导致严重的问题，如上图，远处的摩尔纹和近处的锯齿，也就是走样。

(1)哪里出了问题

我们知道，我们最终在屏幕上绘制的图像是透视投影，也就是近大远小，那么相同大小的像素在屏幕上对近处和远处的物体覆盖面积是不同的，那么这个时候如果还是只用像素映射的纹素中心来当成映射到的纹理，显然是不正确的，如上图中最右边的区域，如此大的覆盖区域，颜色却只用一个被映射至中心的纹素表示，显然这是不合理的。

那么我们能否用前几篇中的超采样来解决这个走样问题呢？答案是可以。[计算机图形学]反走样(前瞻预习/复习回顾)__Yhisken的博客-CSDN博客

上图所示的就是每个像素用512个采样点来获取对应的纹理上纹素的颜色做加权平均得出的结果。但是显然我们不希望这么做，这会大大提升性能的消耗。

(2)从信号角度分析

前面我们讲到过，走样是由于我们的信号变化过快，而采样的频率跟不上信号变化速度所导致的。在这里的体现就是，我们的一个像素覆盖了纹理上的很大一块区域，也就是说像素内部的纹理信号变化的非常快，但是我们只用了一个像素去采样，也就是说采样的频率明显跟不上信号变化的速度。上面提到的超采样就是我们试图加快采样的频率所得出的办法，但显然不够经济。

(3)Mipmap

我们想，如果我们不进行采样，而是给定一块区域我们马上就能得到它的平均值，那不是好很多吗？确实，而这属于范围查询问题，我们上面说的在很小一块纹理上得出值的问题是点查询，而在大纹理的范围中查询平均值属于范围查询问题(范围查询隶属算法问题，不仅仅是求平均值，还有求最大值最小值等。)

而这就要提到我们的Mipmap，它允许我们做快速的范围查询，速度很快，但只是做近似，所以实际结果并不是百分百的准确，同时，他只能做正方形的范围查询。

Mipmap如上图所示，就是从第一张图(128x128)生成一系列图的过程，而每下一层大小都是上一层的1/4，分辨率缩小一半。一共就会生成log2分辨率层，图中则为7层。

而通过Mipmap，在我们每次渲染之前都把纹理缩小的一系列图储存起来，渲染时直接拿来用，这就可以大大提高我们的便利。而根据我们上面所说，每一张缩小图都是上一张图的1/4，所以即使是无限多张缩小图，我们的储存空间通过求极值可知，也只比原来多了1/3，也就是从1变成了4/3。由此可以看出Mipmap是一种很经济的做法。

那么如何确定我们查询的范围有多大呢？也就是说我们每个像素覆盖纹理的区域如何得到？

这里我们假设一个像素映射到纹理上的区域仍然是一个正方形的区域，而这个正方形区域的边长为L，L怎么求呢，假设我们求如上图的00的红色像素覆盖纹理区域，我们可以找临近像素的中心点同样映射到uv上，然后对他们求距离(图中为微分)，然后取较大的一个值来当作L就可以了。如上图所示。

那么如何通过知道我们覆盖正方形的大小来确定在哪层Mipmap上查询呢？很简单，假设我们正方形的面积是1x1，那么一定是在最原始的纹理上查询，而如果是4x4，那么一定在第二层上查询。以此类推在第D层上查询，则D=log2L。

但由此得到的结果是我们并不想看到的(如上图)，因为虽然有由远及近的渐变，但是中间还是有强硬的分界，也就是说Mipmap，只告诉了我们1，2层，却没有给我们1.5层，要解决这个问题也很简单，我们在这里继续使用插值运算。

假设我们要查询1.8层的Mipmap，那么我们只需分别在第一层和第二层分别做双线性插值，再在两层已经做好插值的Mipmap层中间再做一次插值就可以得到1.8层对应的像素的颜色了。这种现在两层分别做双线性插值再在两层之间做插值的方法就叫做三线性插值。由此得到的结果正是我们需要的连续的，如下图。

可是当我们把Mipmap应用于我们最开始的图时，却发生了一些问题，远处似乎完全模糊掉了？

我们说过Mipmap并不准确而是近似，并且只能查询方块区域，所以才会造成这种问题。

(4)各向异性过滤—Anisotropic Filtering

各向异性过滤应用后的效果

上面的右图中我们可以看到，我们的Mipmap只是存在于这张图对角线上的一系列图片，也就是正方形，而各向异性过滤多了一些处理，它可以查询不只正方形，还有矩形区域。

上图中表示，我们像素覆盖到纹理的区域形状可能各不相同，不一定都是正方形。而Mipmap却只能查询正方形范围，应用各向异性过滤之后，我们扩展到了可以查询矩形范围，所以会得到更好的结果。但是如果查询区域是一个平行四边形或者其他形状呢？各向异性过滤显然也解决不了。

各向异性过滤也有2x，4x，16x......，和Mipmap相同，这表示储存的层数，但和Mipmap不同的是，各向异性过滤的储存空间最终收敛到原来的3倍而不是4/3，但同样的，它并不会造成性能的损耗，而只有显存的开销。

(5)EWA过滤

EWA过滤可以把任何一个不规则形状拆成很多不同的圆形来覆盖这个不规则形状，然后多次查询不同的圆形，最后覆盖这个不规则形状，而代价就是耗时，因为要多次查询。

三、总结

本篇为大家带来了三角形的重心坐标插值计算，和应用纹理中的一些问题，如纹理过小，纹理过大的一些处理方法，计算机图形学的发展进步在今天远不止于此，本篇介绍的一些方法也只是冰山一角，有兴趣的朋友可以取寻找解决这些问题的更高级的方法。本篇主要是着重解释了GAMES101所讲的内容。那么下一篇为大家带来纹理贴图的高级应用，如凹凸贴图，法线贴图等，它们在游戏等3D渲染中同样有着很大的作用。那么下篇见，谢谢阅读。

参考：

Lecture 09 Shading 3 (Texture Mapping Cont.)_哔哩哔哩_bilibili

[计算机图形学]重心坐标应用纹理(前瞻预习/复习回顾)相关推荐

[计算机图形学]光线追踪的基本原理(前瞻预习/复习回顾)
一.光栅化的弊端我们为什么要用光线追踪呢,在之前的篇章中,我们提到了,光栅化的方式很难表示一些全局的效果,如(1)软阴影,(2)Glossy的反射(类似镜子但又不像镜子那么光滑的材质,如打磨的铜镜和 ...
[计算机图形学]材质与外观(前瞻预习/复习回顾)
一.图形学中的材质不同的物体表面有着不同的材质,而不同的材质意味着它们与光线的作用不同.那么我们之前在介绍辐射度量学和渲染方程提到过其中一个函数,叫做BRDF,而在实际上,也就是BRDF定义了不同的 ...
[计算机图形学]反走样(前瞻预习/复习回顾)
一.前言:走样的产生上一篇我们谈到了光栅化,在讲述光栅化时我们得到了光栅化之后的这样一张图,如下图显然,这和我们原本的三角形严重不符,原因是像素是方块,而无法完美的拟合三角形. 也就是说我们得到的 ...
[计算机图形学]纹理的高级应用(前瞻预习/复习回顾)
一.前言上节课我们讲了纹理的放大缩小产生问题后,我们的解决方法,那么纹理是什么呢?在现代GPU中,我们可以理解为是内存+范围查询(滤波),也就是对一块区域做点查询/范围查询,并且做的非常快,也就是说 ...
[计算机图形学]几何：曲线和曲面(前瞻预习/复习回顾)
一.曲线 1.Bézier Curves-贝塞尔曲线贝塞尔曲线也是一种显式的几何表示方法.贝塞尔曲线定义了一系列的控制点,致使确定满足这些控制点关系的唯一一条曲线:如上图定义的贝塞尔曲线满足起始点 ...
[计算机图形学]动画与模拟：关键帧动画、质点弹簧系统、运动学与绑定(前瞻预习/复习回顾)
一.动画的简要概念动画和语言一样,一开始都是作为传达信息的工具.什么是动画呢?简单的理解就是让画面变成"活的",也就是让它们能够动起来,其次需要一定的美观.在图形学上,我们可以把 ...
[计算机图形学]动画与模拟：欧拉方法、刚体与流体(前瞻预习/复习回顾)
一.前言这是本专栏的倒数第二篇文章了,为什么不是最后一篇?因为我要单独写一篇总结哈哈,不管怎么说,从今年的3.13的MVP变换开始写,写到现在,也是一个很大的工程了,我很高兴能在大二下学期的期中这个 ...
[计算机图形学]辐射度量学、渲染方程与全局光照(前瞻预习/复习回顾)
一.前言我们前面讲到的Blinn-Phong着色,Whitted-Style光线追踪都有一定问题,那就是它们并没有严格的按照物理规则定义各个变量.比如,Blinn-Phong中的光的强度,并没有一个 ...
【个人笔记】《计算机图形学》部分课堂笔记与复习
考完试有点伤之心,遂发笔记于csdn:考前看了一套11年左右的卷子,以为差不多的内容,最多改一下几道题就行了:结果自己还是图样图森破,十年前的卷子参考价值有但不能只全依赖试卷的题目,还是要好好上课听讲 ...

[计算机图形学]重心坐标应用纹理(前瞻预习/复习回顾)