【程序化天空盒】过程记录02:云扰动 边缘光 消散效果

写在前面

写在前面唉,最近筋疲力竭,课题组的东西一堆没做,才刚刚开始带着思考准备练习作品,从去年5月份开始到现在真得学了快一年了,转行学其他的真的好累,,不过还是加油!

下面是做面片云的部分,关于日月、天空渐变、大气散射(忘了记录了,后面一定补上)记录在了:【程序化天空盒】过程记录01:日月 天空渐变 大气散射

准备

前置知识

面片云这块儿我卡了挺久的了,主要太多知识漏洞了,带着问题学习的话完成了以下内容的学习: 

分析他人作品

目前我能找到的各位大佬做完并展示出来的有以下几个(仅限于我自己有刷到的,可能还有遗漏的):

首先还是之前博客里就提到的两位加上了sdf消散效果的作品:

Unity 卡通渲染 程序化天空盒 昼夜变化_哔哩哔哩_bilibili

云是单独的面片,不同通道放不同的信息,shader中获取。  

以及这位UP的Unity NPR 原神Cloud,Sky,Shader_网络游戏热门视频 (bilibili.com)

再补充一些最近看到的很棒的作品里的云: 

首先是这位程序化天空盒实现昼夜变换 - 知乎 (zhihu.com)大佬的效果,截图来自文章末尾的gif链接:

【技术美术】风格化动态天空效果_哔哩哔哩_bilibili

b站上一个好厉害的UP做的,没说怎么做的,从他云的效果来看,首先边缘光是会根据太阳的位置而产生变化,但是没有上面三位大佬那样的消散效果,所以我猜测是放了一整个云贴图上去,采样得到的。看着看着我突然发现这些云就是原神的云贴图,也是我准备用的哈哈哈。 

【unity练习1√】urp程序化skybox_哔哩哔哩_bilibili

