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

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

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

Ellenの攻撃のトレイルエフェクトを見てみます。Unityで軌跡のエフェクトというとTrailRanderがありますが、Ellenのエフェクトは異なる方法で実装しています。

3DGameKitの勉強。Playerの攻撃エフェクト。#unity #3DGamekit pic.twitter.com/9JEuMf5ZQ2

— unagi (@UnagiHuman) 2018年5月10日

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

上記のアニメーションの素材になっているのが、下記のリング状のモデルで、

このモデルを以下のテクスチャを参照しながらアニメーションさせています。

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

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

頂点シェーダー内で行っているアニメーション

フラグメントシェーダー内で行っているアニメーション

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