Shader入门-03

前言

借由 Unity Shader 实战学习 Shader ！

带完整注释，一起学习 💪

效果

从圆心慢慢荡漾开的水波，有高低起伏感

代码

附件：
1. 高面数平面

链接：https://pan.baidu.com/s/1EObyLpQZDsQUXAxXS_QVtg 提取码：ij83

Shader "Unlit/AloeaShader04"
{
    Properties
    {
        _WaveAmp ("Wave Amplitude", Range(0, 0.1)) = 0.05
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
  
            #include "UnityCG.cginc"
  
            float _WaveAmp;
  
            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

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

            // 顶点着色器和片段着色器需要使用同样的波动计算，以保证高度上的变化和颜色始终一致
            float getWave ( float2 uv ) {
                float2 uvsCenter = uv * 2 - 1; // 计算中心点, uv 的范围是 0 ~ 1
                float distance = length( uvsCenter ); // 此顶点距离中心点的距离
                // PlanA：主计算处，根据距离形成波动，叠加上动画效果
                float wave = cos((distance - _Time.y * 0.1 ) * 30);
                // PlanB: 数值约束到 0 ~ 1 抖动更小
                // float wave = cos((distance - _Time.y * 0.1) * 30) * 0.5 + 0.5;
                wave *= 1 - distance; // 渐变，距离中心越远数值越小（越接近黑色）
                return wave;
            }

            v2f vert (appdata v)
            {
                v2f o;

                v.vertex.y = getWave(v.uv) * _WaveAmp; // 乘以波动的系数

                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                return getWave(i.uv);
            }
            ENDCG
        }
    }
}

细节

效果调试过程

步骤一：找圆心点

fixed4 frag (v2f i) : SV_Target
{
	// i.uv.xy 的范围是 0 ~ 1，期望找到 (0.5, 0.5) 的位置为 0，结果范围 -1 ~ 1
	// Q.为什么不是 i.uv - 0.5 ？也是可以的，这样结果范围是 -0.5 ~ 0.5，得到效果的波纹间距更大
	return float4(i.uv * 2 - 1, 0, 0); 
}

步骤二：绘制波动的圆心环

fixed4 frag (v2f i) : SV_Target
{
	float2 uvsCenter = i.uv * 2 - 1; // 中心点
	float distance = length( uvsCenter ); // 此顶点距离中心点的距离
	float wave = cos((distance - _Time.y * 0.1 ) * 30) * 0.5 + 0.5; // cos 形成波动，结果范围 0 ~ 1，0 ~ 1 ~ 0 变化的过程就会形成视觉上的涟漪
	return wave;

步骤三：顶点坐标位移赋予一样的波动

// wave 方法封装，顶点着色器和片段着色器都用到
float getWave ( float2 uv ) {
	float2 uvsCenter = uv * 2 - 1; // 中心点
	float distance = length( uvsCenter ); // 此顶点距离中心点的距离
	float wave = cos((distance - _Time.y * 0.1 ) * 30) * 0.5 + 0.5; // cos 形成波动，结果范围 0 ~ 1，0 ~ 1 ~ 0 变化的过程就会形成视觉上的涟漪
	return wave;
}

// 顶点着色器
v2f vert (appdata v)
{
	v2f o;
	v.vertex.y = getWave(v.uv) * 0.1;  // y 轴方向顶点位移波动

	o.vertex = UnityObjectToClipPos(v.vertex);
	o.uv = v.uv;
	return o;
}

步骤三：效果参数调优

float getWave ( float2 uv ) {
	float2 uvsCenter = uv * 2 - 1;
	float distance = length( uvsCenter );
	// PlanA：主计算处，根据距离形成波动，叠加上动画效果
	float wave = cos((distance - _Time.y * 0.1 ) * 30); // 数值范围改为 -1 ~ 1, 这样黑色的部分更多些（0以下都是黑色）
	wave *= 1 - distance; // 渐变，距离中心越远数值越小（越接近黑色，高度越低）
	return wave;

}