在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 } }}