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

缺乏、安全感 2023-09-24 17:33 47阅读 0赞

**写在前面**

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

下面是做面片云的部分，关于日月、天空渐变、大气散射（忘了记录了，后面一定补上）记录在了：[【程序化天空盒】过程记录01：日月 天空渐变 大气散射][01_ _]

## 准备 ##

### 前置知识 ###

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

![4c927abbfdc54842805c0c7d29e6fc09.png][]

### 分析他人作品 ###

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

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

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

![74f7aba50bf7495bbb764d9911b95ba5.png][]

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

以及这位UP的[Unity NPR 原神Cloud,Sky，Shader\_网络游戏热门视频 (bilibili.com)][Unity NPR _Cloud_Sky_Shader_ _bilibili.com]：

![fafd9170556647bcb6e2b7c0f8c37b04.png][]

![aa1fb47f95ba46c78bc3795a44a0ff58.png][]

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

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

![a4db199278a54409bd97f0a937af8f02.png][]

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

![c46d03a937d1409eaa29dca8c953e81d.png][]

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

[【unity练习1√】urp程序化skybox\_哔哩哔哩\_bilibili][unity_1_urp_skybox_bilibili]

![432ca05a0d564407aa736936e396d6cd.png][]

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

![e7b4f14ceda1483eaa44d2b74dd274a5.png][]

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

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

![96266b19b20f4b7f8a273a941bd5f9bc.png][]

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

![940dc09081814528ab4227b03b5d66ff.png][]

### 思路概括 ###

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

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

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

## 1 模型和贴图 ##

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

![7544f3e8c28f4a18b9c7f114d02a591d.png][]

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

![fc012bb889544d5d9273a500af23cd43.png][]

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

![769188ea6bf24fa4badefb42065bc690.png][]

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

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

![17098d35d7af4dc6a868985887b2e75f.png][]

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

简单先用shadowlayer通道上个色，好的，是正常的，可以进行下一步了： （果然天空盒还是要有云的！！）

![63f2a57c41ff44729ae2394a15a504fd.png][]

## 2 上色 ##

### 2.1 基础色 阴影色 ###

由r通道控制，给个lerp就行，初版代码：

![81343542b715457eb4d126972f001165.png][]

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

![ab7764d425c9418f88598fe11e2d814b.png][]

暴露的参数如下，

![3a00faf5262f426ea444225d11224ece.png][]

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

![d1e92729078a422c9861c5b37c150741.png][]

![03c51a4f3fa8453a8e76c296a901f58f.png][]

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

### 2.2 边缘光 ###

边缘光要跟着太阳（光源方向）走，首先要lightDor和worldNormal点积解决，初版代码：

![e810422305a142a89d918d7bba0e9114.png][]

效果如下：

![d64ce3f9fe144f3b89f6d840b990f810.png][]

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

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

主要代码如下，

![a52a57fd57cb4d6ca1ba56b0a938fa87.png][]

Shader面板暴露参如下，

![0b58bfc6ccde46348134ad7e4d12d531.png][]

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

![8a2ad8fdb1d74f118eab43c4961fa559.png][]

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

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

![ed3d42ddf27a4a9f835794e7b3e32d90.png][]

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

![792de21b05134b6bbc237543ec9c41d7.png][]

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

![6c359b5755e745a7854ce28e54ba1f36.png][]

![e3b090488cf4436b94f681388c36a7b7.png][]

扰动之后，没那么整整齐齐的边缘了：

![1a67d641de24414289f2c8095c7f49fc.png][]

### 【补充】用脚本控制颜色 ###

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

### 【补充】重做了云面片 ###

blender里重新摆了一下。

### 2.3 消散效果 ###

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

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

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

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

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

![5a352a4cf878427a8cfaded757f90ff5.png][]

关于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的。

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

![5a8e3704bf3b410c8f62d50f7b0e4cb5.png][]

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

### 2.4 云颜色和天空联系 ###

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

![d90f1f39b380461bb44200024cc69d22.png][]

可控的颜色有这么多，

![251252f7faf347f5bfc7780b6c55c496.png][]

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

