简单实现卡通水面渲染 Shader

简单实现卡通水面渲染 Shader

前言

上一篇是实现了pbr的水面效果，这次延申拓展一下实现一下卡通的水面效果。

效果截图

动图效果：

大致思路

normal的流动 + 菲涅尔lerp + 多阶色 + 反射 + 折射 + 水沫扭曲 + 水沫流动 + Gerstner算法

属性

        _Diff_Set ("漫反射调节", Range(0, 10)) = 1.71
        _SpecSet ("高光调节", Range(0, 10)) = 3.33
        _SpecRange ("高光范围", Range(0, 10)) = 1.55
        _NormalMap ("法线贴图", 2D) = "bump" {}
        [Space][Space][Space][Space][Space][Space][Space][Space]
        _uv_scale_1 ("uv大小调节（R）", Range(0, 3)) = 0.5
        _uv_scale_2 ("uv大小调节（G）", Range(0, 3)) = 0.5
        _uv_sclae_3 ("uv大小调节（B）", Range(0, 3)) = 0.5
        _UV_Speed_1 ("uv速度调节（R）", Range(0, 1)) = 0.05
        _UV_Speed_2 ("uv速度调节（G）", Range(0, 1)) = 0.005
        _UV_Speed_3 ("uv速度调节（B）", Range(0, 1)) = 0.01
        _normal1 ("法线强度（R）", Range(0, 3)) = 1
        _normal2 ("法线强度（G）", Range(0, 3)) = 1
        _normal3 ("法线强度（B）", Range(0, 3)) = 1
        [Space][Space][Space][Space][Space][Space][Space][Space]
        _water_color ("水颜色", Color) = (0,0.5656692,0.8455882,1)
        [HideInInspector]_fre_int ("_fre_int", Range(0, 3)) = 1.51
        _FresRange ("折射范围", Range(0, 3)) = 1
        [Space][Space][Space][Space][Space][Space][Space][Space]
        _colorNear ("颜色远", Color) = (0,0.8235294,0.7894523,1)
        _colorFar ("颜色近", Color) = (0.02205884,0.1502028,1,1)
        _Alpha ("透明度", Range(0, 1)) = 0.441
        _refSet ("折射调节", Range(0, 5)) = 0.5
        _specColor ("高光颜色", Color) = (0,0,0,1)
        _diffStep ("漫反射层级", Range(0, 5)) = 2
        _specStep ("高光层级", Range(0, 5)) = 0
        [Space][Space][Space][Space][Space][Space][Space][Space]
        __RefTex ("反射RT", 2D) = "black" {}
        _flcSet ("反射调节", Range(0, 1)) = 0.25
        _ReflDistort ("反射扰动", Range (0,3.5)) = 1.52

        [Space][Space][Space][Space][Space][Space][Space][Space]
        _FoamTex("水沫", 2D) = "black" {}
        _FoamSpeedU("水沫速度1", Float) = 0.1
        _FoamSpeedV("水沫速度2", Float) = 0.1
        _FoamDistort("水沫速度扰动", Range(0,2)) = 0.05
        _FoamLight1("水沫亮度1", Range(0,1)) = 0.067
        _FoamLight2("水沫亮度2", Range(1,15)) = 6.08
        _FoamColor("水沫颜色", Color) = (1,1,1,1)

计算normal

                float2 uv1 = ((i.uv0*_uv_scale_1)+(_Time*_UV_Speed_1)*float2(1,1));
                float3 tex1RGB = UnpackNormal(tex2D(_NormalMap,TRANSFORM_TEX(uv1, _NormalMap)));
                float2 uv2 = ((_uv_scale_2*i.uv0)+(_Time*_UV_Speed_2)*float2(1,-1));
                float3 tex2RGB = UnpackNormal(tex2D(_NormalMap,TRANSFORM_TEX(uv2, _NormalMap)));
                float2 uv3 = ((_uv_sclae_3*i.uv0)+(_Time*_UV_Speed_3)*float2(-1,1));
                float3 tex3RGB = UnpackNormal(tex2D(_NormalMap,TRANSFORM_TEX(uv3, _NormalMap)));
                float3 normalLocal = (float3((tex1RGB.r*_normal1),(tex1RGB.g*_normal1),tex1RGB.b)+float3((tex2RGB.r*_normal2),(tex2RGB.g*_normal2),tex2RGB.b)+float3((_normal3*tex3RGB.r),(_normal3*tex3RGB.g),tex3RGB.b));

