UV坐标应用范例——计算屏幕坐标作为UV

迷幻角色背景

大家好，我是阿赵。
之前介绍过了经典的Shader写法，物体顶点坐标在顶点程序转换到裁剪空间，然后在片段程序里面通过模型的UV进行贴图采样，然后把颜色显示在模型上面。
之前也介绍过经典的顶点程序应用，树木的生长。通过特定的信息，控制顶点的偏移，模拟出树干树枝生长的效果。
这次带来一个我觉得比较经典的UV坐标控制例子。

一、例子说明

在做这个例子之前，先来考虑一个问题。我们采样模型的贴图，是不是必须使用模型的UV信息？
答案肯定是否的。
我之前在很多例子里面已经用过MatCap效果，采样MatCap就并不是用模型的UV坐标，而是把物体的法线方向转到观察空间，然后再转换到[0,1]的范围，作为采样MatCap贴图的UV信息，可以看代码回顾一下：

float2 GetMatCapUV(float3 objNormal)
	{
float3 normalWorld = mul(unity_ObjectToWorld, objNormal);
float3 normalView = mul(UNITY_MATRIX_IT_MV, normalWorld);
return normalView.xy*0.5+0.5;
}

在这次这个例子里面，我做了一个使用顶点坐标转屏幕空间坐标的操作，使用这个屏幕坐标作为UV来采样贴图。这样得到的效果，模型上的贴图会一直正面朝着屏幕，不会因为模型的旋转或者摄像机的旋转而导致贴图的方向发生变化。模型的顶点范围，只会影响到贴图显示的范围大小。
为了让这个例子看起来更有意思，所以我使用了2个视频作为贴图，所以我先会说一下在Unity里面怎样使用AVProVideo插件播放视频。

二、详细做法说明

1、AVProVideo播放视频

1.导入AVProVideo

先购买插件，然后导入项目，会看到有一个AVProVideo文件夹，里面会有Demo，想深入了解的话可以去看看各种demo的应用。我这个例子用的不是很复杂，只是单纯的用来播放视频而已，所以那些360播放、VR播放的功能，就不去管了。

2.创建播放器

导入插件之后，在创建物体对象的地方就可以创建MediaPlayer，在场景里面创建MediaPlayer。

3.指定播放的视频

选择MediaPlayer，可以看到选项。资源路径里面可以指定播放视频的地址。然后可以设置自动打开、自动播放、循环等。

4.渲染到指定的材质球

添加一个ApplyToMaterial的组件，可以把指定的MediaPlayer渲染的视频，以RenderTexture的形式传入指定的材质球。

5.为例子准备的2个视频

(1)背景视频

这个背景是我自己用AE做出来的一个循环背景，如果有人有兴趣，可以提出来，我下次再告诉大家怎样做。

(2)角色身上的视频

这个是AVProVideo插件的demo自带的视频，本来是一个可以贴到球体上的循环视频，我觉得效果不错，就直接拿来做例子了。

2、制作背景材质

背景其实就是是一个面片，但由于没有拿模型的UV坐标作为采样，而是拿了顶点坐标转屏幕坐标作为UV来采样，所以不管怎样旋转面片，显示的画面都会是正对着我们的

关键的计算步骤是：

1.顶点程序

o.screen_pos = ComputeScreenPos(o.vertex);

其中ComputeScreenPos函数是UnityCG.cginc内置的，通过这个方法获取到的屏幕坐标的取值范围已经是[0,1]，比自己计算方便。

inline float4 ComputeScreenPos (float4 pos)
{
    float4 o = pos * 0.5f;
    o.xy = float2(o.x, o.y*_ProjectionParams.x) + o.w;
    o.zw = pos.zw;
    
    return o;
}

2.片段程序

//用透视除法，将裁剪空间坐标转换到NDC空间坐标

			float2 screenUV = i.screen_pos.xy / (i.screen_pos.w + 0.000001);
			float aspect = _ScreenParams.x / _ScreenParams.y;
			float aspectx = aspect * _scale.x;
			screenUV.x *= aspectx;
			screenUV.x += (1 - aspectx) / 2;
			//判断屏幕UV是否左上角是0，是否需要上下翻转V坐标。
			//由于例子用的是视频插件生成的RenderTexture，没有Repeat，所以不能直接UV坐标乘以-1，改为用1-V坐标
			if(_ProjectionParams.x < 0)
			{
				screenUV.y = 1 - screenUV.y;
			}
			//用屏幕UV采样贴图，得到颜色1
			half4 col = tex2D(_MainTex, screenUV);

