Unity制作护盾——2、力场冲击波护盾

Unity制作力场护盾

大家好，我是阿赵。
  继续做护盾，这一期做一个力场冲击波护盾。

一、效果展示

  主要的效果并不是这个球，而是护盾在被攻击的时候，会出现一个扩散的冲击波。比如上图在右边出现了冲击波

如果在左边被攻击，冲击波会出现在左边，并且慢慢扩散，渐隐消失。

二、原理

  把用于装饰的球体去掉之后，实际上我们要做的事情其实很简单，就是要计算一个沿着球体的环形范围显示。

1、准备工作

这里我们需要几个东西
1.一个球形模型

  用于获取碰撞点，还有显示冲击波
2.碰撞点的坐标
  比如我们用鼠标点击来模拟攻击护盾，那么从屏幕的鼠标位置发射射线碰撞到上面的球体，得到一个球体上的坐标，用于计算扩散的中心点
3.扩散范围的大小
  在每次点击护盾获取到碰撞点之后，这个值应该是动态改变的，从小到大，用于控制扩散的幅度
4.一张渐变图

  这张渐变图其实就是上面看到的环形效果所采样的贴图了。

2、计算过程

接下来看看是怎样计算的
1.计算碰撞点的坐标和球体的顶点坐标的距离distance
2.距离distance减去一个size，得到一个扩散范围range
3.扩散范围除以一个扩散值diffuse，用于扩散范围的拉伸
4.上面得到的值，作为UV坐标的u坐标，然后v坐标是0.5。其实v坐标是0-1随便一个值都可以，因为  我们的渐变图只有x轴有变化。用这个uv值去采样渐变图，就能得到一个沿着球体的环形贴图效果

  通过控制size的大小，就能让这个 环形从小到大的变化。
  如果觉得这个环太整齐了，可以在第2步计算范围之后，再减去一个噪声图采样，这样，环形的边缘就会出现不规则的变化

  看着好像很复杂的效果，其实做起来是很简单的。接下来写一个很简单的C#脚本，获取碰撞点，把坐标传入到材质球里面，然后在C#写一个size从小到大变化的控制，让环形从小到大的扩散，最后消失就可以了。

3、特别说明

1.多个冲击波

  上面这样做之后，我们每次就只能点击出一个冲击波，如果点击第二个的时候，第一个会消失。为了可以多个冲击波同时存在，可以通过C#端的SetVectorArray方法和SetFloatArray方法使用数组去传冲击波中心点和扩散的size，然后在shader里面用循环的方式计算多个中心点和扩散size，得到多个冲击波同时出现的效果

2.三平面采样

  然后还有一个需要说明的是，如果我们单纯的用UV坐标去采样噪声图，在球形的UV接缝位置，会出现断裂的情况。所以我这里使用了一个三平面采样的技术

inline float4 TriplanarSampling44(sampler2D topTexMap, float3 worldPos, float3 worldNormal, float falloff, float2 tiling, float3 normalScale, float3 index)
{
	float3 projNormal = (pow(abs(worldNormal), falloff));
	projNormal /= (projNormal.x + projNormal.y + projNormal.z) + 0.00001;
	float3 nsign = sign(worldNormal);
	half4 xNorm; half4 yNorm; half4 zNorm;
	xNorm = tex2D(topTexMap, tiling * worldPos.zy * float2(nsign.x, 1.0));
	yNorm = tex2D(topTexMap, tiling * worldPos.xz * float2(nsign.y, 1.0));
	zNorm = tex2D(topTexMap, tiling * worldPos.xy * float2(-nsign.z, 1.0));
	return xNorm * projNormal.x + yNorm * projNormal.y + zNorm * projNormal.z;
}

使用起来也很简单
直接使用UV坐标采样，一般是这样写：

float2 noiseUV = i.uv*_noiseTex_ST.xy + _noiseTex_ST.zw;
float4 noiseCol = tex2D(_noiseTex, noiseUV);

现在改成

