Shader Wave

Shader Wave

 

一、原理

　　1. 采用 UV 坐标为原始数据，生成每一条波浪线。

　　2. 使用 Unity 的 Time.y 作为时间增量，动态变换波形。

二、操作步骤

　　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);  
                }

三、源码

　　

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
        }
    }
}

四、CG 函数

　　abs

　　　　取绝对值。

五、引用

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