Unity Shader:Waveform波形(2)-基本波形:正弦,三角,锯齿,直角以及其变种的实现方式

概述

在Shader中,波形可以作为一种模拟动态的手段,例如颜色的波动,形状的波动,可以基于此创作出各种效果。
下文介绍几种基本波形以及变种的Shader实现代码,并配以函数图像和简单动画效果图。在效果图中,Shader代码计算出y值,在顶点着色器中赋给顶点的y坐标或在片段着色器中插值后乘以颜色。效果图中利用了一个细长条网格,它的uv.x的两端为0和一个与它长度等比例的一个较大的值。

波形公式中参数的说明:

base:基点。波形的起始点。振幅从此点开始计算。
amplitude:振幅。振幅越大,波形峰值越大或谷值越小。
phase:相位。决定波形的起始值。波形随着phase整体平移。
freq:频率。单位时间内波形重复的次数。

每个参数的具体作用分析可见上一篇文章

正弦家族 Sin Family:

完美正弦 Perfect Sin:

公式描述:y=sin(x*freq+phase)*amplitude+base
Shader代码:y=sin(fmod(v.uv.x,1.0f)2.0f3.1415926f+_Time.y);
这里写图片描述
这里写图片描述

山形 Hill:

公式描述:y=abs(sin(x*freq+phase))*amplitude+base
Shader代码:y=abs(sin(fmod(v.uv.x,1.0f)*3.1415926f+_Time.y));
这里写图片描述
这里写图片描述

倒转山行 Inverse Hill:

公式描述:y=(1-abs(sin(x*freq+phase)))*amplitude+base
Shader代码:y=1.0f-abs(sin(fmod(v.uv.x,1.0f)*3.1415926f+_Time.y));
这里写图片描述
这里写图片描述

锯齿家族 Sawtooth Family:

锯齿 SawTooth:

公式描述:y=max(min(((x+phase) mod freq),1),0)*amplitude+base
Shader代码:y=saturate(fmod(v.uv.x+_Time.y,1.0f));
这里写图片描述
这里写图片描述

倒转锯齿 Inverse SawTooth:

公式描述:y=(max(min(((x+phase) mod freq),1),0))*amplitude+base
Shader代码:y=1-saturate(fmod(v.uv.x+_Time.y,1.0f));
这里写图片描述
这里写图片描述

指数锯齿 Exponential SawTooth:

公式描述:y=max(min(((x+phase) mod freq)^exp,1),0)*amplitude+base
Shader代码:y=saturate(pow(frac(v.uv.x+_Time.y),10.0f));
这里写图片描述
这里写图片描述

倒转指数锯齿 Inverse Exponential SawTooth:

公式描述:y=(1-max(min(((x+phase) mod freq)^exp,1),0))*amplitude+base
Shader代码:y=1-saturate(pow(fmod(v.uv.x+_Time.y,1.0f),10.0f));
这里写图片描述
这里写图片描述

饱和指数锯齿 Saturate Exponential SawTooth:

公式描述:y=min(max(min(((x+phase) mod freq)^10,1),0)*100,1)*amplitude+base
类似于指数锯齿,但单位时间内波形达到峰值时间更长
Shader代码:y=saturate(saturate(pow(fmod(x+_Time.y,1.0f),10.0f))*100.0f);
这里写图片描述
这里写图片描述

三角形家族

三角形 Triangle

公式描述:y=abs(((x*freq+phase) mod 1)*2-1)*amplitude+base
Shader代码:y=abs(fmod(x+_Time.y,1.0f)*2.0f-1.0f);
这里写图片描述
这里写图片描述

梯形 Trapezium

公式描述:y=min(abs(((x*freq+phase)mod1)*2-1)*2,1)*amplitude+base
Shader代码:y=saturate(abs(fmod(x+_Time.y,1.0f)*2.0f-1.0f)*2.0f);
这里写图片描述
这里写图片描述

倒转梯形/不连续三角形 Inverse Trapezium/Discrete Triangles

公式描述:y=(1-min(abs(((x*freq+phase)mod 1)*2-1)*2,1))*amplitude+base
Shader代码:y=1-saturate(abs(fmod(x+_Time.y,1.0f)*2.0f-1.0f)*2.0f);
这里写图片描述
这里写图片描述

直角家族

直角

公式描述:y=round(sin(x*freq+phase))*amplitude+base
Shader代码:y=round(sin(x+_Time.y));
这里写图片描述
这里写图片描述

效果图中使用的Shader

顶点波动动画:

