LOGO闪光效果

这篇文章针对之前的问题修改了该Shader，并将各个变量作为Shader面板中的可调节变量，实现了闪光效果的可视化编辑。下面我们来详细学习LOGO闪光效果。

代码

Shader "Custom/LogoFlash" {
Properties {
_MainTex ("Base (RGB)", 2D) = "white" {}
_FlashColor ("Flash Color", Color) = (1,1,1,1)
_Angle ("Flash Angle", Range(0, 180)) = 45
_Width ("Flash Width", Range(0, 1)) = 0.2
_LoopTime ("Loop Time", Float) = 1
_Interval ("Time Interval", Float) = 3
//_BeginTime ("Begin Time", Float) = 2
}
SubShader {
Tags { "Queue"="Transparent" "RenderType"="Transparent" }

CGPROGRAM
#pragma surface surf Lambert alpha exclude_path:prepass noforwardadd
//#pragma target 3.0

sampler2D _MainTex;
float4 _FlashColor;
float _Angle;
float _Width;
float _LoopTime;
float _Interval;
//float _BeginTime;

struct Input {
half2 uv_MainTex;
};

float inFlash(half2 uv) {
float brightness = 0;

float angleInRad = 0.0174444 * _Angle;
float tanInverseInRad = 1.0 / tan(angleInRad);

//float currentTime = _Time.y – _BeginTime;
float currentTime = _Time.y;
float totalTime = _Interval + _LoopTime;
float currentTurnStartTime = (int)((currentTime / totalTime)) * totalTime;
float currentTurnTimePassed = currentTime - currentTurnStartTime - _Interval;

bool onLeft = (tanInverseInRad > 0);
float xBottomFarLeft = onLeft? 0.0 : tanInverseInRad;
float xBottomFarRight = onLeft? (1.0 + tanInverseInRad) : 1.0;

float percent = currentTurnTimePassed / _LoopTime;
float xBottomRightBound = xBottomFarLeft + percent * (xBottomFarRight - xBottomFarLeft);
float xBottomLeftBound = xBottomRightBound - _Width;

float xProj = uv.x + uv.y * tanInverseInRad;

if(xProj > xBottomLeftBound && xProj < xBottomRightBound) {
brightness = 1.0 - abs(2.0 * xProj - (xBottomLeftBound + xBottomRightBound)) / _Width;
}

return brightness;
}

void surf (Input IN, inout SurfaceOutput o) {
half4 texCol = tex2D(_MainTex, IN.uv_MainTex);
float brightness = inFlash(IN.uv_MainTex);

o.Albedo = texCol.rgb + _FlashColor.rgb * brightness;
o.Alpha = texCol.a;
}
ENDCG
}
FallBack "Unlit/Transparent"
}

编译成功后，材质面板如图所示（此处原文未给出图，若有图可补充）。

各变量意义

• Base (RGB)：LOGO的png图片
• Flash Color：闪光条的光颜色
• Flash Angle：闪光条的角度，范围是0到180°
• Flash Width：闪光条宽度，范围是0到1.0
• Loop Time：闪光条滚动一次的时间
• Time Interval：两次相邻的闪光条滚动的时间间隔

效果

颜色偏暗的问题

有读者在下面留言说，上述得到的效果中LOGO颜色会偏暗，我原来还真没发现这个问题。其实这个问题很好解决，只需要在surf函数里计算颜色值的时候多乘一点参数就可以了，比如：

o.Albedo = texCol.rgb * 1.2 + _FlashColor.rgb * brightness;

这个原理很简单，就是让颜色更亮而已，这个方法也经常被用于Diffuse等Shader的渲染中。更新后的效果如下（此处原文未给出图，若有图可补充）。

移动平台优化的问题

上述的Shader使用了大量的计算，包括乘法和除法等，这对于移动平台来说非常消耗资源，经常会报寄存器不够的错误。为了优化，我一开始对乘法和除法进行了大量优化，包括少使用临时变量、尽量少使用除法等。最后结果是刚刚够用。但是，如果在上述计算颜色时多乘一个参数，就又会超过寄存器限制。

所幸的是，前几天学习了Shader对手机优化的内容，可参见这篇博文（此处原文未给出链接，若有可补充）。在优化了#pragma后，Shader又重新得以运行。

当然，如果你面对的是PC平台，这些问题就不是问题了。只需要把下面这句话的注释去掉即可：

//#pragma target 3.0

这句话表明我们可以使用更多的寄存器，具体可见官网解释（此处原文未给出官网链接，若有可补充）。