这位UP没有说实现方法,但从他展示的shader面板可以猜测,实现方法是直接给了整个天空的cloud贴图:以及单独的a通道控制一些bloom之类效果吧(猜的

正是因为是整张贴图,没办法根据太阳光的位置去做一些散射、云消散的动态效果。

【作品】技术美术Demo海滩小屋(风格化场景渲染)_哔哩哔哩_bilibili

这位UP在评论区说了云的制作:

思路概括

既然做都做了,那一定要尝试动态消散效果!

Unity 卡通渲染 程序化天空盒 - 知乎 (zhihu.com)还是跟着这位大佬实现!试着总结一下文章给出的思路,

  •  maya或任何建模软件,建云的面片模型
  • 面片模型需要给到两套UV,准确映射到想要的云贴图上
  • fbx导入unity,给一个shader完成需要的效果

1 模型和贴图

暂时先不自己画白嫖原神的图(后面有时间想尝试Houdini程序化生成云来着,再看吧,蛮有趣的),原神的图R是shadow layer,G是Rim,B是SDF,A就是外黑内白的透明度了。

之前分析篇【Unity天空盒】卡通渲染中如何实现云的消散效果在SD里拆开看过:

blender里摆了摆面片,我是mesh球直接拆看弄的,摆的乱七八糟,映射也是没分层123层混用了,效果调出来了之后再优化一下吧!现在就先这么着:

导出fbx就行。(哦,记得法线要flip一下,面片没有厚度,不然算是外面一层才能穿上贴图。

我的贴图感觉融合了一下变得乱七八糟,尝试分了一下通道是下面这样的结果,不管了后续再优化,现在先放着:

检查一下我们的面片是否正确:

简单先用shadowlayer通道上个色,好的,是正常的,可以进行下一步了: (果然天空盒还是要有云的!!)

2 上色

2.1 基础色 阴影色

由r通道控制,给个lerp就行,初版代码:

效果就是上面那张图啦,但是我想要更加动态,先浅加一个早晨和傍晚的_BrightColor不同,后期可以根据需要,让早晨、白天、傍晚和晚上的颜色都不同,想要云颜色更有层次的话甚至可以把云分为两层来着色,目前颜色就先这样吧!主要代码如下,

暴露的参数如下, 

效果如下,就简单放个对比图了,搞gif太费劲,最后呈现效果的时候再放gif:

可以发现边缘的BrightColor是由浅肤色->橘色靠拢,根据天空的颜色适当的调整就行。

2.2 边缘光

边缘光要跟着太阳(光源方向)走,首先要lightDor和worldNormal点积解决,初版代码:

效果如下:

这太僵硬了,想要更加动态,

  • 边缘光颜色:早晨Bloom和傍晚Bloom颜色不同,由lighDir.z控制就好
  • 边缘光强度:随着太阳升起和落下强度由弱->强->弱:由lightDir.y控制就好,至于强弱变化,善用smoothstep完美解决(不理解的话可以看看我之前写的【Unity云消散】巩固step,lerp和smoothstep,事实上所有变化效果基本都是靠lerp和smoothstep完成的)

主要代码如下,

Shader面板暴露参如下,

改后傍晚的Bloom光相比起早晨的白色,改成了橘黄色,更加和谐了(maybe),后期可以再调整,现在就先这样: 

边缘光强动态就先不放了,后期放个完整的gif效果。

问题还是很大,首先,看看大佬的边缘光成果:

目前只是严格按照G通道做边缘光,G通道是这样的:

所以得到的效果一定是规规矩矩的描边。想要上面那种随意的模糊感,就要给个noise贴图扰动一下uv,再去采样_CloudTex,拿一张noisemap:

扰动之后,没那么整整齐齐的边缘了: 

【补充】用脚本控制颜色

由于想让云的颜色和天空颜色有关联,让整个天空更加完整,最好整个天空盒部分的所有颜色都趋向于脚本控制,这里赶紧搞一下~把参数全部挪到脚本里。

【补充】重做了云面片

blender里重新摆了一下。

2.3 消散效果

云贴图整整齐齐的通道给我们省去了不少麻烦!Unity 卡通渲染 程序化天空盒这位大佬在实现的时候,是完全自己做的云贴图,没有把SDF信息塞到a通道里,而是另外给的贴图。我们的云贴图就不用了,直接获取B通道的SDF信息就行。

实现起来分两步走,首先消散效果应该分为两个部分,

  • 日出日落剧烈的消散
  • 白天和晚上正常时间,云的消散

第二个比较简单,我们先来实现这个。

我们知道,片元着色器这边最终输出的颜色Alpha值是取的云贴图的a通道透明度信息:

关于SDF图,一开始理解错了SDF的意思,,SDF记录的信息并不是透明度,而是距离啊!!!以下理解才正确:

我们需要规定一个临界值_LerpSize,那么对于SDF图上的某一点,大于则留下(计入透明度),小于则舍去(不计入透明度)。这样控制才是正确的,_LerpSize越大消散越剧烈,意味着云也就越小。

现在要让这个消散效果动起来:又要建立函数了,_Time.y作为自变量,那_LerpSize就是随着_Time.y变化的因变量,再增加一个控制量,用cos。

那么随着时间变化m在变化,云的大小也会发生改变,如果不做一点过渡,云的范围会变化的很突然,如何过渡?m由0->1的路上,如果不断接近SDF,则Alpha由1到0。

SDF值由0变大接近m的时候,Alpha值是0逐渐变到1的,同理SDF值由1变小接近m的时候,Alpha值是由1逐渐变到0的。

结合上述关系,最后的代码如下,

这里写的很乱,是边做边写的,纯当一个技术记录吧,后面有时间的话再完善。

2.4 云颜色和天空联系

用脚本获取天空颜色,再用天空颜色一样的方法去给颜色变换就行,主要代码如下,

可控的颜色有这么多, 

云部分到这里就结束了,其他部分其实也做了挺多调整的,这里就记录主要的实现过程。 之后的话,还有高空旋转云、太阳光晕、夜晚的星空和银河、整体雾效没加上,这些效果很多教程都有,后面可能就不会再写这样的博客记录了,最后摆摆相机会放个整体展示效果。

猜你喜欢

转载自blog.csdn.net/qq_41835314/article/details/128975630