UGUI（二）摄像机渲染纹理

以前在项目中弄过摄像机渲染纹理，现在再来整理下思路。渲染纹理在游戏中的运用非常常见，比如任务对话框上的3DNPC模型显示，角色装备栏中玩家的3D模型显示等。

先上图再来分析思路：

在Unity中实现这个功能非常容易

1.创建一个临时纹理RenderTexture

2.新建一个单独的摄像机(可称为photo摄像机)，将目标纹理设置为临时创建的纹理

3.将临时创建的纹理赋值给UI上的纹理组件

而这三步可以不通过写代码就能实现，这在UGUI官方例子中有一个demo，在这里就不做说明了。

下面通过代码实现：

UI节点：

注：

1.renderTexture的宽高比和界面中RawImage的宽高比一致，这样画面就不会拉伸。

2.rendertexture的宽高越大，显示在界面中的模型会越清晰，但是消耗就会越高。

 

再来分析下shader：

官方demo中的RawImage组件材质shader是UI-Default-No-Alpha.shader，从名称看得出不支持透明。

不如试试，去掉它模型后面的背景后，背景变成白色：

然后设置photo摄像机中的颜色RGBA都为0

再看看它还是支持人物单独显示，但是细心观察人物居然多了描边，这个描边颜色就是摄像机背景的RGB。

再加入粒子特效看看，粒子特效并不能正常的显示在UI中。

 

因为以前用过NGUI的Unlit/Premultiplied Colored这个shader，然后换上这个shader，观察效果，模型无描边，粒子也能正常显示，效果为最上面的那张图，果然新UI还不是那么完善。

所以就有必要看看NGUI的Unlit/Premultiplied Colored，看它是如何做到完美显示半透明和粒子。

 

问题1：为什么官方shader【UI-Default-No-Alpha】在设置摄像机背景色A大于（255*0.01）时，背景为不透明的RGB，反而设置为0时背景将全部消失？

看这个shader的最后的代码clip (color.a - 0.01)，剔除clip括号中大于0的值，即不显示。

所以摄像机背景设置为0的时候这个值是-0.01，当前的色值都不会显示，所以形成上图的效果。

 

问题2：接着问题1为什么粒子特效也不显示？

不显示是正常的，因为当前为背景的点设置为A为0时已经被剔除，当前位置粒子特效的颜色也会被剔除。

因为clip发生在融合blend之前，blend发生在所有颜色输出之后的帧缓存。

 

问题3：为什么NGUI的Unlit/Premultiplied Colored的shader能正常显示半透明粒子？

主要是因为使用了Blend One OneMinusSrcAlpha // 源rgba*1 + 背景rgba*(1-源A值)

这样就融合了源的A和背景的A，所以就正常显示了。

 

那么只需要对UGUI官方shader做少量修改，就可以和NGUI的Unlit/Premultiplied Colored一样的效果。

代码如下：

1. Shader "UI/Default No-Alpha"  
2. {  
3.     Properties  
4.     {  
5.         [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}  
6.         _Color ("Tint", Color) = (1,1,1,1)  
7.           
8.         _StencilComp ("Stencil Comparison", Float) = 8  
9.         _Stencil ("Stencil ID", Float) = 0  
10.         _StencilOp ("Stencil Operation", Float) = 0  
11.         _StencilWriteMask ("Stencil Write Mask", Float) = 255  
12.         _StencilReadMask ("Stencil Read Mask", Float) = 255  
13.   
14.         _ColorMask ("Color Mask", Float) = 15  
15.     }  
16.   
17.     SubShader  
18.     {  
19.         Tags  
20.         {   
21.             "Queue"="Transparent"   
22.             "IgnoreProjector"="True"   
23.             "RenderType"="Transparent"   
24.             "PreviewType"="Plane"  
25.             "CanUseSpriteAtlas"="True"  
26.         }  
27.           
28.         Stencil  
29.         {  
30.             Ref [_Stencil]  
31.             Comp [_StencilComp]  
32.             Pass [_StencilOp]   
33.             ReadMask [_StencilReadMask]  
34.             WriteMask [_StencilWriteMask]  
35.         }  
36.   
37.         Cull Off  
38.         Lighting Off  
39.         ZWrite Off  
40.         ZTest [unity_GUIZTestMode]  
41.         Fog { Mode Off }  
42.         Blend One Zero  
43.         ColorMask [_ColorMask]  
44.         Blend One OneMinusSrcAlpha // 源rgba*1 + 背景rgba*(1-源A值)  
45.   
46.         Pass  
47.         {  
48.         CGPROGRAM  
49.             #pragma vertex vert  
50.             #pragma fragment frag  
51.             #include "UnityCG.cginc"  
52.               
53.             struct appdata_t  
54.             {  
55.                 float4 vertex   : POSITION;  
56.                 float4 color    : COLOR;  
57.                 float2 texcoord : TEXCOORD0;  
58.             };  
59.   
60.             struct v2f  
61.             {  
62.                 float4 vertex   : SV_POSITION;  
63.                 fixed4 color    : COLOR;  
64.                 half2 texcoord  : TEXCOORD0;  
65.             };  
66.               
67.             fixed4 _Color;  
68.   
69.             v2f vert(appdata_t IN)  
70.             {  
71.                 v2f OUT;  
72.                 OUT.vertex = mul(UNITY_MATRIX_MVP, IN.vertex);  
73.                 OUT.texcoord = IN.texcoord;  
74. #ifdef UNITY_HALF_TEXEL_OFFSET  
75.                 OUT.vertex.xy -= (_ScreenParams.zw-1.0);  
76. #endif  
77.                 OUT.color = IN.color * _Color;  
78.                 return OUT;  
79.             }  
80.   
81.             sampler2D _MainTex;  
82.   
83.             fixed4 frag(v2f IN) : SV_Target  
84.             {  
85.                 half4 color = tex2D(_MainTex, IN.texcoord) * IN.color;  
86.                 //clip (color.a - 0.01);  
87.                 return color;  
88.             }  
89.         ENDCG  
90.         }  
91.     }  
92. }