【Shader\j简单\Unity】Flowmap与光栅立体卡片效果

前言

实际上是尝试复原ta101第五课的一个小demo，目前还没有开课，我也穷，既然大纲给出来了，如果有时间摸鱼那么就可以慢慢磨，前面一大半的章节都比较基础适合我这种菜鸟。前期咱缺的不是知识，是素材啊TAT。
本节主要接上一节的消隐效果。
链接: 上一节

FlowMap

做特效经常用到，连连看也有内置的节点。Ben佬在UE4后面几期也讲了
Flowmap大概就是这样的一张贴图，其实使用他的原理很简单，rg记录了uv坐标的偏移量，但是偏移量是有限的，因此每隔一段时间都要交替然后插值。

制作这种贴图也简单，由一套现成的工具，使用也非常简单，这里放出下载地址： FlowmapPainter

代码

这里用的urp管线进行实现

Shader "urp_basic/FaceFade"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _BaseColor("BaseColor", Color) = (1,1,1,1)
        _FadeRange("Fade Softness", Float) = 1
        [Header(FlowMap)]
        _Wavemap("wave Map", 2D) = " white" {}
        _Flowmap("Flow Map", 2D) = "white" {}
        _FlowStrength("Flow Strength", Float) = 1
        _FlowSpeed("Flow Speed", Float) = 1
    }
    SubShader
    {
        Tags {"RenderPipeline"="UniversalRenderPipeline"
            "RenderType"="Opaque" }
        LOD 100
        HLSLINCLUDE
        #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl" 

        CBUFFER_START(UnityPerMaterial)
            float4 _MainTex_ST;
            half4 _BaseColor;
            float _FadeRange;
            float  _FlowStrength;
            float _FlowSpeed;
        CBUFFER_END

        TEXTURE2D (_MainTex);
        SAMPLER(sampler_MainTex);
        TEXTURE2D (_Wavemap);
        SAMPLER(sampler_Wavemap);
        TEXTURE2D(_Flowmap);
        SAMPLER(sampler_Flowmap);

        struct a2v
        {
            float4 vertex : POSITION;
            float4 normal : NORMAL;
            float2 uv : TEXCOORD0;
            float4 tangent : TANGENT;
        };
        struct v2f
        {
            float2 uv : TEXCOORD0;
            float4 vertex : SV_POSITION;
            float3 normalW : TEXCOORD1;
            // float3 forward : TEXCOORD2;
            float3 posW : TEXCOORD3;
            float3 tangentW : TEXCOORD4;
            float3 binormW : TEXCOORD5;
        };

        ENDHLSL

        Pass
        {
           HLSLPROGRAM
           #pragma vertex vert
           #pragma fragment frag

           real4 getFlowResult(float2 uv, float2 direction, Texture2D tex, SamplerState sampler_tex)
           {
                direction = (direction-0.5) *  _FlowStrength;
                float T = _Time.y * _FlowSpeed;
                float2 uv1 = direction * frac(T) + uv;
                float2 uv2 = direction * frac(T+0.5) + uv;
                real4 col1 = SAMPLE_TEXTURE2D(tex, sampler_tex, uv1);
                real4 col2 = SAMPLE_TEXTURE2D(tex, sampler_tex, uv2);
                float transition = frac(T) * 2.0 - 1.0; // 0,1->-1,1
                return lerp(col1, col2, abs(transition));
           }

           
           v2f vert(a2v i)
           {
                v2f o;
                o.vertex = TransformObjectToHClip(i.vertex.xyz);
                o.uv = TRANSFORM_TEX(i.uv, _MainTex);
                o.normalW = TransformObjectToWorldNormal(i.normal.xyz, true);
                // o.forward = normalize(mul( float3(0,0,1),(float3x3)GetWorldToViewMatrix()).xyz);
                o.posW = TransformObjectToWorld(i.vertex.xyz);
                o.tangentW = normalize(TransformObjectToWorldDir(i.tangent.xyz));
                o.binormW = normalize(cross(o.normalW.xyz, o.tangentW.xyz)
                                * i.tangent.w * unity_WorldTransformParams.w);
                return o;
           }

           real4 frag(v2f i) : SV_TARGET
           {
                half2 dir = SAMPLE_TEXTURE2D(_Flowmap, sampler_Flowmap, i.uv).rg;
                //real4 col = SAMPLE_TEXTURE2D(_MainTex, sampler_MainTex, i.uv);
                real4 wave_col = getFlowResult( i.uv, dir, _Wavemap, sampler_Wavemap);
                real4 partten_col = getFlowResult( i.uv, dir, _MainTex, sampler_MainTex);
                //=====> Mask <=====//
                float3 ViewDirW = normalize(_WorldSpaceCameraPos.xyz - i.posW);
                float3 NormalW = i.normalW;
                float3 BinormW = i.binormW;
                float3 TangentW = i.tangentW;
                float3x3 TBN = float3x3(TangentW, BinormW, NormalW);
                float3 ViewDirT = normalize(mul(ViewDirW, TBN));
                float fade_mask =pow(max(ViewDirT.z,0),_FadeRange);

                real4 col = lerp( wave_col, partten_col, fade_mask);
                return col;
           }
           ENDHLSL
        }
    }
}

效果大概这样，微调一下更好：