UnityShader实例12:屏幕特效之马赛克（Mosaic）材质

马赛克（Mosaic）材质

概述

马赛克（Mosaic）,估计是大伙平时很常见最讨厌的图片处理手段，嘿嘿，没错我说的就是"打码"。好了，正经点，马赛克指现行广为使用的一种图像（视频）处理手段，此手段将影像特定区域的色阶细节劣化并造成色块打乱的效果，因为这种模糊看上去有一个个的小格子组成，便形象的称这种画面为马赛克。其目的通常是让图像大规模的降低图像（）视频分辨率,而让图像（视频）的一些细节隐藏起来，使之无法辨认，一般用来保护隐私，或者隐藏某些不健康的画面。

原理

要实现马赛克的效果，需要把图片一个相当大小的正方形区域用同一个点的颜色来表示，相当于将连续的颜色离散化，因此我们可以想到用取整的方法来离散颜色，但是在我们的图片纹理坐标采样时在0到1的连续范围，因此我们需要将纹理坐标转换成实际大小的整数坐标，接下来要把图像这个坐标量化离散，比如对于一个分辨率为256X256像素的图片，马赛克块的大小为8X8像素，我们先得将纹理坐标乘以（256,256）使其映射到0到256的范围，相当于一个整数代表一个像素，再将纹理坐标取除以8之后取整，最后再将坐标乘以8，除以256.重新映射回0到1的范围，但是纹理坐标已经是离散的，而非连续的。

Shader代码实现

到代码实现部分了，如果被上面原理讲述绕晕的同学还是直接看代码吧（原谅我，理科生，作文从来没行过

）。首先还是得在属性里声明一个马赛克大小的参数

Properties {
_MainTex ("Base (RGB)", 2D) = "white" {}
_MosaicSize("MosaicSize", int)=5
}

然后声明一个内置四元数变量_MainTex_TexelSize，这个变量的从字面意思是主贴图_MainTex的像素尺寸大小，是一个四元数，它的值为 Vector4(1 / width, 1 / height, width, height)；这个属于unity的黑魔法，不知道是在哪里定义的，官方文档并没有解释，有知道的网友可以在回复里告诉我。

half4 _MainTex_TexelSize;

因为马赛克是针对像素操作，所以关键代码也在Frag函数里面实现：

float2 uv = (i.texcoord*_MainTex_TexelSize.zw) ;//将纹理坐标映射到分辨率的大小
uv = floor(uv/_MosaicSize)*_MosaicSize;//根据马赛克块大小进行取整
i.texcoord =uv*_MainTex_TexelSize.xy;//把坐标重新映射回0,1的范围之内
fixed4 col = tex2D(_MainTex, i.texcoord);

Shader完整代码

VF版本代码01

Shader "PengLu/Unlit/MosaicVF" {
Properties {
_MainTex ("Base (RGB)", 2D) = "white" {}
_MosaicSize("MosaicSize", int)=5
}

SubShader {
Tags { "RenderType"="Opaque" }
LOD 100

Pass {
CGPROGRAM
#pragma vertex vert
#pragma fragment frag

#include "UnityCG.cginc"

struct appdata_t {
float4 vertex : POSITION;
float2 texcoord : TEXCOORD0;

};

struct v2f {
float4 vertex : SV_POSITION;
half2 texcoord : TEXCOORD0;

};

sampler2D _MainTex;
float4 _MainTex_ST;
half4 _MainTex_TexelSize;
int _MosaicSize;
v2f vert (appdata_t v)
{
v2f o;
o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
o.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);

return o;
}

fixed4 frag (v2f i) : SV_Target
{
float2 uv = (i.texcoord*_MainTex_TexelSize.zw) ;
uv = floor(uv/_MosaicSize)*_MosaicSize;
i.texcoord =uv*_MainTex_TexelSize.xy;
fixed4 col = tex2D(_MainTex, i.texcoord);

UNITY_OPAQUE_ALPHA(col.a);

return col;
}
ENDCG
}
}

}

VF版本代码01效果：

C#脚本代码

要做成屏幕特效，还需要脚本配合，这里不做过多解释，脚本里重要部分有注释,需要注意的是几个函数，具体用处可以看官方文档（这里和这里）

