技术美术TA之URP下的序列帧动画

本文是视频课程《Unity技术美术TA：Shader篇》，算是对自己学习的总结，也希望分享下所学知识~~

帧动画：
通过 Tiling + Offset 实现的
在 Shader 中只需要按照从左上到右下的顺序，依次截取一个个子区域显示

广告牌：
类似 Unity的 Transform 自带 LookAt 函数
始终朝向相机，z方向确定，求其他两个方向

---

代码如下：

Shader "Custom/TA_URP/Billboard"
{
    Properties
    {
        [Enum(UnityEngine.Rendering.BlendMode)] _SrcFactor ("SrcFactor", int) = 0
        [Enum(UnityEngine.Rendering.BlendMode)] _DstFactor ("DstFactor", int) = 0
        [NoScaleOffset]_MainTex("MainTex", 2D) = "white"{}

		// 自定义xy 行列数  z播放速度
        _SequenceParam("SequenceParam Count(XY) Speed(Z)", Vector) = (0,0,0,0)
    }
    SubShader
    {
        Tags
        {
            "RenderPipeline"= "UniversalPipeline"
            "RenderType"="Opaque"
            "Queue"="Transparent"
        }

        Pass
        {
            Blend [_SrcFactor] [_DstFactor]

            HLSLPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "Packages/com.unity.render-pipelines.core/ShaderLibrary/Color.hlsl"
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Input.hlsl"

            struct Attributes
            {
                float3 positionOS : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct Varyings
            {
                float4 positionCS : SV_POSITION;
                float2 uv : TEXCOORD0;
            };

            CBUFFER_START(UnityPerMaterial)
                half4 _SequenceParam;
            CBUFFER_END

            #define smp _Linear_Repeate
            SAMPLER(smp);

            TEXTURE2D(_MainTex);

            Varyings vert(Attributes v)
            {
                //构建旋转后的基向量在模型空间下的坐标

                //把当前物体当做原点，通过世界空间转换到本地空间，就是向量
                float3 viewDir = normalize(mul(GetWorldToObjectMatrix(), _WorldSpaceCameraPos));
                //假定y为某一方向
                float3 upDir = float3(0, 1, 0);
                //叉积，左手定则（只有观察空间是右手坐标系）
                float3 rightDir = cross(viewDir, upDir);
                //算出精确的y方向
                upDir = cross(rightDir, viewDir);

				// 矩阵方式
                // float4x4 M = float4x4(
                //     rightDir.x, upDir.x, viewDir.x, 0,
                //     rightDir.y, upDir.y, viewDir.y, 0,
                //     rightDir.z, upDir.z, viewDir.z, 0,
                //     0, 0, 0, 1
                // );
                // float3 newPositionOS = mul(M, v.positionOS);

				// 基向量方式
                float3 newPositionOS = rightDir * v.positionOS.x + upDir * v.positionOS.y + viewDir.z * v.positionOS.z;

                Varyings o;
                o.positionCS = TransformObjectToHClip(newPositionOS);

			    // UV 起点
                o.uv = float2(v.uv.x / _SequenceParam.x,
                    v.uv.y / _SequenceParam.y + 1 / _SequenceParam.y * (_SequenceParam.y - 1));

                float time = _Time.y * _SequenceParam.z;

				// UV 根据时间偏移
				// 存在比例关系： x 移动 最大列时   y 移动 1列
                o.uv.x += (floor(time) % _SequenceParam.x) / _SequenceParam.x;
                o.uv.y -= (floor(time / _SequenceParam.x) % _SequenceParam.x) / _SequenceParam.y;

                return o;
            }

            half4 frag(Varyings i) : SV_Target
            {
                half4 texCol = SAMPLE_TEXTURE2D(_MainTex, smp, i.uv);
                return texCol;
            }
            ENDHLSL
        }
    }
    FallBack "Hidden/Shader Graph/FallbackError"
}

贴图：