昨天在B站發現了重裝戰姬的印象曲。
突然想實現一下這種干擾的效果。
從畫面上看,應該只是將圖片的UV分段然後偏移。
這種效果一般UI上面會用的比較多,所以做成UI效果應該會比較好。
第一步
首先先從Unity官網下載當前Unity版本的builtin_shaders;
https://unity3d.com/get-unity/download/archive
Downloads -> Bulit in shaders
這一步是爲了拿到Unity默認的UI/Default的shader源碼,然後在它的基礎上改。
在不改變該shader的基礎上可以添加代碼,可以應用很多Unity自帶的UI效果,比如Mask。
Unity默認的UI Default裏的參數大都是組件調用的,比如Mask組件會改寫Stencil相關的屬性來達到遮罩的效果,詳細請搜模板測試。
Image組件的Color改變的也不是材質的Tint Color,從而在不更換材質的情況下減少了DC。
在UI/Default的shader基礎上進行修改,可以“繼承”UI的很多功能。
第二步
Shader "UI/ChannelNoise"
{
Properties
{
[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
_Color ("Tint", Color) = (1,1,1,1)
_StencilComp ("Stencil Comparison", Float) = 8
_Stencil ("Stencil ID", Float) = 0
_StencilOp ("Stencil Operation", Float) = 0
_StencilWriteMask ("Stencil Write Mask", Float) = 255
_StencilReadMask ("Stencil Read Mask", Float) = 255
_ColorMask ("Color Mask", Float) = 15
[Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
_NoiseStrength("NoiseStrength", Range(0, 1)) = 0
_NoiseSeed("NoiseSeed", Range(0, 1)) = 0
_Segment("Segment", int) = 50
}
SubShader
{
Tags
{
"Queue"="Transparent"
"IgnoreProjector"="True"
"RenderType"="Transparent"
"PreviewType"="Plane"
"CanUseSpriteAtlas"="True"
}
Stencil
{
Ref [_Stencil]
Comp [_StencilComp]
Pass [_StencilOp]
ReadMask [_StencilReadMask]
WriteMask [_StencilWriteMask]
}
Cull Off
Lighting Off
ZWrite Off
ZTest [unity_GUIZTestMode]
Blend SrcAlpha OneMinusSrcAlpha
ColorMask [_ColorMask]
Pass
{
Name "Default"
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma target 2.0
#include "UnityCG.cginc"
#include "UnityUI.cginc"
#pragma multi_compile_local _ UNITY_UI_CLIP_RECT
#pragma multi_compile_local _ UNITY_UI_ALPHACLIP
struct appdata_t
{
float4 vertex : POSITION;
float4 color : COLOR;
float2 texcoord : TEXCOORD0;
UNITY_VERTEX_INPUT_INSTANCE_ID
};
struct v2f
{
float4 vertex : SV_POSITION;
fixed4 color : COLOR;
float2 texcoord : TEXCOORD0;
float4 worldPosition : TEXCOORD1;
UNITY_VERTEX_OUTPUT_STEREO
};
sampler2D _MainTex;
fixed4 _Color;
fixed4 _TextureSampleAdd;
float4 _ClipRect;
float4 _MainTex_ST;
float _NoiseStrength;
float _NoiseSeed;
int _Segment;
float rand(float2 p)
{
return frac(sin(dot(p ,float2(12.9898,_NoiseSeed))) * 43758.5453);
}
float noise(float2 x)
{
float2 i = floor(x);
float2 f = frac(x);
float a = rand(i);
float b = rand(i + float2(1.0, 0.0));
float c = rand(i + float2(0.0, 1.0));
float d = rand(i + float2(1.0, 1.0));
float2 u = f * f * f * (f * (f * 6 - 15) + 10);
float x1 = lerp(a,b,u.x);
float x2 = lerp(c,d,u.x);
return lerp(x1,x2,u.y);
}
float2 getUV(int segment, float2 texcoord)
{
float2 uv = texcoord;
uv.x = texcoord.x + (noise(floor(uv.y * segment)) - 0.5) * _NoiseStrength;
return uv;
}
v2f vert(appdata_t v)
{
v2f OUT;
UNITY_SETUP_INSTANCE_ID(v);
UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
OUT.worldPosition = v.vertex;
OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);
OUT.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);
OUT.color = v.color * _Color;
return OUT;
}
fixed4 frag(v2f IN) : SV_Target
{
float2 uv = getUV(_Segment, IN.texcoord);
float4 tempColor = tex2D(_MainTex, uv);
half4 color = (tempColor + _TextureSampleAdd) * IN.color;
#ifdef UNITY_UI_CLIP_RECT
color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
#endif
#ifdef UNITY_UI_ALPHACLIP
clip (color.a - 0.001);
#endif
return color;
}
ENDCG
}
}
}
這是通過UI/Default修改的完整代碼。
通過UV的y方向*切割的片數,可以將UV0到1的區間轉換爲0到片數,然後通過floor取整來將UV的y方向分成片數個片段。
Noise主要解決隨機偏移問題,相同的數值通過noise會得到相同的結果,並且它有隨機的特點且不會超出0到1的範圍。
最終效果
圖片稍微給了一點藍色,這樣會有全息的感覺。
而且支持遮罩哦,這就是爲什麼在UI/Default的基礎上修改的原因,這樣外面框起來就是一個對話框了。
Shader的屬性。
後三個是新添加的。
NoiseStrength是偏移強度,越大偏移效果分開的越強。
NoiseSeed是種子,種子不同偏移的方向也不相同,可以通過腳本修改來達到動態絮亂的感覺。
Segment是片數,表示將一張圖分成多少段。
所以做完了。
配合腳本控制效果。