OnRenderImage (RenderTexture sourceTexture, RenderTexture destTexture)

Graphics.Blit(sourceTexture, destTexture,material)

Graphics.Blit(sourceTexture, destTexture);

完整C#脚本如下：

using UnityEngine;
using System.Collections;
using System;

[ExecuteInEditMode]
[AddComponentMenu ("PengLu/ImageEffect/Mosaic")]
public class ImageEffect_Mosaic : MonoBehaviour {
#region Variables
public Shader MosaicShader = null;
private Material MosaicMaterial = null;
public int MosaicSize = 8;

#endregion

//创建材质和shader
Material material
{
get
{
if(MosaicMaterial == null)
{
MosaicMaterial = new Material(MosaicShader);
MosaicMaterial.hideFlags = HideFlags.HideAndDontSave;
}
return MosaicMaterial;
}
}

// Use this for initialization
void Start () {

MosaicShader = Shader.Find("PengLu/Unlit/MosaicVF");

// Disable if we don't support image effects
if (!SystemInfo.supportsImageEffects)
{
enabled = false;
return;
}

// Disable the image effect if the shader can't
// run on the users graphics card
if (!MosaicShader || !MosaicShader.isSupported)
enabled = false;
return;

}

void OnRenderImage (RenderTexture sourceTexture, RenderTexture destTexture)
{
if(MosaicSize > 0 && MosaicShader != null){

material.SetInt("_MosaicSize", MosaicSize);//将马赛克尺寸传递给shader

Graphics.Blit(sourceTexture, destTexture,material);//将抓取的图像传递给gpu并用shader处理后，传回来

}

else{
Graphics.Blit(sourceTexture, destTexture);

}

}

// Update is called once per frame
void Update () {
#if UNITY_EDITOR
if (Application.isPlaying!=true)
{
MosaicShader = Shader.Find("PengLu/Unlit/MosaicVF");

}
#endif

}

public void OnDisable () {
if (MosaicMaterial)
DestroyImmediate (MosaicMaterial);
}
}

马赛克效果变种

在网上查资料的过程中，也看到一些很有意思的马赛克算法变种，这里我只将它们的关键代码以及实现效果放上来，大家可以自己理解制作。

圆形马赛克

关键代码：

float2 intUV = (i.texcoord*_MainTex_TexelSize.zw) ;
float2 xyUV = floor(intUV/_MosaicSize)*_MosaicSize+0.5*_MosaicSize;
float disSample = length(xyUV-intUV);
float2 mosaicUV = xyUV*_MainTex_TexelSize.xy;
fixed4 col = tex2D(_MainTex, i.texcoord);
if(disSample<0.5*_MosaicSize)
col = tex2D(_MainTex,mosaicUV);

代码效果：

正六边形（蜂巢）马赛克

算法原理参考这里和这里，我稍微做了些简化，减少了些数学运算使之能支持tanget
2.0，算法不难理解，但是自己想出来却还是蛮难的，所以很佩服原作者，由此可见数学在shader编程中还是相当重要的；

关键代码：

const float TR = 0.866025f;//TR=√3
float2 xyUV = (i.texcoord*_MainTex_TexelSize.zw);
int wx = int (xyUV.x/1.5f/_MosaicSize);
int wy = int (xyUV.y/TR/_MosaicSize);

float2 v1,v2;
float2 wxy =float2(wx,wy);
if(wx/2*2==wx){
if(wy/2*2==wy){
v1 = wxy;
v2 = wxy+1;
}
else{
v1 = wxy+float2(0,1);
v2 = wxy+float2(1,0);
}
}
else{
if(wy/2*2 == wy){
v1 = wxy+float2(0,1);
v2 = wxy+float2(1,0);
}
else{
v1 = wxy;
v2 = wxy+1;
}
}
v1 *= float2(_MosaicSize*1.5f,_MosaicSize*TR);
v2 *= float2(_MosaicSize*1.5f,_MosaicSize*TR);

float s1 = length(v1.xy-xyUV.xy);
float s2 = length(v2.xy-xyUV.xy);
fixed4 col = tex2D(_MainTex,v2*_MainTex_TexelSize.xy);
if(s1 < s2)
col = tex2D(_MainTex,v1*_MainTex_TexelSize.xy);

代码效果：