如何制作适配全屏的Quad图形？

在Unity中，Quad是一个能够跟随摄像机镜头旋转的长方形面片，有的时候项目要求将Quad面片适配屏幕，那要如何实现呢？

我的实现思路很简单：通过采样屏幕空间的UV坐标来实现。

大致的思路步骤如下：

1、获取的摄像机的裁剪空间坐标；

2、通过透视剔除法，将裁剪空间坐标转化为屏幕空间坐标；

3、添加2D纹理贴图，对屏幕空间的uv坐标进行采样；

首先，添加一个Quad面片，然后给面片增加增加一个surface unlit 的shader，自定义材质，材质也选择这个shader。

最关键的两个步骤

第一、在顶点shader的函数中，使用变量screen_pos 接收裁剪空间顶点坐标。

v2f vert (appdata v)
            {
                v2f o;
                // 裁剪空间下的顶点坐标
                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv = v.textCoord;
                o.screen_pos = o.pos;
                o.screen_pos.y = - o.screen_pos.y;
                return o;
            }

第二歩、在片元shader函数中，定义一个二维向量screen_uv,用裁剪空间顶点坐标的x、y的值，分别除以宽度值，就能得到屏幕空间的uv坐标。

但这个uv坐标的范围在[-1,1]之间，要将它转换为[0,1]的范围，因此加上1之后再乘以0.5，这样就完成了空间范围的转化。

最后再使用text2D 方法，对screen_uv进行采样。

half4 frag (v2f i) : SV_Target
            {
                // 透视除法，裁剪空间坐标 / 屏幕宽度，得到屏幕uv （-1，1）
                half2 screen_uv = i.screen_pos.xy / i.screen_pos.w;
                // 转换范围到（0，1）
                screen_uv = (screen_uv + 1.0) * 0.5;
                // sample the texture
                half4 col = tex2D(_MainTex, screen_uv);
                return col;
            }

这样就能得到Quad面片适配屏幕大小的效果。

来看最终效果：

附上完整shader代码：

Shader "Unlit/ScreenImage"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            // make fog work
            #pragma multi_compile_fog

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 textCoord : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 pos : SV_POSITION;
                float4 screen_pos: TEXCOORD1;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;

            v2f vert (appdata v)
            {
                v2f o;
                // 裁剪空间下的顶点坐标
                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv = v.textCoord;
                o.screen_pos = o.pos;
                o.screen_pos.y = - o.screen_pos.y;
                return o;
            }

            half4 frag (v2f i) : SV_Target
            {
                // 透视除法，裁剪空间坐标 / 屏幕宽度，得到屏幕uv （-1，1）
                half2 screen_uv = i.screen_pos.xy / i.screen_pos.w;
                // 转换范围到（0，1）
                screen_uv = (screen_uv + 1.0) * 0.5;
                // sample the texture
                half4 col = tex2D(_MainTex, screen_uv);
                return col;
            }
            ENDCG
        }
    }
}