Unity shader实现百叶窗特效
本文实例为大家分享了Unityshader百叶窗展示的具体代码，供大家参考，具体内容如下
1.将图片划分为水平N栏，代码如下：
Shader"Unlit/BYCShader"
{
Properties
{
[PerRendererData]_MainTex("SpriteTexture",2D)="white"{}
_Color("Tint",Color)=(1,1,1,1)
_StencilComp("StencilComparison",Float)=8
_Stencil("StencilID",Float)=0
_StencilOp("StencilOperation",Float)=0
_StencilWriteMask("StencilWriteMask",Float)=255
_StencilReadMask("StencilReadMask",Float)=255
_ColorMask("ColorMask",Float)=15
_Lan("Lan",Float)=10
[Toggle(UNITY_UI_ALPHACLIP)]_UseUIAlphaClip("UseAlphaClip",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]
}
CullOff
LightingOff
ZWriteOff
ZTest[unity_GUIZTestMode]
BlendSrcAlphaOneMinusSrcAlpha
ColorMask[_ColorMask]
Pass
{
Name"Default"
CGPROGRAM
#pragmavertexvert
#pragmafragmentfrag
#pragmatarget2.0
#include"UnityCG.cginc"
#include"UnityUI.cginc"
#pragmamulti_compile__UNITY_UI_CLIP_RECT
#pragmamulti_compile__UNITY_UI_ALPHACLIP
structappdata_t
{
float4vertex:POSITION;
float4color:COLOR;
float2texcoord:TEXCOORD0;
UNITY_VERTEX_INPUT_INSTANCE_ID
};
structv2f
{
float4vertex:SV_POSITION;
fixed4color:COLOR;
float2texcoord:TEXCOORD0;
float4worldPosition:TEXCOORD1;
UNITY_VERTEX_OUTPUT_STEREO
};
v2fvert(appdata_tv)
{
v2fOUT;
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;
returnOUT;
}
sampler2D_MainTex;
float_Lan;
float4frag(v2fIN):SV_Target
{
//從這裡開始
float2uv=IN.texcoord;
uv.x*=_Lan;
uv.x=frac(uv.x);
returnfloat4(uv.xy,1.0,1.0);
}
ENDCG
}
}
}
如上图，划分为N栏后，对每一栏进行单独处理，即可做到每一栏都同时进行颜色消减。
2.对每一栏同时进行颜色消减（控制阈值可以通过c#代码实现）
代码如下：
Shader"Unlit/BYCShader"
{
Properties
{
[PerRendererData]_MainTex("SpriteTexture",2D)="white"{}
_Color("Tint",Color)=(1,1,1,1)
_StencilComp("StencilComparison",Float)=8
_Stencil("StencilID",Float)=0
_StencilOp("StencilOperation",Float)=0
_StencilWriteMask("StencilWriteMask",Float)=255
_StencilReadMask("StencilReadMask",Float)=255
_ColorMask("ColorMask",Float)=15
_Lan("Lan",Float)=10
_StepX("StepX",Range(0.0,1.0))=1.0
[Toggle(UNITY_UI_ALPHACLIP)]_UseUIAlphaClip("UseAlphaClip",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]
}
CullOff
LightingOff
ZWriteOff
ZTest[unity_GUIZTestMode]
BlendSrcAlphaOneMinusSrcAlpha
ColorMask[_ColorMask]
Pass
{
Name"Default"
CGPROGRAM
#pragmavertexvert
#pragmafragmentfrag
#pragmatarget2.0
#include"UnityCG.cginc"
#include"UnityUI.cginc"
#pragmamulti_compile__UNITY_UI_CLIP_RECT
#pragmamulti_compile__UNITY_UI_ALPHACLIP
structappdata_t
{
float4vertex:POSITION;
float4color:COLOR;
float2texcoord:TEXCOORD0;
UNITY_VERTEX_INPUT_INSTANCE_ID
};
structv2f
{
float4vertex:SV_POSITION;
fixed4color:COLOR;
float2texcoord:TEXCOORD0;
float4worldPosition:TEXCOORD1;
UNITY_VERTEX_OUTPUT_STEREO
};
v2fvert(appdata_tv)
{
v2fOUT;
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;
returnOUT;
}
sampler2D_MainTex;
float_Lan;
float_StepX;
float4frag(v2fIN):SV_Target
{
float2uv=IN.texcoord;
uv.x*=_Lan;
uv.x=frac(uv.x);
//從這裡開始,顏色值大於指定值stepx的進行消減
intneedDiscard=step(_StepX,uv.x);
if(needDiscard==1){
discard;
}
returnfloat4(uv.xy,1.0,1.0);
}
ENDCG
}
}
}
效果如下：
3.加上切变，百叶窗在关闭打开时，是有透视变化的。用切变可以近似模拟透视，因为透视的实现代价很大，所以用切变。
添加一张图片，并进行切变
代码如下：
Shader"Unlit/BYCShader"
{
Properties
{
[PerRendererData]_MainTex("SpriteTexture",2D)="white"{}
_Color("Tint",Color)=(1,1,1,1)
_StencilComp("StencilComparison",Float)=8
_Stencil("StencilID",Float)=0
_StencilOp("StencilOperation",Float)=0
_StencilWriteMask("StencilWriteMask",Float)=255
_StencilReadMask("StencilReadMask",Float)=255
_ColorMask("ColorMask",Float)=15
_Lan("Lan",Float)=10
_StepX("StepX",Range(0.0,1.0))=1.0
[Toggle(UNITY_UI_ALPHACLIP)]_UseUIAlphaClip("UseAlphaClip",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]
}
CullOff
LightingOff
ZWriteOff
ZTest[unity_GUIZTestMode]
BlendSrcAlphaOneMinusSrcAlpha
ColorMask[_ColorMask]
Pass
{
Name"Default"
CGPROGRAM
#pragmavertexvert
#pragmafragmentfrag
#pragmatarget2.0
#include"UnityCG.cginc"
#include"UnityUI.cginc"
#pragmamulti_compile__UNITY_UI_CLIP_RECT
#pragmamulti_compile__UNITY_UI_ALPHACLIP
structappdata_t
{
float4vertex:POSITION;
float4color:COLOR;
float2texcoord:TEXCOORD0;
UNITY_VERTEX_INPUT_INSTANCE_ID
};
structv2f
{
float4vertex:SV_POSITION;
fixed4color:COLOR;
float2texcoord:TEXCOORD0;
float4worldPosition:TEXCOORD1;
UNITY_VERTEX_OUTPUT_STEREO
};
v2fvert(appdata_tv)
{
v2fOUT;
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;
returnOUT;
}
sampler2D_MainTex;
float_Lan;
float_StepX;
float4frag(v2fIN):SV_Target
{
//這裡進行裁剪
float2uv=IN.texcoord;
uv.x*=_Lan;
uv.x=frac(uv.x);
intneedDiscard=step(_StepX,uv.x);
if(needDiscard==1){
discard;
}
//这里进行切变
floatx1=uv.x;
uv=IN.texcoord;
uv+=float2(-0.5,-0.5);
uv.x-=x1;//切變時，先將重心調整到中心，然后绕每一栏的起点进行切变（这里类似于绕某一点旋转，所以后面要进行反向操作，加了就减，减了就加）
float2x2qiebian=float2x2(1,0,(1.0-_StepX),1);
uv=mul(qiebian,uv);
uv-=float2(-0.5,-0.5);
uv.x+=x1;
float4color=tex2D(_MainTex,uv);
returncolor;
}
ENDCG
}
}
}
效果如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。