计算菲涅尔反射

float Fresnel = saturate(pow((dot(ViewDir,normalDir)*_fre_int),_FresRange));

反射RT

                i.refl.xy += normalLocal * _ReflDistort;
                float4 __RefTex_var = tex2Dproj(__RefTex, UNITY_PROJ_COORD(i.refl));

水沫部分

                half4 foamC = tex2D(_FoamTex,normalLocal.xy * _FoamDistort + i.uvFoam);
                half foam = pow((foamC.r + foamC.g + foamC.b) * 0.333 + _FoamLight1, _FoamLight2);
                float4 foamRgb = float4(foam * _FoamColor.rgb,1);

菲涅尔深浅色lerp + 水沫 + 多阶色

float3 finalColor = ((lerp(tex2D( _GrabTexture, (0.05*(((_refSet*(saturate(dot(normalLocal,float3(0.3,0.59,0.11)))-0.5))+0.5) - 0.5)*mul(tangentTransform, ViewDir).xy + sceneUVs.rg).rg).rgb,((_water_color.rgb*((_Diff_Set*(0.2 + floor(max(0,dot(ViewDir,normalDir)) * _diffStep) / (_diffStep - 1)))+(pow((_SpecSet*floor((max(0,dot(ViewDir,normalDir))*max(0,dot(normalDir,lightDir))) * _specStep) / (_specStep - 1)),_SpecRange)*_specColor.rgb)))+lerp(_colorFar.rgb,_colorNear.rgb,Fresnel)),_Alpha)+(__RefTex_var.rgb * _flcSet))+ foamRgb.rgb);

Shader源码

