Shader Wave

Shader Wave

 

1、原理

　　1. 採用 UV 座標爲原始數據，生成每一條波浪線。

　　2. 使用 Unity 的 Time.y 做爲時間增量，動態變換波形。

2、操做步驟

　　1. 首先使用紋理座標生成一條線；

　　　　

　　　　紋理座標左下角爲(0,0)，右上角爲(1,1)，咱們先把紋理座標的中心位置(0,0)移動到圖中(0.5,0.5)的位置。　即紋理座標範圍由[0,1]變換到[-1,1]。

                float2 uv = i.uv;
                uv = uv*2.0 -1.0;                    

　　　　接着，縮小Y方向的值，例如咱們縮小150倍。那麼如今Y的範圍變換爲[-150,150]。在着色器中，只有[0,1]範圍類的值會被映射在正常的顏色空間，大於1的值，顏色空間按照1的值處理，小於0的值按0處理。如今咱們關心[0,150]範圍類的值。用顏色來表示，就是黑色到白色的過分，其中白色佔的比例比 149/150 還要多。咱們須要的是[0,1]之間的值，進行填充，着色。咱們將該區域的 uv.y 的值[0,150]取倒數。同理，負值區域同樣，只是多取了絕對值。

                float wave_width;
                wave_width = abs(1.0 / (150.0 * uv.y));  

　　2. 如今讓直線變成波形，利用uv.x的增量，產生波形，在使用Time.y的時間增量，讓波運動起來。

                float wave_width;
                float3 color1 = float3(0,0,0);

                for(float i=0.0; i<10.00; i++) 
                {  
                    uv.y += (0.07 * sin(uv.x + i/7.0 +  _Time.y));  //相位實現波不一樣的起點
                    wave_width = abs(1.0 / (150.0 * uv.y));  
                    color1.xyz += fixed3(wave_width, wave_width, wave_width);  
                }

3、源碼

　　

Shader "JQM/#Name#"
{
    //屬性快
    Properties
    {
        _Color("Base Color",Color) = (1,1,1,1)
    }

    
    SubShader
    {

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            
            #include "UnityCG.cginc"

            struct VertexOutput
            {
                float4 pos : SV_POSITION;
                float2 uv : TEXCOORD0;
                
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;

            float4 _Color;

            //頂點着色器
            VertexOutput vert (appdata_full v)
            {
                VertexOutput o;
                o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
                o.uv = v.texcoord.xy;
                return o;
            }

            //像素着色器
            fixed4 frag (VertexOutput i) : COLOR
            {

                float2 uv = i.uv;
                uv = uv*2.0 -1.0;
                float wave_width;

                float3 color1 = float3(0,0,0);

                for(float i=0.0; i<10.00; i++) 
                {  
                    uv.y += (0.07 * sin(uv.x + i/7.0 +  _Time.y));  
                    wave_width = abs(1.0 / (150.0 * uv.y));  
                    color1.xyz += fixed3(wave_width, wave_width, wave_width);  
                }


                return float4(color1.xyz,1)*_Color;
            }
            ENDCG
        }
    }
}

4、CG 函數

　　abs

　　　　取絕對值。

5、引用

　　http://blog.csdn.net/stalendp/article/details/21993227