【渲染】Unity制作暴风眼效果

前言

前段时间偶然在短视频app上看到一个暴风眼的壁纸，恰巧那段时间在学习体积云，于是便有了运用体积云方案制作一个暴风眼效果的想法。

效果如下：

效果

该效果以体积云为基础实现，但本文不会对体积云的实现进行太多的讲解，如果你需要了解体积云，可以看我之前翻译的一篇体积云的文章：《GPU Pro7——实时体积云》。

第一步：确定云形状

确定云的边界，暴风是一个圆柱形状，我们的视角是在圆柱内部，所以我们先用复制过来的代码做个射线与圆柱的碰撞检测：

//射线与圆柱相交检测
		bool rayCastCircle(float3 rayStart,float3 dir,float radius,out float2 dis)
		{
			float2 p = rayStart.xz;
			float2 d = dir.xz;
			float r = radius;
			float a = dot(d, d) + 1.0E-10;/// A in quadratic formula , with a small constant to avoid division by zero issue
			float det, b;
			b = -dot(p, d); /// -B/2 in quadratic formula
			/// AC = (p.x*p.x + p.y*p.y + p.z*p.z)*dd + r*r*dd 
			det = (b*b) - dot(p, p)*a + r * r*a;/// B^2/4 - AC = determinant / 4
			if (det < 0.0) {
				return false;
			}
			det = sqrt(det); /// already divided by 2 here
			float min_dist = (b - det) / a; /// still needs to be divided by A
			float max_dist = (b + det) / a;
			dis = float2(min_dist, max_dist);

			return true;
		}

第二步：云采样函数

确定云采样函数，该函数采用体积云文章中的方式。我们将对该采样函数进行以下修改：

1：重新计算uv

与普通的体积云绘制不同，圆柱形状的采样，需要以圆柱的弧度和高度重置uv：

        float SignedAngle(float3 from, float3 to)
		{
			float pi = 3.14159;
			float angle = acos(dot(normalize(from), normalize(to)));
			if (cross(to, from).y < 0)
			{
				return pi * 2 - angle;
			}
			return angle;
		}

	    //将点映射为圆柱采样的UV
		float2 circleUV(float3 p)
		{
			float3 h = float3(p.x, 0, p.z);
			float3 f = float3(0, 0, 1);
			return float2(SignedAngle(f, h) / 2 / 3.14159, ((p.y - _Bottom) / (_Top-_Bottom)));
		}

2：确定光源

我们将光源设定在圆柱中心，以点光源形式进行光照计算。

