3DGameKit 各種エフェクトの解説:トレイルエフェクト

#概要
3DGameKitに利用されている様々なエフェクト、視覚効果について解説していきます。
長いので記事を幾つかに分けます。

#攻撃トレイルエフェクト

Ellenの攻撃のトレイルエフェクトを見てみます。Unityで軌跡のエフェクトというとTrailRanderがありますが、Ellenのエフェクトは異なる方法で実装しています。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">3DGameKitの勉強。Playerの攻撃エフェクト。<a href="https://twitter.com/hashtag/unity?src=hash&amp;ref_src=twsrc%5Etfw">#unity</a> <a href="https://twitter.com/hashtag/3DGamekit?src=hash&amp;ref_src=twsrc%5Etfw">#3DGamekit</a> <a href="https://t.co/9JEuMf5ZQ2">pic.twitter.com/9JEuMf5ZQ2</a></p>&mdash; unagi (@UnagiHuman) <a href="https://twitter.com/UnagiHuman/status/994602181188702208?ref_src=twsrc%5Etfw">2018年5月10日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Ellenのエフェクトは、半円のリング形状のモデルをシェーダーでアニメーションさせることによりそれっぽく見せています。
下記のgif動画は軌跡シェーダーUnlit/SwishにてTextureのOffsetパラメータを変動させてアニメーションさせている図になります。

![effectStuff.gif](https://qiita-image-store.s3.amazonaws.com/0/116884/d47a0343-1b84-d681-1b02-5badb66b9235.gif)


上記のアニメーションの素材になっているのが、下記のリング状のモデルで、
![playerstuffeffect.PNG](https://qiita-image-store.s3.amazonaws.com/0/116884/339e35a8-2aab-cbda-2c9a-58013d9764a0.png)

このモデルを以下のテクスチャを参照しながらアニメーションさせています。
![playerstuffeffectAnimationtex.PNG](https://qiita-image-store.s3.amazonaws.com/0/116884/3f3597e4-09b3-64d9-3fdc-bee00b37c51a.png)

テスクチャをどのように参照しているかはUnlit/Swishを見ると分かりますが、
頂点シェーダーでテクスチャの赤成分をみてモデルの頂点の法線方向のアニメーションを、
フラグメントシェーダーでテクスチャのrgbを参照してトレイルっぽいアニメーションを表現しています。

```csharp:
Shader "Unlit/Swish"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
		[HDR]_Color ("Color", Color) = (1,1,1,1)
	}
	SubShader
	{

		Tags {"Queue" = "Transparent"  "RenderType"="Transparent" }
		ZWrite Off
		  Cull Off
		  Blend SrcAlpha One
		

		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			// make fog work
			#pragma multi_compile_fog
			
			#include "UnityCG.cginc"

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

			struct v2f
			{
				float2 uv : TEXCOORD0;
				float4 uv2 : TEXCOORD2;
				UNITY_FOG_COORDS(1)
				float4 vertex : SV_POSITION;
			};

			sampler2D _MainTex;
			float4 _MainTex_ST;
			float4 _Color;
			
			v2f vert (appdata v)
			{
				v2f o;

				o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);
				o.uv2 = float4(v.uv, 0 ,0);
				float4 vertData = tex2Dlod(_MainTex, float4(o.uv, 0, 0)).rrrr;
				v.vertex.xyz -= v.normal * 0.02;
				v.vertex.xyz += vertData * v.normal * 0.1;
				o.vertex = UnityObjectToClipPos(float4(v.vertex.xyz, 1));
				UNITY_TRANSFER_FOG(o,o.vertex);
				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{
				// sample the texture
				fixed4 tex = tex2D(_MainTex, i.uv2);
				fixed4 col = tex2D(_MainTex, i.uv).r * _Color * tex.g * tex.b;
				// apply fog
				UNITY_APPLY_FOG(i.fogCoord, col);
				return col;
			}
			ENDCG
		}
	}
}

```


頂点シェーダー内で行っているアニメーション
![effectStufffragonly.gif](https://qiita-image-store.s3.amazonaws.com/0/116884/b5545408-ae08-0382-1b3f-26f5d669a50f.gif)

フラグメントシェーダー内で行っているアニメーション
![effectStuffvertonly.gif](https://qiita-image-store.s3.amazonaws.com/0/116884/6f812964-17a6-57dc-3608-57eda4d14c7a.gif)

上記二つのアニメーションを合成するとトレイルエフェクトの完成です。