11.Wave Shader

这个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随着时间变化,宽度也会变化,所以最终呈现出这么绚丽的效果。

真的,我都惊呆了,给那些大神们献上膝盖。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值