这里的重点是用透视除法求NDC空间的坐标。然后用_ScreenParams.x / _ScreenParams.y;求出屏幕的长宽比例，进行偏移，让画面可以在屏幕中间居中。
不过如果单纯是这样计算出UV然后进行采样，会发现画面是上下颠倒的，所以还要根据_ProjectionParams.x判断屏幕UV是否左上角是0，是否需要上下翻转V坐标。
最后就可以把计算出来的UV坐标来采样贴图了。

3、角色材质制作

角色的材质是在背景材质上做了加工。
这里分别用2套UV对角色模型进行了采样，一套是正常的模型UV、另外一套是顶点坐标转屏幕坐标（和背景的计算方式一样）
两套UV都是采样传进去的视频作为贴图，具体的效果如下：

接下来要做的事情就非常简单了，我很喜欢用一张噪声图，把它自身的UV平铺数值改成0,0，然后用一个_Time.y来滚动UV坐标，就能采样噪声图的单个像素，做出黑白灰闪动的效果：

float noiseUV = i.uv*_noiseMap_ST.xy + _noiseMap_ST.zw;
noiseUV.x += _Time.y*_speed;
float4 noiseCol = tex2D(_noiseMap, noiseUV);
float noiseVal = step(0.5, noiseCol.r);

最后，对黑白灰的效果做step，让它只会出现黑白，然后用来混合刚才两套UV的采样结果，就做出了2种效果之间的闪烁变化了。
float4 finalCol = col * noiseVal + col2 * (1 - noiseVal);

三、完整Shader

Shader "azhao/CenterImgRole"
{
	Properties
	{
		_MainTex("Texture", 2D) = "white" {}
		_scale("Scale",Vector) = (1,1,1,1)
		_noiseMap("Noise",2D) = "black"{}
		_speed("Speed",float) = 1
	}
		SubShader
		{
			Tags { "RenderType" = "Opaque" }
			LOD 100

			Pass
			{
				CGPROGRAM
				#pragma vertex vert
				#pragma fragment frag

				#include "UnityCG.cginc"

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

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

				sampler2D _MainTex;
				float4 _MainTex_ST;
				float4 _scale;
				float _speed;
				sampler2D _noiseMap;
				float4 _noiseMap_ST;
				v2f vert(appdata v)
				{
					v2f o;
					o.vertex = UnityObjectToClipPos(v.vertex);
					o.uv = TRANSFORM_TEX(v.uv, _MainTex);
					//获取顶点对应的屏幕空间坐标
					o.screen_pos = ComputeScreenPos(o.vertex);
					return o;
				}

				half4 frag(v2f i) : SV_Target
				{
					//用透视除法，将裁剪空间坐标转换到NDC空间坐标
					float2 screenUV = i.screen_pos.xy / (i.screen_pos.w + 0.000001);
					float aspect = _ScreenParams.x / _ScreenParams.y;
					float aspectx = aspect * _scale.x;
					screenUV.x *= aspectx;
					screenUV.x += (1 - aspectx) / 2;
					//判断屏幕UV是否左上角是0，是否需要上下翻转V坐标。
					//由于例子用的是视频插件生成的RenderTexture，没有Repeat，所以不能直接UV坐标乘以-1，改为用1-V坐标
					if(_ProjectionParams.x < 0)
					{
						screenUV.y = 1 - screenUV.y;
					}
					//用屏幕UV采样贴图，得到颜色1
					half4 col = tex2D(_MainTex, screenUV);

					//用正常模型坐标采样贴图，得到颜色2
					half4 col2 = tex2D(_MainTex, i.uv);
					//用模型坐标采样一张噪声贴图，用于混合颜色1和颜色2
					float noiseUV = i.uv*_noiseMap_ST.xy + _noiseMap_ST.zw;
					noiseUV.x += _Time.y*_speed;
					float4 noiseCol = tex2D(_noiseMap, noiseUV);
					float noiseVal = step(0.5, noiseCol.r);
					float4 finalCol = col * noiseVal + col2 * (1 - noiseVal);

					return finalCol;
				}
				ENDCG
			}
		}
}