8、计算机图形学——纹理的相关问题及解决办法

一、纹理映射的相关问题

1.1、小纹理大像素

大纹理小像素简单说就是纹理很小，但是被平铺在了一块像素超过纹理贴图大小的区域上，这样就会导致一个纹理像素要对应多个屏幕像素，导致纹理失真走样

如下图所示

造成这种情况的原因就是因为采用了最近邻纹理采样的方式，最近邻纹理采样的原理如下

其中，图中的十字表示纹理坐标（纹理坐标是0-1的小数，所以可以取非整数），因为左上角的纹理像素的中心点与纹理坐标的位置最接近，所以，直接将该纹理像素返回，所以最终结果就是一个深蓝色。而再对其他纹理坐标进行采样时，得到的纹理像素也是一个没有过渡的纯色。正式因为没有过渡色，所以这些有差异的纯色组合在一起时，整体的贴图区域就会产生颗粒感。

解决办法：双线性插值

使用双线性插值的结果返回的纹理像素的结果如下

双线性插值的示意图如下：

首先选中离纹理坐标最近的四个纹理像素，然后，做两次横向插值，得到u0和u1，插值公式如下

得到了u0和u1之后，再做一次纵向插值，最终得到红点的像素，插值公式如下

最终得到纹理坐标对应的颜色就是一个周围四个像素混合的结果，能起到一个过渡的作用，所以，经过双线性插值知乎的纹理的颗粒感就没有了，因为插值出了很多的过渡色

双线性插值和最近邻采样的对比效果如下

双向性插值纹理采样因为引入了过渡色，没有了颗粒感，但是因为贴到了较大的区域，会使得整体的贴图区域变得模糊。

1.2、大纹理小像素

纹理过小并使用最近邻纹理过滤的话，会使得纹理渲染结果变得有颗粒感。但是如果纹理过大的话，也会有问题，如下图所示

上图中，近处纹理产生了锯齿，而远处纹理产生了摩尔纹。

原因可以用下图表示

产生锯齿的原因：纹理过大，但是每个像素的实际大小并不能覆盖到所有的近处纹理，从而导致采样率较低，于是形成锯齿效果。

产生摩尔纹的原因：由于透视投影会产生近大远小的效果，远处纹理会包含更多的纹理细节，但是，这些丰富的细节却只能用一个像素来呈现（最右边蓝色点），采样率更低，显然会使得远处纹理细节会撕裂的更厉害，所以就会产生摩尔纹。

既然是因为采样频率不够，那么最直观的解决办法就是超采样，提高采样频率，超采样虽然能解决锯齿和摩尔纹问题，但计算成本是太高

那么既然一个采样点不能代表纹理细节，那么就可以将纹理区域内的所有像素进行求和求平均来代替当前像素的纹理。但是，远处和近处的纹理区域不一致，该如何求平均呢？

就像下面这幅图，近处白圈和远处白圈在图片中的像素面积都已差不多的，但是明显远处白圈包含更多的纹理。

为了解决快速查询纹理平均像素值的问题，mipmap算法出现了

mipmap算法过程如下图所示：

level 0代表原始texture，随着level提高，每升一级将4个相邻像素点求均值合为一个像素，默认最高级的level是一个像素，也就是原始所有像素求平均值。

因此，level越大，也就表示了越大纹理区域的平均值，那么，接下来要做的就是根据屏幕像素所代表的纹理区域大小来选选择不同level来计算纹理区域的平均值。

那么，接下来的问题就是如何将屏幕像素区域所代表的纹理区域与level进行一一对应或者说如何计算一个屏幕像素所覆盖的纹理区域？

方法如上图所示，首先，找到像素点及其上方与右方的两个像素点，将其映射到纹理坐标上，然后计算两个纹理坐标的距离，将该距离作为覆盖纹理区域的边长。因为从屏幕坐标映射到纹理坐标，所以，在屏幕坐标上相邻的两个点会发生偏移，所以需要计算当屏幕坐标变化一个单位时，纹理坐标u和v变化了多少，所以就要分别计算uv在x和y方向上的偏导，为了简化计算，直接取两个方向偏导的最大值来作文纹理区域的边长。

比如最后计算出的L的值是4，那么也就意味着屏幕坐标相差1时，纹理坐标相差4。也就是说，需要将一个4*4的纹理坐标求和求平均化成1个像素，而这个像素就需要去level 2中去查询，因为level2中就表示每16个像素融合成一个像素。因此，最终的层级就可以表示为L以2为底的对数，也就是上图中坐标的公式

找到了层级D之后，就可以在相应的纹理上进行纹理坐标的查找

