Unity shader实现百叶窗特效

163 阅读 0 评论 108 点赞

我是靠谱客的博主魁梧银耳汤，这篇文章主要介绍Unity shader实现百叶窗特效，现在分享给大家，希望可以做个参考。

本文实例为大家分享了Unity shader百叶窗展示的具体代码，供大家参考，具体内容如下

1.将图片划分为水平N栏，代码如下：

复制代码

Shader "Unlit/BYCShader"
{
 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
 
  _Lan("Lan",Float) = 10 
 
  [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
 }
 
 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 __ UNITY_UI_CLIP_RECT
   #pragma multi_compile __ 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
   };
 
   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 = v.texcoord;
 
    OUT.color = v.color;
    return OUT;
   }
 
   sampler2D _MainTex;
 
   float _Lan;
 
   float4 frag(v2f IN) : SV_Target
   {
    //從這裡開始
    float2 uv = IN.texcoord;
 
    uv.x*= _Lan;
    uv.x = frac(uv.x);
    return float4(uv.xy,1.0,1.0);
   }
  ENDCG
  }
 }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
Shader "Unlit/BYCShader"
{
 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
 
  _Lan("Lan",Float) = 10 
 
  [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
 }
 
 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 __ UNITY_UI_CLIP_RECT
   #pragma multi_compile __ 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
   };
 
   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 = v.texcoord;
 
    OUT.color = v.color;
    return OUT;
   }
 
   sampler2D _MainTex;
 
   float _Lan;
 
   float4 frag(v2f IN) : SV_Target
   {
    //從這裡開始
    float2 uv = IN.texcoord;
 
    uv.x*= _Lan;
    uv.x = frac(uv.x);
    return float4(uv.xy,1.0,1.0);
   }
  ENDCG
  }
 }
}

如上图，划分为N栏后，对每一栏进行单独处理，即可做到每一栏都同时进行颜色消减。

2.对每一栏同时进行颜色消减（控制阈值可以通过c#代码实现）

代码如下：

复制代码

Shader "Unlit/BYCShader"
{
 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
 
  _Lan("Lan",Float) = 10 
  _StepX("StepX",Range(0.0,1.0))=1.0
 
  [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
 }
 
 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 __ UNITY_UI_CLIP_RECT
   #pragma multi_compile __ 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
   };
 
   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 = v.texcoord;
 
    OUT.color = v.color;
    return OUT;
   }
 
   sampler2D _MainTex;
 
   float _Lan;
   float _StepX;
 
   float4 frag(v2f IN) : SV_Target
   {
    
    float2 uv = IN.texcoord;
    uv.x*= _Lan;
 uv.x = frac(uv.x);
 
 //從這裡開始,顏色值大於指定值stepx的進行消減
 int needDiscard = step(_StepX,uv.x);
 if(needDiscard == 1){
  discard;
 }
 return float4(uv.xy,1.0,1.0);
   }
  ENDCG
  }
 }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
Shader "Unlit/BYCShader"
{
 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
 
  _Lan("Lan",Float) = 10 
  _StepX("StepX",Range(0.0,1.0))=1.0
 
  [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
 }
 
 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 __ UNITY_UI_CLIP_RECT
   #pragma multi_compile __ 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
   };
 
   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 = v.texcoord;
 
    OUT.color = v.color;
    return OUT;
   }
 
   sampler2D _MainTex;
 
   float _Lan;
   float _StepX;
 
   float4 frag(v2f IN) : SV_Target
   {
    
    float2 uv = IN.texcoord;
    uv.x*= _Lan;
 uv.x = frac(uv.x);
 
 //從這裡開始,顏色值大於指定值stepx的進行消減
 int needDiscard = step(_StepX,uv.x);
 if(needDiscard == 1){
  discard;
 }
 return float4(uv.xy,1.0,1.0);
   }
  ENDCG
  }
 }
}

效果如下：

3.加上切变，百叶窗在关闭打开时，是有透视变化的。用切变可以近似模拟透视，因为透视的实现代价很大，所以用切变。

添加一张图片，并进行切变

代码如下：

复制代码

Shader "Unlit/BYCShader"
{
 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
 
  _Lan("Lan",Float) = 10 
  _StepX("StepX",Range(0.0,1.0))=1.0
 
  [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
 }
 
 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 __ UNITY_UI_CLIP_RECT
   #pragma multi_compile __ 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
   };
 
   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 = v.texcoord;
 
    OUT.color = v.color;
    return OUT;
   }
 
   sampler2D _MainTex;
 
   float _Lan;
   float _StepX;
 
   float4 frag(v2f IN) : SV_Target
   {
 
    //這裡進行裁剪
    float2 uv = IN.texcoord;
    uv.x*= _Lan;
 uv.x = frac(uv.x);
 int needDiscard = step(_StepX,uv.x);
 if(needDiscard == 1){
  discard;
 }
 
 //这里进行切变
 float x1 = uv.x;
 uv = IN.texcoord;
 uv+=float2(-0.5,-0.5); 
    uv.x-=x1;//切變時，先將重心調整到中心，然后绕每一栏的起点进行切变（这里类似于绕某一点旋转，所以后面要进行反向操作，加了就减，减了就加）
    float2x2 qiebian = float2x2(1,0,(1.0-_StepX),1);
    uv = mul(qiebian,uv);
    uv-=float2(-0.5,-0.5);
    uv.x+=x1;
 
 float4 color= tex2D(_MainTex, uv);
 
 
 return color;
   }
  ENDCG
  }
 }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
Shader "Unlit/BYCShader"
{
 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
 
  _Lan("Lan",Float) = 10 
  _StepX("StepX",Range(0.0,1.0))=1.0
 
  [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
 }
 
 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 __ UNITY_UI_CLIP_RECT
   #pragma multi_compile __ 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
   };
 
   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 = v.texcoord;
 
    OUT.color = v.color;
    return OUT;
   }
 
   sampler2D _MainTex;
 
   float _Lan;
   float _StepX;
 
   float4 frag(v2f IN) : SV_Target
   {
 
    //這裡進行裁剪
    float2 uv = IN.texcoord;
    uv.x*= _Lan;
 uv.x = frac(uv.x);
 int needDiscard = step(_StepX,uv.x);
 if(needDiscard == 1){
  discard;
 }
 
 //这里进行切变
 float x1 = uv.x;
 uv = IN.texcoord;
 uv+=float2(-0.5,-0.5); 
    uv.x-=x1;//切變時，先將重心調整到中心，然后绕每一栏的起点进行切变（这里类似于绕某一点旋转，所以后面要进行反向操作，加了就减，减了就加）
    float2x2 qiebian = float2x2(1,0,(1.0-_StepX),1);
    uv = mul(qiebian,uv);
    uv-=float2(-0.5,-0.5);
    uv.x+=x1;
 
 float4 color= tex2D(_MainTex, uv);
 
 
 return color;
   }
  ENDCG
  }
 }
}