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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。