我的shader学习之四

本篇文章依然是笔记

本文主要涉及unity uv动画的内容。实现一个波纹效果

我先贴代码吧

// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'

Shader "Custom/WaterRipple"
{
	Properties 
	{
		_MainTex ("纹理", 2D) = "white" {}
        _TexSize ("纹理宽高", vector) = (256, 256, 0, 0)
        _Amplitude ("振幅", Range(1, 64)) = 16
        _WaveLength ("波长", Range(1, 256)) = 64		//波长是正弦函数与x轴相邻交点的2倍（惭愧不记得了
        _Center ("中心", vector) = (0.5, 0.5, 0, 0)		//振幅是Asinx函数的A
        _Radius ("半径", Range(1, 512)) = 128
        _Phase ("相位", Range(0, 6.283185307)) = 0
        _Speed ("扩散速度", Range(0, 10)) = 5
	}
    
	SubShader 
	{
		Tags { "LightMode" = "ForwardBase" }
		Pass 
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			#include "UnityCG.cginc"
			#include "Lighting.cginc"
			sampler2D _MainTex;
            float2 _TexSize;
            float _Amplitude;
            float _WaveLength;
            float2 _Center;
            float _Radius;
            float _Phase;
            float _Speed;
			float4 _MainTex_ST;			//需要一个纹理_ST用于计算uv

			struct v2f
			{
				float4 pos : SV_POSITION;		//裁剪空间坐标
				float2 uv : TEXCOORD0; 
			};
			//这里没有写vertex的输入数据结构，而是使用了appdata_full这个内置变量
			//这个东西是UnityCG.cginc的结构体
			//类似的东西有 appdata_base 顶点位置（模型空间），法线，一个纹理坐标
			//appdata_full 顶点位置，切线，法线，两个纹理坐标
			//appdata_tan	顶点位置，切线，法线，一个纹理坐标
			//appdata_img 	顶点位置，一个文理坐标
			v2f vert(appdata_full  v)
			{
				v2f o;
				o.pos = UnityObjectToClipPos(v.vertex);		//mvp切换成裁剪空间
				o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);	//这个也是一个内置函数，用于计算uv
				//#define TRANSFORM_TEX(tex,name) (tex.xy * name##_ST.xy + name##_ST.zw)
				return o;
			}


			fixed4 frag(v2f i) : COLOR
			{
                float dx = (i.uv.x - _Center.x) * _TexSize.x;		//计算实际差距 Center是一个0-1的变量，uv也是0-1的
                float dy = (i.uv.y - _Center.y) * _TexSize.y;
                float distance2 = dx * dx + dy * dy;		//计算距离
                float radius2 = _Radius * _Radius;
                
                if (distance2 > radius2)
                {
                    float4 col = tex2D(_MainTex, i.uv);		//远的话就无视，直接采样
                    return col;
                }
                else
                {
                    float distance = sqrt(distance2);			//实际距离
					//关键是下面的uv计算
                    float amount = _Amplitude * sin(distance / _WaveLength * 6.283185307 - _Phase - _Speed * _Time.y);  //-_Amplitude到+_Amplitude
                   // amount *= (_Radius - distance) / _Radius;		//半径位置相对比例	约远这个值越小
                    if (distance != 0)
                    {
                        //amount *= _WaveLength / distance;
                    }
                   // float2 uv = float2(i.uv.x + dx * amount / _TexSize.x, i.uv.y + dy * amount / _TexSize.y);
				   float2 uv = float2(i.uv.x - 0.1*amount, i.uv.y - 0.1*amount);
					//这里的值里 dx/_TexSize.x的实际结果就是uv上从这点到波动中心的比例值，也就是实际上的xy坐标要有一定的偏移，偏移根据时间相关
					//偏移的范围就是-_Amplitude到+_Amplitude，如果没注释两段计算，就会调整这个偏移的范围
                    float4 col = tex2D(_MainTex, uv);			//采样
                    return col;
                }
			}
			ENDCG
		}
	}
	FallBack "Diffuse"
}

这篇文章中，顶点着色器里做的事情只是去获取uv，在fragment shader里做的事情比较多主要是uv的计算，这里主要是3段计算

本质就是根据时间变量来修正uv的坐标

首先是要根据uv来计算距离中心点的坐标，这个中心点是一个([0-1][0-1])的二维变量，如果距离超过半径就直接tex2D采样。

如果在半径内就要偏移uv。

float2 uv = float2(i.uv.x + dx * amount / _TexSize.x, i.uv.y + dy * amount / _TexSize.y);

这一句换成float2 uv = float2(i.uv.x - 0.1*amount, i.uv.y - 0.1*amount);效果是有差距的，但是也不是那么明显。

这个amout是根据正弦函数得到。

float amount = _Amplitude * sin(distance / _WaveLength * 6.283185307 - _Phase - _Speed * _Time.y);  

这个值实际就是-_Amplitude到+_Amplitude，里面的_WaveLength控制的是波长即波浪的平缓程度，这个值增加的时候波浪越平，这个东西实际也会影响纹理的扭动