float4 noiseCol = TriplanarSampling44(_noiseTex, i.vertex_world, i.normal_world, 1.0, _noiseTilling, 1, 0);

3.装饰球体的制作

  最后，那个用于装饰用的球，其实Shader代码更简单，就是一个菲涅尔边缘光，加上一个Flow流动效果，用一张噪声图做流动而已。Flow的源码在上一篇闪电护盾给过了，所以这里就不给了，各位有兴趣可以自己试试。

三、代码

  c#代码就不给了，实在太简单，就是一个射线拾取碰撞点的代码。
  给一下Shader的源码吧：

Shader "azhao/ShockWave"
{
    Properties
    {
		_diffuse("kuosan",float) = 0
		_noiseTex("noiseTex",2D) = "black"{}
		_gradient("gradientTex",2D) = "black"{}
		_baseColor("baseColor",Color) = (1,1,1,1)
		_noisePow("noisePow",float) = 1
		_addSize("addSize",float) = 0
		_divSize("divSize",float) = 1
		_noiseTilling("noiseTilling",Vector) = (1,1,1,1)
		_hitSpeed("hitSpeed",float) = 10

    }
    SubShader
    {
        Tags { "Queue"="Transparent" }
        LOD 100

        Pass
        {
			Blend SrcAlpha OneMinusSrcAlpha
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
  

            #include "UnityCG.cginc"

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

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
				float4 vertex_world:TEXCOORD1;
				float3 normal_world:TEXCOORD2;
            };

			float3 _hitCenter[10];
			float _hitSize[10];
			float _diffuse;
			sampler2D _noiseTex;
			float4 _noiseTex_ST;
			sampler2D _gradient;
			float4 _baseColor;
			float _noisePow;
			float _addSize;
			float _divSize;
			float2 _noiseTilling;
			float _hitSpeed;

			inline float4 TriplanarSampling44(sampler2D topTexMap, float3 worldPos, float3 worldNormal, float falloff, float2 tiling, float3 normalScale, float3 index)
			{
				float3 projNormal = (pow(abs(worldNormal), falloff));
				projNormal /= (projNormal.x + projNormal.y + projNormal.z) + 0.00001;
				float3 nsign = sign(worldNormal);
				half4 xNorm; half4 yNorm; half4 zNorm;
				xNorm = tex2D(topTexMap, tiling * worldPos.zy * float2(nsign.x, 1.0));
				yNorm = tex2D(topTexMap, tiling * worldPos.xz * float2(nsign.y, 1.0));
				zNorm = tex2D(topTexMap, tiling * worldPos.xy * float2(-nsign.z, 1.0));
				return xNorm * projNormal.x + yNorm * projNormal.y + zNorm * projNormal.z;
			}
            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv = v.uv;
				o.vertex_world = mul(v.vertex, unity_ObjectToWorld);
				o.normal_world = mul(unity_WorldToObject, v.normal);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
				float alpha = 0;
				for (int j = 0;j < 10;j++)
				{
					float dis = distance(_hitCenter[j], i.vertex_world);
					float hitMaskVal = (1 - (dis - _addSize)) / (max(_divSize, 0.001f));

					float hitSizeVal = (dis - (_hitSize[j] * _hitSpeed)) / _diffuse;

					//float2 noiseUV = i.uv*_noiseTex_ST.xy + _noiseTex_ST.zw;
					//float4 noiseCol = tex2D(_noiseTex, noiseUV);
					float4 noiseCol = TriplanarSampling44(_noiseTex, i.vertex_world, i.normal_world, 1.0, _noiseTilling, 1, 0);
					float noisePowerVal = pow(noiseCol.r, _noisePow);

					float hitRange = clamp(hitSizeVal - noisePowerVal, 0, 1);

					float2 jianbianUV = float2(hitRange, 0);
					float4 jianbianCol = tex2D(_gradient, jianbianUV);

					alpha = alpha + clamp(hitMaskVal* jianbianCol.r, 0, 1);
				}
				alpha *= _baseColor.a;

                return float4(_baseColor.rgb, alpha);
            }
            ENDCG
        }
    }
}