【Shader】NGUI与粒子系统
作者：卡卡西0旗木 原文链接：http://www.taidous.com/thread-27486-1-1.html
1、前言
在早期，就已经流传着在NGUI中使用Unity3D自带粒子系统的方法，主要有两种：一种是设置RenderQ，另一种是使用Render Texture。然而，随着时间推移，部分方法逐渐被遗忘，且其使用方法因应用条件不同，要么残缺不全，要么效果无法达到预期。我决定踏上探索之旅，找寻这些遗失的技术秘法。
2、遇见故友
朋友向我询问在NGUi中使用粒子的方法。我首先提到可以通过代码设置粒子的RenderQ，朋友认为这个方法过于简单，网上随处可查。接着我又提出使用Render Texture渲染出图片，再用UITexture引用该图片的方法。朋友表示他也想到了，但遇到了问题：摄像机看到的效果与UITexture引用该Texture后的效果不一致。
朋友给我展示了调试效果和实际运行效果，我也觉得效果差异明显。不过我调侃说这种差异也有一种别样的美，结果被朋友“赶”了出去。
我开始思考效果图存在的问题，发现背景是蓝色的，便着手对其进行处理。我尝试将渲染粒子的摄像机的背景颜色改成完全不透明，并选择与当前颜色相同，但此方法并未达到预期效果。之后我又尝试将摄像机的背景调为透明，结果粒子完全看不到了。
3、重新整理思绪
经过上述尝试，我们发现无论摄像机的背景是什么颜色，都不能直接将渲染出来的Texture应用到UITexture上。于是，我决定自己编写专门用于这种场景的Shader。
我编写了“Unlit - Particle”、“Unlit - Particle 1”、“Unlit - Particle 2”、“Unlit - Particle 3”这4个Shader。这里需要说明的是，Shader命名中的1、2、3是遵循NGUI的规定，你可以自行查看UIDrawCall中的CreateMaterial方法来验证。
以下是“Unlit - Particle”的代码（其他几个Shader的代码在本文最后的项目中）：
Shader "Unlit/Particle"
{
Properties
{
_MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {}
}
SubShader
{
LOD 100
Tags
{
"Queue" = "Transparent"
"IgnoreProjector" = "True"
"RenderType" = "Transparent"
}
Cull Off
Lighting Off
ZWrite Off
Fog { Mode Off }
Offset -1, -1
Blend One OneMinusSrcAlpha
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata_t
{
float4 vertex : POSITION;
float2 texcoord : TEXCOORD0;
fixed4 color : COLOR;
};
struct v2f
{
float4 vertex : SV_POSITION;
half2 texcoord : TEXCOORD0;
fixed4 color : COLOR;
};
sampler2D _MainTex;
float4 _MainTex_ST;
v2f vert (appdata_t v)
{
v2f o;
o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
o.texcoord = v.texcoord;
o.color = v.color;
return o;
}
fixed4 frag (v2f i) : COLOR
{
fixed4 col;
col = tex2D(_MainTex, i.texcoord);
col.a = col.rgb;
return col;
}
ENDCG
}
}
SubShader
{
LOD 100
Tags
{
"Queue" = "Transparent"
"IgnoreProjector" = "True"
"RenderType" = "Transparent"
}
Pass
{
Cull Off
Lighting Off
ZWrite Off
Fog { Mode Off }
Offset -1, -1
ColorMask RGB
Blend One OneMinusSrcAlpha
ColorMaterial AmbientAndDiffuse
SetTexture [_MainTex]
{
Combine Texture * Primary
}
}
}
}
最后测试图显示，倒数第二列是将粒子放在UIPanel中的效果，最后一列是放在Softclip的UIPanel中的效果。有时候可能会出现粒子有黑边的情况，这是因为我们使用渲染图的RGB来计算Alpha，无法完全还原真实图像。大家需要根据实际情况对Shader进行调整，因为最终效果会因粒子颜色、背景以及场景的不同而有所差异。可以类比在Photoshop中，若想根据RGB图片的灰度扣除图片，无法通过算法直接实现，只能依靠人眼识别来调整参数。
4、测试工程
如果大家想将这些Shader应用到自己的项目中，只需使用工程中的几个Shader即可。下载请前往原文，链接：http://www.taidous.com/thread-27486-1-1.html。