图形特效编程---表面着色器入门

一、通过时间参数扰动纹理坐标，实现纹理的扭曲动画扭曲方式自定义

提示： 使用_Time，_SinTime或_CosTime

实现原理：把场景渲染到纹理上，再对RT纹理进行扭曲变换，输出到屏幕

扭曲

参考代码及原理：

代码： 

Shader "Custom/warp"
{
    Properties
    {
        _MainTex("Texture", 2D) = "white" {}
        _Radius("_Radius",Float) = 1
    }
        SubShader
        {
            // No culling or depth
            Cull Off ZWrite Off ZTest Always

            Pass
            {
                CGPROGRAM
                #pragma vertex vert
                #pragma fragment frag

                #include "UnityCG.cginc"

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

                struct v2f
                {
                    float2 uv : TEXCOORD0;
                    float4 vertex : SV_POSITION;
                };

                v2f vert(appdata v)
                {
                    v2f o;
                    o.vertex = UnityObjectToClipPos(v.vertex);
                    o.uv = v.uv;
                    return o;
                }

                sampler2D _MainTex;
                float _Radius;   //扭曲的弧度

                float2 whirl(float2 uv) {

                    //坐标系从左下角变换到中心
                    uv += float2(-0.5, -0.5);

                    //弧度值 X UV点到中心的距离 X 时间变化
                    float tempRad = _Radius * _Time.y * length(uv);

                    //旋转矩阵
                    float2x2 TransMatrix = {
                        cos(tempRad),sin(tempRad),-sin(tempRad),cos(tempRad)
                    };

                    //对UV进行旋转变换
                    float2 uv2 = mul(TransMatrix, uv);

                    //映射回原来的坐标空间
                    uv2 += float2(0.5, 0.5);

                    return uv2;
                }

                fixed4 frag(v2f i) : SV_Target
                {
                    fixed4 col = tex2D(_MainTex, whirl(i.uv));
                    return col;
                }
                ENDCG
            }
        }
    FallBack "Diffuse"
}

二、通过时间参数扰动纹理坐标，使用水面纹理实现水流动画引入噪声纹理，对水流方向进行随机扰动

提示： 使用一个_Amount属性控制噪声影响因子

流水

实现原理：
找一张水波的贴图，处理它的uv值，让贴图流动起来。这样就用静态纹理和uv动画模拟出了动态水流动的效果。

在unity中实现一个水面扰动的效果，这里用到了UV移动，和uv扰动这里我组合了这两个shader实现了一个水面扰动的效果，使用了一个波纹纹理，然后用一张2维噪声扰动uv。

实现要点：
贴图流动的实质就是uv偏移，图片各个部分的偏移程度有区别（可以借助噪声图让uv偏移程度具有随机性的区别）就实现了扭曲效果。让偏移程度与时间相关，就会有种贴图随着时间发生流动的感觉。

代码：

Shader "Custom/NewSurfaceShader"
{
    Properties
    {
        _MainTex("MainTex", 2D) = "white" {}
        _NoiseTex("NoiseTex", 2D) = "white" {}
        _Intensity("intensity", float) = 0.1
        _XSpeed("Flow Speed", float) = -0.2
    }
        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;
                sampler2D _NoiseTex;
                float _Intensity;
                float _XSpeed;
                v2f vert(appdata v)
                {
                    v2f o;
                    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 noise_col = tex2D(_NoiseTex, i.uv + fixed2(_Time.y * _XSpeed, 0));
                    fixed uOffset = noise_col.r;
                    fixed vOffset = noise_col.r;
                    fixed4 col = tex2D(_MainTex, i.uv + _Intensity * fixed2(uOffset, vOffset));
                    // apply fog
                    UNITY_APPLY_FOG(i.fogCoord, col);
                    return col;
                }
                ENDCG
            }
        }
            FallBack "Diffuse"
}