图片边缘出现黑点的问题分析和解决（纹理过滤）

最近在项目中遇到UI图片非透明区域边缘出现黑色杂点的问题，经过分析和纹理过滤有关，并提出解决方案，需要美术制图时特别注意。本文是此问题的分析与解决方案。

问题

我的项目使用的FairyGUI，然而此问题与UI框架无关。

上图为出现问题的图片，一个绿色的环形图片，周围为透明。

通过修改渲染所用shader，并在片源着色中修改out颜色的alpha = 1，可以获得排除透明通道的颜色图。

对比两张图片可以看到，有一些#00000000的色块在和绿色部分相交的地方产生这些黑块。

那么可以想见就是这些相交的区域产生了这些黑色杂点。为什么会产生这些杂点呢？下面将会分析

纹理过滤(texture filter)

我们的纹理是要贴到三维图形表面的，而三维图形上的pixel中心和纹理上的texel中心并不一至（pixel不一定对应texture上的采样中心texel），大小也不一定一至。当纹理大于三维图形表面时，导至一个像素被映射到许多纹理像素上;当维理小于三维图形表面时，许多个像素都映射到同一纹理。

纹理过滤一般常见的有四种：
1. Nearest Point Sampling（最近点采样）
最近点采样取最接近的图片上的像素点进行采样。
2. Bilinear（双线性过滤）
双线性过滤以pixel对应的纹理坐标为中心，采该纹理坐标周围4个texel的像素，再取平均，以平均值作为采样值。
3. Trilinear（三线性过滤）
三线性过滤以双线性过滤为基础。会对pixel大小与图片像素大小最接近的两层Mipmap level分别进行双线性过滤，然后再对两层得到的结果进行线性插值。
4. Anisotropic Filtering（各向异性过滤）
各向同性的过滤在采样的时候，是对正方形区域里行采样。各向异性过滤把纹理与屏幕空间的角度这个因素考虑时去。简单地说，它会考滤一个pixel(x:y=1:1)对应到纹理空间中在u和v方向上u和v的比例关系，当u:v不是1:1时，将会按比例在各方向上采样不同数量的点来计算最终的结果(这时采样就有可能是长方形区域)。

问题分析

通过了解纹理过滤的定义，我们可以很清楚的意识到，几种过滤方式中后三种都使用了插值运算。也就是说插值出的像素点都会是一个新的颜色。只要使用过插值运算，就有可能会产生图片上本来不存在的颜色。

如过存在插值，那么下面2*2的图片被渲染为2倍大小的话就会出现类似这种情况（实际上并不是完全相同，具体结果间上面不通纹理过滤的算法）

a	b
白色不透明	红色透明
白色不透明	红色透明

==变为===>>>>>>

a	b	c	d
白色不透明	粉色半透明	粉色半透明	红色透明
白色不透明	粉色半透明	粉色半透明	红色透明
白色不透明	粉色半透明	粉色半透明	红色透明
白色不透明	粉色半透明	粉色半透明	红色透明

其中粉色半透明就是新产生的颜色。

也就是说黑色透明色 #00000000 和绿色不透明色#00ff00ff之间在插值过程中产生了灰色半透明，就是这些边缘的杂点。

问题确认

看一下图片的导入设置中，Filter Mode中的选项，选择了Bilinear 即在纹理过滤是使用的模式是 双线性过滤 ，使用了插值。

改成Point ，即使用 最近点采样 。再看效果

黑点消失了，但是边缘变得不整齐了。这也是最近点采样的缺点。

问题解决

很简单，美术作图的时候尽量避免使用橡皮擦。保证一个透明过度关系应该为:

绿色不透明 -> 绿色半透明 -> 绿色透明 -> 黑色透明

这样插值就不会插出灰色半透明之类的情况。