三、效果实现：8、水（1）波浪起伏

作者: GameObjectLgy | 来源:发表于2021-02-21 22:13 被阅读0次

三、效果实现：8、水（1）波浪起伏
iOS实现波浪效果
css实现充电式loading加载动画
iOS 波浪效果
小程序封装工具类
三、效果实现：8、水（2）透明效果
iOS实现波浪效果
波浪效果的实现
头像随波浪起伏的css效果
三、效果实现：8、水（4）波纹扰动效果

一、首先建立一个最基本的最简单的Shader

Shader "Customer/Water01"
{
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass
        {
            Name "FORWARD"
            Tags 
            {
                "LightMode"="ForwardBase"
            }
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"
            #pragma multi_compile_fwdbase_fullshadows
            #pragma target 3.0
            // 输入结构
            struct appdata
            {
                float4 vertex : POSITION;
            };
            // 输出结构
            struct v2f
            {
                float4 pos : SV_POSITION;   // 由模型顶点信息换算而来的顶点屏幕位置
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            // 输入结构>>>顶点Shader>>>输出结构
            v2f vert (appdata v)
            {
                v2f o = (v2f)0;// 新建一个输出结构
                o.pos = UnityObjectToClipPos(v.vertex);// 变换顶点信息 并将其塞给输出结构
                return o;   // 将输出结构 输出
            }
            // 输出结构>>>像素
            fixed4 frag (v2f i) : COLOR
            {
                return float4(0.0, 1.0, 0.0, 1.0);
            }
            ENDCG
        }
    }
}

这时候场景中shader的输出是绿色的。

二、分析做流水的思路

首先是要达到的效果：

可以设置水的颜色。比如河流多是浅绿色，海和池塘多事蓝色。
波浪效果
思路：UV顶点位置随时间做波形变化
水的透明效果
思路：对背景采样。
可以设置波浪形状。比如海浪，河浪，溪流波纹，池塘波纹等。
思路：采样波浪纹理。
有泡沫
思路：采样噪声
波纹扰动
思路：采样波纹纹理，并让波纹纹理流动起来
水的倒影（折射）
水的菲尼尔现象（反射）
岸边的边界线或者和物体接触的边界线
水的浮力（深度计算，暂时不做）

1、水的颜色这个很好做，开放一个可以设置颜色的参数即可。
2、波浪效果。
如果简单得用一个正弦波表示波形，那么波形就会显得比较单调，更好的做法就是采样一张波形纹理法线，用颜色的深度表示作为波浪的高度。然后让高度值随时间做一个波形变化即可达成。这里引出一个问题就是，波形能变动了，但是变动后的波形的光照效果如何做。这里需要用到的原理可以参照Unity自带的凹凸漫反射Shader做法。放到第二篇去做像素shader的内容。

Shader "Customer/Water01"
{
    Properties
    {
        _Color("Color水颜色", color) = (0,0,0.8,0.5)
        _WaveNormalMap("Wave Normal Map", 2D) = "bump"{}
        _WaveHeight("Wave Height",Range(0,1)) = 0.1
        _WaveNormalScale("Wave Scale", float) = 10.0
        _WaveNormalSpeed("Wave Speed", float) = 1.0
        _waveNumber("Wave Number",float) = 4
        _WaveTex("Wave Tex", 2D) = "black" {}
        _BigWaveSpeed("Big Wave Speed",float) = 10
        _BigWaveHeight("Big Wave Height",float) = 0.5
        _BigWaveNumber("Big Wave Number",float) = 10
    }
    SubShader
    {
        Tags
        {
            "Queue" = "Transparent"
            "RenderType" = "Transparent"
        }
        GrabPass{
            "_GrabPassTex"
        }
        LOD 100

        Pass
        {
            Name "FORWARD"
            Tags 
            {
                "LightMode"="ForwardBase"
            }
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"
             #include "Lighting.cginc" 
            #pragma multi_compile_fwdbase_fullshadows
            #pragma target 3.0

            float4 _Color;
            sampler2D _WaveNormalMap;
            fixed _WaveHeight;
            float _WaveNormalScale;
            fixed _WaveNormalSpeed;
            fixed _waveNumber;

            fixed _dividHeight;
            fixed _BigWaveSpeed;
            fixed _BigWaveHeight;
            fixed _BigWaveNumber;

            // 输入结构
            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
                float3 normal:NORMAL;//法线通常都是必须的
                float4 tangent : TANGENT;
                float3 color:COLOR0;
            };
            // 输出结构
            struct v2f
            {
                float4 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;   // 由模型顶点信息换算而来的顶点屏幕位置
                float depth : TEXCOORD2;
                float3 normal:NORMAL;//法线通常都是必须的
                float4 lightDir_Tangent:TEXCOORD5;
                float4 screenuv:TEXCOORD1;
                float3 viewDir:TEXCOORD3;
                float4 vertex_Local : TEXCOORD4;
                float3 color:COLOR0;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            // 输入结构>>>顶点Shader>>>输出结构
            v2f vert (appdata v)
            {
                v2f o;
                UNITY_INITIALIZE_OUTPUT(v2f, o);
                //获取自身深度值
                COMPUTE_EYEDEPTH(o.depth);

                float2 flow = float2(_Time.x*_WaveNormalSpeed, _Time.z*1.215*_WaveNormalSpeed);

                fixed3 n = UnpackNormal(tex2Dlod(_WaveNormalMap, float4(v.uv.xy*_WaveNormalScale + flow, 0, 0))).xyz;

                float height = 0;

                fixed wavebevel = 5;

                fixed attenuation = (1.0 - v.uv.y);

                fixed b = 0.8;
                fixed x = v.uv.y + b * sin(v.uv.y);
                if (v.vertex.y > _dividHeight)
                {
                    height = (cos(x*_BigWaveNumber - _Time.z*_BigWaveSpeed + v.uv.x*wavebevel) + 1)*0.5*_BigWaveHeight*attenuation;
                    height += (cos(x*_BigWaveNumber - _Time.z*_BigWaveSpeed + (1.0 - v.uv.x)*wavebevel) + 1)*0.5*_BigWaveHeight*attenuation;
                }
                v.vertex.y = v.vertex.y + n * _WaveHeight + height;

                if (v.vertex.y > _dividHeight)
                    v.vertex.z -= height * 0.1;

                o.vertex = UnityObjectToClipPos(v.vertex);
                                _FOG(o, o.vertex);
                return o;
            }
            // 输出结构>>>像素
            fixed4 frag (v2f i) : COLOR
            {
                float4 finalCol = _Color;
                //return finalCol;
                return float4(0.0, 1.0, 0.0, 1.0);
            }
            ENDCG
        }
    }
}

其中采用噪声纹理产生高度的代码是这句。
fixed3 n = UnpackNormal(tex2Dlod(_WaveNormalMap, float4(v.uv.xy*_WaveNormalScale + flow, 0, 0))).xyz;
（注：DepthMap纹理的采样通常用tex2Dlod）

float2 flow = float2(_Time.x_WaveNormalSpeed, _Time.z1.215_WaveNormalSpeed);
是为了让采样到的纹理值能随时间变动。
另外不用UnpackNormal这个反映射方法，用下面这种写法也是可以的：
//float tempN = tex2Dlod(_WaveNormalMap, float4(v.uv.xy_WaveNormalScale + flow, 0, 0)).g;这种写法也
//v.vertex.y = v.vertex.y + tempN * _WaveHeight + height;

通过采用深度，并做随时间上的变化，已经有了波浪的效果。波形随时间变化部分参照网上其他人的经验做法。