这个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随着时间变化,宽度也会变化,所以最终呈现出这么绚丽的效果。
真的,我都惊呆了,给那些大神们献上膝盖。