Shader "Unlit/WaveformTest"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
	}
	SubShader
	{
		Tags { "RenderType"="Opaque" }
		LOD 100

		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			// make fog work
			#pragma multi_compile_fog
			
			#include "UnityCG.cginc"

			struct appdata
			{
				float4 vertex : POSITION;
				float2 uv : TEXCOORD0;
			};

			struct v2f
			{
				float2 uv : TEXCOORD0;
				UNITY_FOG_COORDS(1)
				float4 vertex : SV_POSITION;
			};

			sampler2D _MainTex;
			float4 _MainTex_ST;
			
			v2f vert (appdata v)
			{
				v2f o;
				float phase=_Time.y;
				float y;
				float x=v.uv.x;
				//perfect sin
				//y=sin(fmod(v.uv.x,1.0f)*2.0f*3.1415926f+phase);
				//hill
				//y=abs(sin(fmod(v.uv.x,1.0f)*3.1415926f+phase));
				//inverse hill
				//y=1.0f-abs(sin(fmod(v.uv.x,1.0f)*3.1415926f+phase));
				//SawTooth
				//y=saturate(fmod(v.uv.x+phase,1.0f));
				//Inverse SawTooth
				//y=1-saturate(fmod(v.uv.x+phase,1.0f));
				//Exponential SawTooth
				//y=saturate(pow(frac(v.uv.x+phase),10.0f));
				//Inverse Exponential SawTooth
				//y=1-saturate(pow(fmod(v.uv.x+phase,1.0f),10.0f));
				//Saturate Exponential SawTooth
				//y=saturate(saturate(pow(fmod(x+phase,1.0f),10.0f))*100.0f);
				//Triangle
				//y=abs(fmod(x+phase,1.0f)*2.0f-1.0f);
				//Tapezoid
				//y=saturate(abs(fmod(x+phase,1.0f)*2.0f-1.0f)*2.0f);
				//Discontinuous Triangles/Inverse Trapezoid
				//y=1-saturate(abs(fmod(x+phase,1.0f)*2.0f-1.0f)*2.0f);
				//Square
				y=round(sin(x+phase));
				
    			v.vertex.y=y;
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);
				UNITY_TRANSFER_FOG(o,o.vertex);
				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{
				// sample the texture
				fixed4 col = tex2D(_MainTex, i.uv);
				// apply fog
				UNITY_APPLY_FOG(i.fogCoord, col);
				return col;
			}
			ENDCG
		}
	}
}

颜色波动动画:

Shader "Unlit/WaveformTestFrag"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
		_Color("Color",color)=(1,1,1,1)
	}
	SubShader
	{
		Tags { "RenderType"="Opaque" }
		LOD 100

		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			// make fog work
			#pragma multi_compile_fog
			
			#include "UnityCG.cginc"

			struct appdata
			{
				float4 vertex : POSITION;
				float2 uv : TEXCOORD0;
			};

			struct v2f
			{
				float2 uv : TEXCOORD0;
				float y:FLOAT;
				UNITY_FOG_COORDS(1)
				float4 vertex : SV_POSITION;
			};

			sampler2D _MainTex;
			float4 _MainTex_ST;
			fixed4 _Color;
			
			v2f vert (appdata v)
			{
				v2f o;
				float phase=_Time.y;
				float y;
				float x=v.uv.x;
				//perfect sin
				//y=sin(fmod(v.uv.x,1.0f)*2.0f*3.1415926f+phase);
				//hill
				//y=abs(sin(fmod(v.uv.x,1.0f)*3.1415926f+phase));
				//inverse hill
				//y=1.0f-abs(sin(fmod(v.uv.x,1.0f)*3.1415926f+phase));
				//SawTooth
				//y=saturate(fmod(v.uv.x+phase,1.0f));
				//Inverse SawTooth
				//y=1-saturate(fmod(v.uv.x+phase,1.0f));
				//Exponential SawTooth
				//y=saturate(pow(frac(v.uv.x+phase),10.0f));
				//Inverse Exponential SawTooth
				//y=1-saturate(pow(fmod(v.uv.x+phase,1.0f),10.0f));
				//Saturate Exponential SawTooth
				//y=saturate(saturate(pow(fmod(x+phase,1.0f),10.0f))*100.0f);
				//Triangle
				//y=abs(fmod(x+phase,1.0f)*2.0f-1.0f);
				//Tapezoid
				//y=saturate(abs(fmod(x+phase,1.0f)*2.0f-1.0f)*2.0f);
				//Discontinuous Triangles/Inverse Trapezoid
				//y=1-saturate(abs(fmod(x+phase,1.0f)*2.0f-1.0f)*2.0f);
				//Square
				y=round(sin(x+phase));

    			o.y=y;
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);
				UNITY_TRANSFER_FOG(o,o.vertex);
				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{
				// sample the texture
				fixed4 col = tex2D(_MainTex, i.uv);
				// apply fog
				UNITY_APPLY_FOG(i.fogCoord, col);
				return _Color*i.y;
			}
			ENDCG
		}
	}
}

参考:
Algorithmic drawing,Patricio Gonzalez Vivo https://thebookofshaders.com/05/
Quake3 Arena Shader Manual Revision#12, Paul Jaquays and Brian Hook
Tilt Brush, Google
维护日志:
2020-8-15:review

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值