[01_ _]: https://blog.csdn.net/qq_41835314/article/details/128279938?spm=1001.2014.3001.5502
[4c927abbfdc54842805c0c7d29e6fc09.png]: https://img-blog.csdnimg.cn/4c927abbfdc54842805c0c7d29e6fc09.png
[Unity _ _ _bilibili]: https://www.bilibili.com/video/BV1kT411g7jC/?share_source=copy_web&vd_source=df915e2f42f68699ce7f9d08e53731c5
[74f7aba50bf7495bbb764d9911b95ba5.png]: https://img-blog.csdnimg.cn/74f7aba50bf7495bbb764d9911b95ba5.png
[Unity NPR _Cloud_Sky_Shader_ _bilibili.com]: https://www.bilibili.com/video/BV1UU4y1F7YB/?vd_source=df915e2f42f68699ce7f9d08e53731c5
[fafd9170556647bcb6e2b7c0f8c37b04.png]: https://img-blog.csdnimg.cn/fafd9170556647bcb6e2b7c0f8c37b04.png
[aa1fb47f95ba46c78bc3795a44a0ff58.png]: https://img-blog.csdnimg.cn/aa1fb47f95ba46c78bc3795a44a0ff58.png
[- _ _zhihu.com]: https://zhuanlan.zhihu.com/p/603032215
[a4db199278a54409bd97f0a937af8f02.png]: https://img-blog.csdnimg.cn/a4db199278a54409bd97f0a937af8f02.png
[bilibili]: https://www.bilibili.com/video/BV14G4y1M7UV/?spm_id_from=333.788.recommend_more_video.5&vd_source=df915e2f42f68699ce7f9d08e53731c5
[c46d03a937d1409eaa29dca8c953e81d.png]: https://img-blog.csdnimg.cn/c46d03a937d1409eaa29dca8c953e81d.png
[unity_1_urp_skybox_bilibili]: https://www.bilibili.com/video/BV1Ey4y1R73d/?spm_id_from=333.337.search-card.all.click&vd_source=df915e2f42f68699ce7f9d08e53731c5
[432ca05a0d564407aa736936e396d6cd.png]: https://img-blog.csdnimg.cn/432ca05a0d564407aa736936e396d6cd.png
[e7b4f14ceda1483eaa44d2b74dd274a5.png]: https://img-blog.csdnimg.cn/e7b4f14ceda1483eaa44d2b74dd274a5.png
[Demo_bilibili]: https://www.bilibili.com/video/BV15f4y1h7Kg/?spm_id_from=333.999.0.0&vd_source=df915e2f42f68699ce7f9d08e53731c5
[96266b19b20f4b7f8a273a941bd5f9bc.png]: https://img-blog.csdnimg.cn/96266b19b20f4b7f8a273a941bd5f9bc.png
[940dc09081814528ab4227b03b5d66ff.png]: https://img-blog.csdnimg.cn/940dc09081814528ab4227b03b5d66ff.png
[Unity _ _ - _ _zhihu.com]: https://zhuanlan.zhihu.com/p/540692272
[7544f3e8c28f4a18b9c7f114d02a591d.png]: https://img-blog.csdnimg.cn/7544f3e8c28f4a18b9c7f114d02a591d.png
[Unity]: https://blog.csdn.net/qq_41835314/article/details/128450567
[fc012bb889544d5d9273a500af23cd43.png]: https://img-blog.csdnimg.cn/fc012bb889544d5d9273a500af23cd43.png
[769188ea6bf24fa4badefb42065bc690.png]: https://img-blog.csdnimg.cn/769188ea6bf24fa4badefb42065bc690.png
[17098d35d7af4dc6a868985887b2e75f.png]: https://img-blog.csdnimg.cn/17098d35d7af4dc6a868985887b2e75f.png
[63f2a57c41ff44729ae2394a15a504fd.png]: https://img-blog.csdnimg.cn/63f2a57c41ff44729ae2394a15a504fd.png
[81343542b715457eb4d126972f001165.png]: https://img-blog.csdnimg.cn/81343542b715457eb4d126972f001165.png
[ab7764d425c9418f88598fe11e2d814b.png]: https://img-blog.csdnimg.cn/ab7764d425c9418f88598fe11e2d814b.png
[3a00faf5262f426ea444225d11224ece.png]: https://img-blog.csdnimg.cn/3a00faf5262f426ea444225d11224ece.png
[d1e92729078a422c9861c5b37c150741.png]: https://img-blog.csdnimg.cn/d1e92729078a422c9861c5b37c150741.png
[03c51a4f3fa8453a8e76c296a901f58f.png]: https://img-blog.csdnimg.cn/03c51a4f3fa8453a8e76c296a901f58f.png
[e810422305a142a89d918d7bba0e9114.png]: https://img-blog.csdnimg.cn/e810422305a142a89d918d7bba0e9114.png
[d64ce3f9fe144f3b89f6d840b990f810.png]: https://img-blog.csdnimg.cn/d64ce3f9fe144f3b89f6d840b990f810.png
[Unity_step_lerp_smoothstep]: https://blog.csdn.net/qq_41835314/article/details/128618789?spm=1001.2014.3001.5502
[a52a57fd57cb4d6ca1ba56b0a938fa87.png]: https://img-blog.csdnimg.cn/a52a57fd57cb4d6ca1ba56b0a938fa87.png
[0b58bfc6ccde46348134ad7e4d12d531.png]: https://img-blog.csdnimg.cn/0b58bfc6ccde46348134ad7e4d12d531.png
[8a2ad8fdb1d74f118eab43c4961fa559.png]: https://img-blog.csdnimg.cn/8a2ad8fdb1d74f118eab43c4961fa559.png
[ed3d42ddf27a4a9f835794e7b3e32d90.png]: https://img-blog.csdnimg.cn/ed3d42ddf27a4a9f835794e7b3e32d90.png
[792de21b05134b6bbc237543ec9c41d7.png]: https://img-blog.csdnimg.cn/792de21b05134b6bbc237543ec9c41d7.png
[6c359b5755e745a7854ce28e54ba1f36.png]: https://img-blog.csdnimg.cn/6c359b5755e745a7854ce28e54ba1f36.png
[e3b090488cf4436b94f681388c36a7b7.png]: https://img-blog.csdnimg.cn/e3b090488cf4436b94f681388c36a7b7.png
[1a67d641de24414289f2c8095c7f49fc.png]: https://img-blog.csdnimg.cn/1a67d641de24414289f2c8095c7f49fc.png
[5a352a4cf878427a8cfaded757f90ff5.png]: https://img-blog.csdnimg.cn/5a352a4cf878427a8cfaded757f90ff5.png
[5a8e3704bf3b410c8f62d50f7b0e4cb5.png]: https://img-blog.csdnimg.cn/5a8e3704bf3b410c8f62d50f7b0e4cb5.png
[d90f1f39b380461bb44200024cc69d22.png]: https://img-blog.csdnimg.cn/d90f1f39b380461bb44200024cc69d22.png
[251252f7faf347f5bfc7780b6c55c496.png]: https://img-blog.csdnimg.cn/251252f7faf347f5bfc7780b6c55c496.png