Shader "Toon/ToonWater" {
    Properties {
        _Diff_Set ("漫反射调节", Range(0, 10)) = 1.71
        _SpecSet ("高光调节", Range(0, 10)) = 3.33
        _SpecRange ("高光范围", Range(0, 10)) = 1.55
        _NormalMap ("法线贴图", 2D) = "bump" {}
        [Space][Space][Space][Space][Space][Space][Space][Space]
        _uv_scale_1 ("uv大小调节（R）", Range(0, 3)) = 0.5
        _uv_scale_2 ("uv大小调节（G）", Range(0, 3)) = 0.5
        _uv_sclae_3 ("uv大小调节（B）", Range(0, 3)) = 0.5
        _UV_Speed_1 ("uv速度调节（R）", Range(0, 1)) = 0.05
        _UV_Speed_2 ("uv速度调节（G）", Range(0, 1)) = 0.005
        _UV_Speed_3 ("uv速度调节（B）", Range(0, 1)) = 0.01
        _normal1 ("法线强度（R）", Range(0, 3)) = 1
        _normal2 ("法线强度（G）", Range(0, 3)) = 1
        _normal3 ("法线强度（B）", Range(0, 3)) = 1
        [Space][Space][Space][Space][Space][Space][Space][Space]
        _water_color ("水颜色", Color) = (0,0.5656692,0.8455882,1)
        [HideInInspector]_fre_int ("_fre_int", Range(0, 3)) = 1.51
        _FresRange ("折射范围", Range(0, 3)) = 1
        [Space][Space][Space][Space][Space][Space][Space][Space]
        _colorNear ("颜色远", Color) = (0,0.8235294,0.7894523,1)
        _colorFar ("颜色近", Color) = (0.02205884,0.1502028,1,1)
        _Alpha ("透明度", Range(0, 1)) = 0.441
        _refSet ("折射调节", Range(0, 5)) = 0.5
        _specColor ("高光颜色", Color) = (0,0,0,1)
        _diffStep ("漫反射层级", Range(0, 5)) = 2
        _specStep ("高光层级", Range(0, 5)) = 0
        [Space][Space][Space][Space][Space][Space][Space][Space]
        __RefTex ("反射RT", 2D) = "black" {}
        _flcSet ("反射调节", Range(0, 1)) = 0.25
        _ReflDistort ("反射扰动", Range (0,3.5)) = 1.52

        [Space][Space][Space][Space][Space][Space][Space][Space]
        _FoamTex("水沫", 2D) = "black" {}
        _FoamSpeedU("水沫速度1", Float) = 0.1
        _FoamSpeedV("水沫速度2", Float) = 0.1
        _FoamDistort("水沫速度扰动", Range(0,2)) = 0.05
        _FoamLight1("水沫亮度1", Range(0,1)) = 0.067
        _FoamLight2("水沫亮度2", Range(1,15)) = 6.08
        _FoamColor("水沫颜色", Color) = (1,1,1,1)

    }
    SubShader {
        Tags {
            "IgnoreProjector"="True"
            "Queue"="Transparent"
            "RenderType"="Transparent"
        }
        GrabPass{ }
        Pass {
            Name "FORWARD"
            Tags {
                "LightMode"="ForwardBase"
            }
            ZWrite Off
            
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #define UNITY_PASS_FORWARDBASE
            #include "UnityCG.cginc"
            #pragma multi_compile_fwdbase
            #pragma multi_compile_fog
            #pragma only_renderers d3d9 d3d11 glcore gles 
            #pragma target 3.0
            sampler2D _GrabTexture;
            float _Diff_Set;
            float _SpecSet;
            float _SpecRange;
            sampler2D _NormalMap; uniform float4 _NormalMap_ST;
            float _uv_scale_1;
            float _uv_scale_2;
            float _uv_sclae_3;
            float _UV_Speed_1;
            float _UV_Speed_2;
            float _UV_Speed_3;
            float _normal1;
            float _normal2;
            float _normal3;
            float4 _water_color;
            float _fre_int;
            float _FresRange;
            float4 _colorNear;
            float4 _colorFar;
            float _Alpha;
            float _refSet;
            float4 _specColor;
            float _diffStep;
            float _specStep;
            sampler2D __RefTex; uniform float4 __RefTex_ST;
            float _flcSet;
            half _ReflDistort;
            sampler2D _FoamTex;
            float4 _FoamTex_ST;
            half _FoamSpeedU;
            half _FoamSpeedV;
            half _FoamDistort;
            half _FoamLight1;
            half _FoamLight2;
            fixed4 _FoamColor;

            struct a2v {
                float4 vertex : POSITION;
                float3 normal : NORMAL;
                float4 tangent : TANGENT;
                float2 texcoord0 : TEXCOORD0;
            };
            struct v2f {
                float4 pos : SV_POSITION;
                float2 uv0 : TEXCOORD0;
                float4 posWorld : TEXCOORD1;
                float3 normalDir : TEXCOORD2;
                float3 tangentDir : TEXCOORD3;
                float3 bitangentDir : TEXCOORD4;
                float4 screenPos : TEXCOORD5;
                float4 refl : TEXCOORD6;
                float2 uvmain : TEXCOORD7;
                float2 uvFoam : TEXCOORD8;
                UNITY_FOG_COORDS(6)
            };
            v2f vert (a2v v) {
                v2f o = (v2f)0;
                o.uv0 = v.texcoord0;
                o.normalDir = UnityObjectToWorldNormal(v.normal);
                o.tangentDir = normalize( mul( unity_ObjectToWorld, float4( v.tangent.xyz, 0.0 ) ).xyz );
                o.bitangentDir = normalize(cross(o.normalDir, o.tangentDir) * v.tangent.w);
                o.posWorld = mul(unity_ObjectToWorld, v.vertex);
                o.pos = UnityObjectToClipPos( v.vertex );
                o.refl = ComputeScreenPos(o.pos);
                o.uvmain = TRANSFORM_TEX( v.texcoord0, __RefTex );
                o.uvFoam = v.texcoord0 * _FoamTex_ST.xy + float2(_Time.y * _FoamSpeedU, _Time.y * _FoamSpeedV);
                UNITY_TRANSFER_FOG(o,o.pos);
                o.screenPos = o.pos;
                return o;
            }
            float4 frag(v2f i) : COLOR {
                #if UNITY_UV_STARTS_AT_TOP
                    float grabSign = -_ProjectionParams.x;
                #else
                    float grabSign = _ProjectionParams.x;
                #endif
                i.normalDir = normalize(i.normalDir);
                i.screenPos = float4( i.screenPos.xy / i.screenPos.w, 0, 0 );
                i.screenPos.y *= _ProjectionParams.x;
                float3x3 tangentTransform = float3x3( i.tangentDir, i.bitangentDir, i.normalDir);
                float3 ViewDir = normalize(_WorldSpaceCameraPos.xyz - i.posWorld.xyz);

                float2 uv1 = ((i.uv0*_uv_scale_1)+(_Time*_UV_Speed_1)*float2(1,1));
                float3 tex1RGB = UnpackNormal(tex2D(_NormalMap,TRANSFORM_TEX(uv1, _NormalMap)));
                float2 uv2 = ((_uv_scale_2*i.uv0)+(_Time*_UV_Speed_2)*float2(1,-1));
                float3 tex2RGB = UnpackNormal(tex2D(_NormalMap,TRANSFORM_TEX(uv2, _NormalMap)));
                float2 uv3 = ((_uv_sclae_3*i.uv0)+(_Time*_UV_Speed_3)*float2(-1,1));
                float3 tex3RGB = UnpackNormal(tex2D(_NormalMap,TRANSFORM_TEX(uv3, _NormalMap)));
                float3 normalLocal = (float3((tex1RGB.r*_normal1),(tex1RGB.g*_normal1),tex1RGB.b)+float3((tex2RGB.r*_normal2),(tex2RGB.g*_normal2),tex2RGB.b)+float3((_normal3*tex3RGB.r),(_normal3*tex3RGB.g),tex3RGB.b));
                
                float3 normalDir = normalize(mul(normalLocal, tangentTransform )); 
                float2 sceneUVs = float2(1,grabSign)*i.screenPos.xy*0.5+0.5;
                float4 sceneColor = tex2D(_GrabTexture, sceneUVs);
                float3 lightDir = normalize(_WorldSpaceLightPos0.xyz);
                float Fresnel = saturate(pow((dot(ViewDir,normalDir)*_fre_int),_FresRange));
                i.refl.xy += normalLocal * _ReflDistort;
                float4 __RefTex_var = tex2Dproj(__RefTex, UNITY_PROJ_COORD(i.refl));

                half4 foamC = tex2D(_FoamTex,normalLocal.xy * _FoamDistort + i.uvFoam);
                half foam = pow((foamC.r + foamC.g + foamC.b) * 0.333 + _FoamLight1, _FoamLight2);
                float4 foamRgb = float4(foam * _FoamColor.rgb,1);

                float3 finalColor = ((lerp(tex2D( _GrabTexture, (0.05*(((_refSet*(saturate(dot(normalLocal,float3(0.3,0.59,0.11)))-0.5))+0.5) - 0.5)*mul(tangentTransform, ViewDir).xy + sceneUVs.rg).rg).rgb,((_water_color.rgb*((_Diff_Set*(0.2 + floor(max(0,dot(ViewDir,normalDir)) * _diffStep) / (_diffStep - 1)))+(pow((_SpecSet*floor((max(0,dot(ViewDir,normalDir))*max(0,dot(normalDir,lightDir))) * _specStep) / (_specStep - 1)),_SpecRange)*_specColor.rgb)))+lerp(_colorFar.rgb,_colorNear.rgb,Fresnel)),_Alpha)+(__RefTex_var.rgb * _flcSet))+ foamRgb.rgb);
                fixed4 finalRGBA = fixed4(finalColor,1);
                UNITY_APPLY_FOG(i.fogCoord, finalRGBA);
                return finalRGBA;
            }
            ENDCG
        }
    }
    FallBack "Diffuse"
}