然而这里还有一个问题，因为最终算出的层数有可能是小数，而mipmap只准备了整数层级进行范围查找，如何计算小数层级的纹理像素呢？

方法1：直接近似，四舍五入

近似的效果如下

可见过渡非常不自然，如何让过渡变得自然呢？还得是线性插值。

方法2：三线性插值

比如计算出来的D=1.8，那么就需先分别到D=1和D=2的纹理坐标，并分别进行一次双线性插值得到纹理像素的值，然后再使用这两个纹理像素的值再进行一次插值

总计需要两次双线性插值和一次线性插值，所以被叫做双线性插值

最终得到的结果如下

使用mipmap算法处理大纹理后，将纹理贴在像素区域的结果如下

可见，图片整体模糊过度，尤其是远处，原因就是在计算覆盖区域的时候直接使用最大值进行近似计算，导致近似计算出来的区域比实际的区域大，从而模糊的区域变大，最终导致整体效果模糊过度

解决这个问题就需要使用各向异性滤波

二、各向异性滤波

2.1、为啥要引入各项异性滤波

如下图所示，屏幕空间的像素所对应的纹理区域并不一定是正方形，很多都是长条形，所以需要增加额外的查找空间来匹配纹理区域，所以，各向异性滤波就会多出一些长方形的纹理图片

各项异性滤波的查找空间如下图

对比mipmap，mipmap的查找空间只包含对角线所表示的纹理图片，各向异性滤波所产生的的纹理区域更多，所以结果就更加准确

各向异性滤波并不能完全解决过模糊的问题，因为将纹理区域近似为长方形有时候也是不准确的，但是效果也不错

参考：

GAMES101-现代计算机图形学入门-闫令琪_哔哩哔哩_bilibili

欢迎大家评论交流，作者水平有限，如有错误，欢迎指出

8、计算机图形学——纹理的相关问题及解决办法相关推荐

win7虚拟机上安装visual studio2017社区版的相关问题以及解决办法
win7虚拟机上安装visual studio2017社区版的相关问题以及解决办法一.visual studio community_2017在虚拟机win7安装时出现的问题 1.右击软件图标,点击 ...
计算机加入域不能访问网络位置解决办法
计算机加入域不能访问网络位置解决办法启动以下服务本文转自 onesthan 51CTO博客,原文链接:http://blog.51cto.com/91xueit/1660286,如需转载请自行 ...
threejs摩尔纹镜头拉远模型贴图出现摩尔纹，纹理贴图闪烁异常解决办法
threejs镜头拉远模型贴图出现摩尔纹,纹理贴图闪烁异常解决办法当threejs加载模型时,会遇到有些模型的贴图有密集网格形状,当有密集四方格类,或者其他形状密集条纹类的贴图时,就会出现摩尔纹. ...
计算机加入域不能访问网络位置解决办法
计算机加入域不能访问网络位置解决办法启动以下服务
9、计算机图形学——纹理的应用（环境贴图、凸凹贴图、法线贴图以及位移贴图）
一.环境贴图比如下面的这张图,左边的是一张表示环境光的纹理,这个纹理表示屋子内部四面八方都是啥样,右边是一个茶壶, 将纹理映射到这个茶壶上,就能茶壶上渲染出周围的环境还有这样的球形环境贴图(sph ...
计算机图形学学习方法和相关书籍,做游戏,GIS,虚拟现实,三维引擎的都可以看看.
本书参照<<图形学扫盲>> 整理的,原文内容引子: http://www.cppblog.com/lai3d/archive/2008/12/30/70796.html 前言: ...
网络中工作组中计算机无法访问或没有选项的解决办法汇总
在网上邻居中点"查看工作组计算机"时显示"workgroup无法访问．您可能没有权限使用网络资源．．．．．此工作组的服务器列表当前无法使用" 我所使用过的方法如 ...
as3 访问远程计算机,本地swf不能访问网络的解决办法
本地swf不能访问网络的解决办法作者:小龙博客 2011年03月21日 4条评论分类:AS3 学习 flash 软件本地swf不能访问网络的解决办法:学习过http://www.lxlong.c ...
Android异常与性能优化相关问题及解决办法
目录 ANR异常问题及解决方式 OOM异常问题及解决方式 BitMap相关问题 UI卡顿问题内存泄露问题及解决方式内存管理冷启动优化问题其他优化介绍 ANR异常问题及解决方式什么是ANR A ...

8、计算机图形学——纹理的相关问题及解决办法

8、计算机图形学——纹理的相关问题及解决办法相关推荐

最新文章

热门文章