这个shader是在这位博主点击打开链接的文章基础上进行修改得到的,原作是在shadertoy网站上。不得不说,被shadertoy上的大神们震精了,真的是令我叹为观止,啥也不说了,慢慢学吧。
shader的效果:
Shader的代码如下,甚是短小精悍
Shader "Study/11_Waves"
{ //see https://www.shadertoy.com/view/4dsGzH
Properties
{
_Color("Main Color", Color) = (1,1,1,0.5)
}
SubShader
{
Tags{ "Queue" = "Transparent" "RenderType" = "Transparent" }
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
float4 _Color;
struct v2f
{
float4 pos : SV_POSITION;
float4 srcPos : TEXCOORD0;
};
float4 _MainTex_ST;
v2f vert(appdata_base v)
{
v2f o;
o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
o.srcPos = ComputeScreenPos(o.pos);
return o;
}
half4 frag(v2f i) : COLOR
{
fixed3 COLOR1 = fixed3(0.0,0.0,0.3);
fixed3 COLOR2 = fixed3(0.5,0.0,0.0);
float BLOCK_WIDTH = 0.03;
float2 uv = (i.srcPos.xy / i.srcPos.w);
fixed3 final_color = fixed3(1,1,1);
fixed3 bg_color = fixed3(0,0,0);
fixed3 wave_color = fixed3(0,0,0);
// TO create the waves
float wave_width = 0.01;
uv = -1.0 + 2.0*uv;
uv.y += 0.1;
for (float i = 0.0; i<7.0; i++)
{
uv.y += (0.07 * sin(uv.x + i / 7.0 + _Time.y));
wave_width = abs(1.0 / (150.0 * uv.y));
wave_color += fixed3(wave_width * 1.9, wave_width, wave_width * 1.5);
}
final_color = bg_color + wave_color;
return fixed4(final_color, 1.0);
}
ENDCG
}
}
}
这个shader精髓,是数学的魅力,原博主也只是简单的分析了一下,最精髓的其实是这个for循环里的这三行,其他的就不细说了,参考那位博主的文章吧。
uv.y += (0.07 * sin(uv.x + i / 7.0 + _Time.y));
wave_width = abs(1.0 / (150.0 * uv.y));
wave_color += fixed3(wave_width * 1.9, wave_width, wave_width * 1.5);
这三行只能用精妙来形容。整个shader,不仅仅是位移,连发光效果的颜色都是通过短短这三句来控制的。
第一行,根据uv.x和绘制线的条数来控制uv.y,+=号保证了多条线的间隔。如果是等于号,则相同的uv.x下将得到同样的color,效果就会类似是一个移动的大长方体:
第二行,根据uv,y计算线的宽度。这又很精妙。。。运用除法运算,1除以uv,y和一个常数的积。当uv,y大于一个常数后,也就是乘积大于1之后,宽度将永远是0,第三行最后计算出来的color也是背景色,这就是控制显示范围和线条宽度变化的地方。
第三行就不说了,根据宽度计算颜色,因为宽度不同,计算出的颜色也会不同。而因为uv,y随着时间变化,宽度也会变化,所以最终呈现出这么绚丽的效果。
真的,我都惊呆了,给那些大神们献上膝盖。