Unity Shader 图片渐清晰效果

效果图

原理

1、先定义参数属性

一张主纹理，还有噪点图，_percent相当于是权重，_DefColor目的混合颜色。像上面效果最初泛红。

Properties {  
    _MainTex ("image", 2D) = "white" {}  
    _NoiseTex("noise", 2D) = "bump" {}  
    _percent("percent", Range(-0.3, 1)) = 0  
    _DefColor ("defalutColor", COLOR)  = ( 0, .8, .4, 1)  
}

2、定义顶点输出结构体

SV_POSITION 转换成裁剪空间下的坐标

TEXCOORD0 贴图UV

 struct v2f {      
    half4 pos:SV_POSITION;      
    half4 uv : TEXCOORD0;     
};

3、顶点着色器

这里使用appdata_full结构体（在UnityCG.cginc中这里面定义好了POSITION、TANGENT、NORMAL、TEXCOORD0等）

UnityObjectToClipPos 是常规比用方法模型顶点转裁切空间。

由于TEXCOORD0可以是float2或float4类型，这里用float4类型，给zw赋值偏移量。

扫描二维码关注公众号，回复： 14890521 查看本文章

注意：这里给zw赋值会超过1，正常uv取值范围是0-1。超过1就是贴图寻址的问题。这里把贴图设置成Repeat。即比如1.1会作为0.1位置寻址。

 v2f vert(appdata_full v) {    
    v2f o;    
    o.pos = UnityObjectToClipPos (v.vertex);    
    o.uv.xy = v.texcoord.xy;  
    o.uv.zw = v.texcoord.xy + _Time.x;  
    return o;    
}

4、片元着色器

图片扭曲过程的解释：

a）由于_NoiseTex所表示的噪声图片的每个像素点的值在区间[0,1]之内。即noise.xy的值在[0,1]之间。

b) noise.xy * 0.05 的区间为[0,0.05]；

c）noise.xy * 0.05-0.025的区间为[-0.025,0.025]

d）i.uv.xy + noise.xy * 0.05 - 0.025 表示对原来图片的uv进行[-0.025,0.025]之间任意值的一次偏移（取决于噪声图），这样就形成了图像扭曲效果。

e）又由于i.uv.zw受时间支配，所以noise的值也随时间变化。这样整个图片的扭曲，也随时间变化，就形成了液化的效果。

其中0.05和0.025的值是实验得出的。可以更具实际情况改变来达到不同的效果。

f）smoothstep用来生成0到1的平滑过渡值，如下：如果x在[a,b]范围内，则返回介于0和1之间的平滑插值，使用smoothstep在两个值之间创建平滑过度。这样修改percent参数经过i.uv.y-percent就能显示图片从低到上y轴坐标插值。


fixed4 frag(v2f i) : SV_Target{
    // 原始卡牌, 把alpha设置为1，屏蔽掉alpha通道信息  
    fixed4 tex0 = tex2D(_MainTex, i.uv.xy);  
    // 透明躁动卡牌; 使用alpha通道信息，设置显示颜色，并加入躁动；  
    half3 noise = tex2D(_NoiseTex, i.uv.zw );  
    fixed4 tex1 = tex2D(_MainTex, i.uv.xy + noise.xy * 0.05 - 0.025); 
    tex1.rgb = tex1.rgb + _DefColor.rgb * 0.5;
    tex1.a = 0.5;

    //两个图片的叠加；通过比较uv中的v 和 _percent，来融合处理后的alpha通道和rgb通道
    return lerp(tex0, tex1, smoothstep(0, 0.3, i.uv.y-_percent)); 
}

工程示例下载加注释

Unity Shader 图片渐清晰效果

效果图

原理

猜你喜欢