记录一下最近工作中碰到的有关于模板缓冲相关的问题
起因是重做动态头像，之前的实现方案是美术用粒子系统做的帧动画，这种方案消耗相对较大，是不可取的
一开始想到的解决方案是用sprite替代粒子，用计时器去切换Image的sprite，这也存在一些问题，例如在每帧切换sprite会导致额外的开销，最理想也是最合理的解决方案时通过shader来实现帧动画，本质上是通过uv偏移来实现
Shader "Unlit/dynimacHead"
{
Properties
{
_MainTex ("Texture", 2D) = "white" {}
_RowAmount("RowAmount", float) = 4
_ColumnAmount("ColumnAmount", float) = 4
_Speed("Speed", Range(1, 100)) = 30
}
SubShader
{
Tags { "RenderType" = "Transparent" "Queue" = "Transparent" "IgnoreProjection" = "True" }
Pass
{
ZWrite Off
Blend SrcAlpha OneMinusSrcAlpha
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};
sampler2D _MainTex;
float4 _MainTex_ST;
float _RowAmount;
float _ColumnAmount;
float _Speed;
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
return o;
}
fixed4 frag (v2f i) : SV_Target
{
float time = floor(_Time.y * _Speed); //通过_Speed控制时间的快慢
float row = floor(time / _RowAmount); //表示当前时间应该跑到第几行了
float column = time - row * _RowAmount; //表示当前时间应该跑到第几列了
half2 uv = i.uv + half2(column, -row); //往右走列数增加，往下走行数减少，最好在unity中自己测试一下
uv.x /= _RowAmount; //将原本采样UV的x缩小_RowAmount倍
uv.y /= _ColumnAmount; //将原本采样UV的y缩小_ColumnAmount倍
fixed4 col = tex2D(_MainTex, uv);
return col;
}
ENDCG
}
}
}
上面的shader实现了帧动画的功能，但存在的问题是当Image在mask下时，不能正确的被剪切，这是因为没有开启Stencil
Properties
{
...
_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
}
...
SubShader {
Stencil
{
Ref[_Stencil]
Comp[_StencilComp]
Pass[_StencilOp]
ReadMask[_StencilReadMask]
WriteMask[_StencilWriteMask]
}
...
}
加入stencil后，需要设置对应的stencil id，这里需要取mask的stencil id
var mat = GetComponent<Image>().materialForRendering;
var stencilId = mat.GetInt("_Stencil")
// 通过materialForRendering获取渲染时材质，直接用material的话无法取到正确的材质
到这里就基本完成了功能，然而这也不是最完美的方案，比如所有动态头像公用同一个材质球，却处在不同的环境（有无mask）下时，stencil导致不应该有的问题（无mask下的也会被剪切掉），这就导致需要给每个头像动态创建材质，并且需要创建对象池管理。
好在我们可以通过扩展UGUI Image的默认shader。直接copy UI-Default.shader，加入uv偏移的代码，这样可以融入UGUI的生命周期，不需要我们去考虑各种情况下会出现的问题
Shader "UI/UISequenceFrame"
{
Properties
{
[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
_Color ("Tint", Color) = (1,1,1,1)
_RowAmount("RowAmount", float) = 4
_ColumnAmount("ColumnAmount", float) = 4
_Speed("Speed",Range(1, 100)) = 15
_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
}
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 "UISequenceFrame"
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 _RowAmount;
float _ColumnAmount;
float _Speed;
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
{
float time = floor(_Time.y * _Speed);
float row = floor(time / _RowAmount);
float column = time - row * _RowAmount;
half2 uv = IN.texcoord + half2(column, -row);
uv.x /= _RowAmount;
uv.y /= _ColumnAmount;
half4 color = (tex2D(_MainTex, uv) + _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
}
}
}
modify : 2021-7-20
应需求需要给动态头像添加置灰效果，故此在Shader中加入置灰相关逻辑
// 常用的置灰公式
color.r * 0.299 + color.g * 0.518 + color.b * 0.184
修改之前的shader，加入置灰相关处理
Shader "UI/UISequenceFrame"
{
Properties
{
[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
_Color ("Tint", Color) = (1,1,1,1)
_RowAmount("RowAmount", float) = 4
_ColumnAmount("ColumnAmount", float) = 4
_Speed("Speed",Range(1, 100)) = 15
_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
_GrayScale("Gray Scale", Range(0, 1)) = 1
[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 "UISequenceFrame"
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 _RowAmount;
float _ColumnAmount;
float _Speed;
float _GrayScale;
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
{
float time = floor(_Time.y * _Speed);
float row = floor(time / _RowAmount);
float column = time - row * _RowAmount;
half2 uv = IN.texcoord + half2(column, -row);
uv.x /= _RowAmount;
uv.y /= _ColumnAmount;
half4 color = (tex2D(_MainTex, uv) + _TextureSampleAdd) * IN.color;
fixed4 cc = 0;
cc.rgb = color.r * 0.299 + color.g * 0.518 + color.b * 0.184;
cc.rgb = lerp(color.rgb, cc.rgb, _GrayScale);
cc.a = color.a * _Color.a;
color = cc;
#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
}
}
}
扫一扫
632
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
