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

来源：互联网发布：已备案过期域名查询编辑：程序博客网时间：2024/05/17 01:21

在Shader中，波形可以作为一种模拟动态的手段，例如颜色的波动，形状的波动，可以基于此创作出各种效果。
下文介绍几种基本波形以及变种的Shader实现代码，并配以函数图像和简单动画效果图。在效果图中，Shader代码计算出y值，在顶点着色器中赋给顶点的y坐标，或在片段着色器中插值后乘以颜色。

波形公式中参数的说明：

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.0f*3.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

效果图中模型的顶点的uv，x值以0.1向同一方向递增。

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));                //Chang    //          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));                //Chang    //          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.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
————————————————————————————————
维护日志：

阅读全文

0 0