甘肃龙网

  1. 首页 > 生活 > >

【渲染】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 issuefloat 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 / 4if (det < 0.0) {return false;}det = sqrt(det); /// already divided by 2 herefloat min_dist = (b - det) / a; /// still needs to be divided by Afloat 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;}//将点映射为圆柱采样的UVfloat2 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);
此时会是这样一个效果：

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

文章插图
圆柱中云的采样
已经有了暴风眼那味了，但是还缺少点龙卷风的旋转效果，下面我们做一些旋转的效果 。
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


上一篇：卷积神经网络的FPGA硬件加速——QMJ

下一篇：鸿蒙认证还是很香的