这篇文章针对上面的问题修改了该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后,又重新得以运行。。。



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

// #pragma target 3.0

这句话表明我们可以使用更多的寄存器了。具体可见官网解释。