前言
前段时间偶然在短视频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制作暴风眼效果](http://img.gansulong.com/231013/0S3034J0-0.png)
文章插图
圆柱中云的采样
已经有了暴风眼那味了,但是还缺少点龙卷风的旋转效果,下面我们做一些旋转的效果 。
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
- [环境配置]VSCode配置SourceMod编译方法
- 怎么复制不同行的内容
- 斗破苍穹云山是谁
- 手机怎么制作简历
- 泡妞大师是什么电影
- 安娜贝尔是招魂的前传吗
- 【惯性导航】隧道、高架桥、高楼林立弱信号环境室外定位_惯导模块
- 世界关节炎日是每年的几月几号 世界关节日是哪一天
- 关于平面设计师
- macos montery 显示电量百分比设置