Direct3D提高篇:HLSL编程实现PhotoShop滤镜效果 - 马赛克

接下来我们完成一个更加常见的效果—马赛克。图片的马赛克就是把图片的一个相当大小的区域用同一个点的颜色来表示。可以认为是大规模的降低图像的分辨率,而让图像的一些细节隐藏起来。

用HLSL代码实现马赛克是非常简单的。但是同样的需要一些额外的步骤。

    第一步就是先把纹理坐标转换成图像实际大小的整数坐标。接下来要把图像这个坐标量化---比如马赛克块的大小是8x8象素。那么我们可以用下列方法来得到马赛克后的图像采样值，假设[x.y]为图像的整数坐标：

[x,y]mosaic = [ int(x/8)*8 , int(y/8)*8].

得到这个坐标后只要用相反的方法，把整数坐标转换回到0-1.0的纹理坐标。

具体的马赛克效果代码如下：

经过这个Shader处理后的图像结果如下：

图：马赛克处理效果

读者可能会发现这个马赛克太普通了，确实它不够新颖。下面我们来改良一下，我们希望达到这样一个效果：马赛克区域不是方的，而是圆的，圆形区域以外，依旧用图像原来的颜色覆盖。这样需要改变一下代码。

首先求出原来马赛克区域的正中心（原来是左上角）：然后计算图像采样点到这个中心的距离，如果在马赛克圆内，就用区域的中心颜色，否则就用原来的颜色。改良后的代码如下，这里把马赛克区域大小调节成16x16。这样效果更明显。

这个代码相对上面的代码复杂了一些，加了一个分支if/else。注意，GPU是个高度并行的处理器，过多分支会降低Shader的运行速度。这个改良的马赛克效果如下

图:  改良后的马赛克效果