//云的光照
			float lightEnergy(float3 start)
			{
				float3 lightPos = float3(0, _LightPos, 0);
				float3 lightDir = start- lightPos;
				lightDir = normalize(lightDir);

此时会是这样一个效果：

圆柱中云的采样

 已经有了暴风眼那味了，但是还缺少点龙卷风的旋转效果，下面我们做一些旋转的效果。

3：旋转效果

我们在云采样函数中，先对采样点围绕Y轴进行不同程度的旋转，然后再加上一个旋转动画：

                //旋转动画
				float den = hPercent;
				float angAnim = den + 0.1*_Time.w;
				float co = cos(angAnim);
				float si = sin(angAnim);
				p.xz = mul(float2x2(co, -si, si, co), p.xz);
				p.y += _Time.y;

				//旋转度从低到高递减
				float ang = _Curl * (1 - hPercent);
				si = sin(ang);
				co = cos(ang);
				float2x2 rotation = float2x2(co, -si, si, co);
				p.xz = mul(rotation, p.xz);

此时效果如下：

对采样点进行旋转

大体的旋转效果有了，接下来，我们再使用FBM给云的边缘加一点扰动效果：

                //FBM,扭曲uv，让云的运动更自然
				float2 q = float2(0, 0);
				q.x = fbm(uv);
				q.y = fbm(uv + 1);
				float2 r = float2(0,0);
				r.x = fbm(uv + q + float2(1.7, 9.2) + 0.015*_Time.w)*0.15;
				r.y = fbm(uv + q + float2(8.3, 2.8) + 0.0126*_Time.w)*0.07;
				uv += r;

效果如下：

对采样点增加一些扰动效果

 至此，我们的暴风已经制作完毕，下面我们会加上闪电和光球，做一些渡劫的效果。

第三步：加上光球

光球很简单，以我们视角射线对一个平面进行相交检测，然后在交点处绘制圆球：

        //射线与平面相交检测
		bool rayCastPlane(float3 start, float3 dir, float3 o, float3 normal,out float dis)
		{
			float div = dot(dir, normal);
			if (div >= 0)
				return false;
			dis = (dot(o, normal) - dot(start, normal)) / div;
			if (dis < 0)
				return false;
			return true;
		}
            
        //光球
		float4 lightSphere(float3 p, float3 dir)
		{
			float3 planeNormal = -dir;
			float dis = 0;
			float3 o = float3(0, _Bottom, 0);
			if (!rayCastPlane(p, dir, o, planeNormal, dis))
			{
				return 0;
			}
			
			float3 castP = p + dir * dis;
			float t = length(castP - o) / _Radius;
			float glow = (0.7 - saturate(t - 0.3)) / 0.7;
			if (glow < 0||glow >1)
				return 0;
			return lerp(float4(_LightColor.rgb, 0), _LightColor, glow);
		}

效果如下：

光球

 第四步：加上闪电

我们再加上一道从天上劈下来的闪电！实现的方法也很简单，首先确定绘制闪电平面的uv，我们以视线方向，对绘制闪电的平面做相交检测：

//闪电
			float4 lightning(float3 p,float3 dir)
			{
				//闪电的平面的法线
				float3 planeNormal = -normalize(float3(dir.x, 0, dir.z));
				float dis = 0;
				//相交检测
				if (!rayCastPlane(p, dir, float3(0, 0, 0), planeNormal,dis))
				{
					return 0;
				}
				float3 castP = p + dir*dis;
				if (castP.y < _Bottom || castP.y>_Top)
					return 0;
				fixed uvDir = 1;//判断交点在原点的左右，用来保证uv0~1
				if (cross(castP, planeNormal).y < 0)
				{
					uvDir = -1;
				}
				float projDis = length(castP.xz);
				float lightWidth = 10;
				if (projDis > lightWidth)
				{
					return 0;
				}
				//计算绘制闪电的平面的uv
				float2 st = float2(((length(castP.xz)*uvDir / lightWidth)+1)/2, ((castP.y - _Bottom) / (_Top - _Bottom))*6);

确定好uv后，我们再使用FBM对uv进行扭曲

float lightningFBM(float2 st) 
{
		float value = 0.0;
		float amplitude = .2;
		float frequency = 0.;
		for (int k = 0; k < 6; k++) {
			value += amplitude * tex2Dlod(_Noise, float4(st, 0, 0));
			st *= 2.;
			amplitude *= .1;
		}
		return value;
}

float4 lightning(float3 p,float3 dir)
{
    ... ...

    //对uv的x进行fbm
	st.x += lightningFBM(st + _Time.z)*2*st.x;
	st.x *= st.x;
	//将0~1变为0~1~0
	st.x = (0.5 - abs(st.x - 0.5)) * 2 * 5 - 4;

    ... ...
} 

最后，根据uv进行采样，uv两边颜色浅，中间深：

//闪电
float4 lightning(float3 p,float3 dir)
{
    ... ...
    return lerp(float4(_LightColor.rgb,0), _LightColor, saturate(st.x));
}

至此，所有效果都已完成。

闪电

 

结语

虽说大体上效果已经完成，但是性能爆炸，许多细节处都可以优化，如果后面有时间的话我会进行优化并继续更新。同时也希望各位大佬可以多多交流学习。

最后送上项目链接，文章写的不是很好，最好配合代码食用：https://github.com/liuyima/UnityTornado

参考：

Shader - Shadertoy BETA

The Book of Shaders: Fractal Brownian Motion

GPU Pro 7——实时体积云（翻译，附Unity工程）_刘一码的博客-CSDN博客