【Unity天空盒】卡通渲染中如何实现云的消散效果

拼搏现实的明天。 2023-09-23 20:15 76阅读 0赞

**写在前面**

完成大气渲染之后，接下来就是考虑云渲染了。因为我想做的天空盒本身是想跟着这位大佬[Unity 卡通渲染 程序化天空盒 - 知乎][Unity _ _ -]里叙述的进程来的，里面云实现的是原神里的云，原神又是在崩3的基础上加上了消散效果。但现在能找到的一些教程or展示的视频里，很多天空盒的云都是通过贴图+noise map实现的，如何实现类似原神那种云伴随着太阳光的消散效果少有涉及，因此打算写一篇文章简单的记录一下学习过程，然后亲自实现一下~

## 1 原神的消散云 ##

首先是原神里的消散的云效果，在玩的时候蛮好看的，既然原神是在崩坏3的基础上加上了消散效果，那先来看看崩坏3是如何实现云的：

### 1.1 崩坏3如何实现云 ###

指路崩坏3的技术分享[From mobile to high-end PC: Achieving high quality anime style rendering on Unity][From mobile to high-end PC_ Achieving high quality anime style rendering on Unity]

跳过前面的（有时间可以看完！收获很大！！1），直接重点看这一部分：

![e0df2fba8f934bc0bd782b7162e80267.png][]

#### **重点：多层着色** ####

为了让玩家感受到纵深、具有各种丰富形态以及动态光照变化的云渲染系统，游戏中实现了24小时动态变化的云，但并没有直接储存庞大数量的贴图，而是选择**多层着色**实现这个目的。

**使用了4个通道来表示云的光照及阴影**，如下图所示，从左到右依次为：基础照明、阴影1、阴影2和边缘光层。

![a43ead0263db4d6d83f16998d183f3ee.png][]

![abc40498f0fb4d9282a51a814746a38b.png][]

### 1.2 原神的云贴图 ###

上面提到的文章的做法：

![4847a9e43df44d9f82bb1abfd238f1e5.png][]

![65bc3fbd695942a688e6aee20e2b12ce.png][]

以及评论区有人说：

![92914bda498b43d2b81cc46a37fe1235.png][]

那么我们拿到原神的云贴图，看看它每个通道是不是这样的。

#### RGBA ####

![41a93c29d9da4aa1a965e9ac6c8faa9d.png][]

#### R ####

嗯，阴影，Shadow Layer。

![075546ad1019459da22b3331640d9c49.png][]

#### G ####

G是边缘光，对应上面崩坏3里的Rim Layer。

![9ac5ea2b7d0644f5b7b6bdc10ffe3d74.png][]

#### B ####

B通道就是上面评论区提到的SDF！

![fdfe4c5afef943e0a2ad442f1c4d828f.png][]

可喜可贺，我们知道了云贴图每个通道对应的内容是什么，那接下来就是如何拿着这个帖图去实现效果了。

#### 补充：SD中拆分 ####

![fc012bb889544d5d9273a500af23cd43.png][]

## 2 别人是怎么做的 ##

### 2.1 两个案例 ###

搜刮遍了只能找到两位大佬做出来我想要的效果：

[Unity NPR 原神Cloud,Sky，Shader][Unity NPR _Cloud_Sky_Shader]

![fafd9170556647bcb6e2b7c0f8c37b04.png][]

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

![635ac69ffe3645acbe10fb8eabc1036a.png][]

### 2.2 简单分析 ###

看看会发现，两位大佬实现的效果都有一种伴随着太阳光消散的感觉。第一位大佬没有具体说明该怎么做这个云，但是这个时候又要善于看评论区了！

![7e1a9ca38d3748a29e01ea279c6a8309.png][]

![9f28db0434ee4bdaa4667da09eb2de56.png][]

！解决了，这个生长数据（灰度图），就是上面展示的贴图里通道B的“灰度图”。

再看看第二位大佬的方法，很开心，知乎文章[Unity 卡通渲染 程序化天空盒][Unity _ _ -]里最后一部分介绍了云如何实现的，思路跟第一位大佬几乎一致！

接下来就是跟着文章里面介绍的实现思路来复刻一遍。

## 3 学习安排 ##

### 3.1 获得灰度图 ###

好的，现在已知方法，就差如何实践了，手上已经有了现成的云贴图，那么制作SDF灰度图的过程可以跳过：

![1f96106a2e4e49eabb5cab50dd165bad.png][]

与之对应的就是这张图：

![385052b69b32493d97909b33dbaff888.png][]

#### PS查看阈值 ####

那么我们模仿教程里的进度，也查看查看SDF图。

![4de3639e8aad4f899a864b9b81b833df.gif][]

### 3.2 学习SDF【已】 ###

虽然我们的SDF图不需要自己去做了，但是！SDF与卡通渲染一定是紧密相关的，要掌握！

[图形学基础|基于SDF的卡通阴影图\_桑来93的博客-CSDN博客][SDF_93_-CSDN]

[卡通渲染之基于SDF生成面部阴影贴图的效果实现（URP） - 知乎 (zhihu.com)][SDF_URP_ - _ _zhihu.com]

**学习记录**：[【Unity云消散】理论基础：实现SDF的8SSEDT算法\_九九345的博客-CSDN博客][Unity_SDF_8SSEDT_345_-CSDN]

### 3.3 Blender做云面片模型 ###

对应教程中的这一步：

![5e8e158de75c42e0a11278ef27db4ca0.png][]

打算趁机再巩固一下UV映射（本身是美术苦手TAT刚好学习一波！）

[Blender 2.8 UV 映射 Blender 2.8 UV Mapping][Blender 2.8 UV _ Blender 2.8 UV Mapping]

### 3.4 卡通渲染中的边缘光 ###

在之前的《入门精要》学习中，14.1就已经介绍过了NPR，由于这次想实现的天空盒其实就是卡通渲染的天空盒，所以这里再趁机进行巩固！结合下面这篇不错的文章进行边缘光的实现的学习。

[【Cel-Shading】边缘光的实现 | Invictus maneo (x-wflo.github.io)][Cel-Shading_ _ Invictus maneo _x-wflo.github.io]

### 3.5 跟教程写shader ###

![1957d4c86c2c4167ad1d425682bf4413.png][]

有了上面Blender获得的cloudTex和理论知识储备后，就可以开始参考教程中的代码进行实现了！

--------------------

总结一下，通过这次云的实现我可以：复习Blender展UV、学习NPR边缘光等、学习SDF等，接下来就是学习+实现！

[Unity _ _ -]: https://zhuanlan.zhihu.com/p/540692272
[From mobile to high-end PC_ Achieving high quality anime style rendering on Unity]: https://www.youtube.com/watch?v=egHSE0dpWRw
[e0df2fba8f934bc0bd782b7162e80267.png]: https://img-blog.csdnimg.cn/e0df2fba8f934bc0bd782b7162e80267.png
[a43ead0263db4d6d83f16998d183f3ee.png]: https://img-blog.csdnimg.cn/a43ead0263db4d6d83f16998d183f3ee.png
[abc40498f0fb4d9282a51a814746a38b.png]: https://img-blog.csdnimg.cn/abc40498f0fb4d9282a51a814746a38b.png
[4847a9e43df44d9f82bb1abfd238f1e5.png]: https://img-blog.csdnimg.cn/4847a9e43df44d9f82bb1abfd238f1e5.png
[65bc3fbd695942a688e6aee20e2b12ce.png]: https://img-blog.csdnimg.cn/65bc3fbd695942a688e6aee20e2b12ce.png
[92914bda498b43d2b81cc46a37fe1235.png]: https://img-blog.csdnimg.cn/92914bda498b43d2b81cc46a37fe1235.png
[41a93c29d9da4aa1a965e9ac6c8faa9d.png]: https://img-blog.csdnimg.cn/41a93c29d9da4aa1a965e9ac6c8faa9d.png
[075546ad1019459da22b3331640d9c49.png]: https://img-blog.csdnimg.cn/075546ad1019459da22b3331640d9c49.png
[9ac5ea2b7d0644f5b7b6bdc10ffe3d74.png]: https://img-blog.csdnimg.cn/9ac5ea2b7d0644f5b7b6bdc10ffe3d74.png
[fdfe4c5afef943e0a2ad442f1c4d828f.png]: https://img-blog.csdnimg.cn/fdfe4c5afef943e0a2ad442f1c4d828f.png
[fc012bb889544d5d9273a500af23cd43.png]: https://img-blog.csdnimg.cn/fc012bb889544d5d9273a500af23cd43.png
[Unity NPR _Cloud_Sky_Shader]: https://www.bilibili.com/video/BV1UU4y1F7YB/?vd_source=df915e2f42f68699ce7f9d08e53731c5
[fafd9170556647bcb6e2b7c0f8c37b04.png]: https://img-blog.csdnimg.cn/fafd9170556647bcb6e2b7c0f8c37b04.png
[Unity _ _]: https://www.bilibili.com/video/BV1kT411g7jC/?share_source=copy_web&vd_source=df915e2f42f68699ce7f9d08e53731c5
[635ac69ffe3645acbe10fb8eabc1036a.png]: https://img-blog.csdnimg.cn/635ac69ffe3645acbe10fb8eabc1036a.png
[7e1a9ca38d3748a29e01ea279c6a8309.png]: https://img-blog.csdnimg.cn/7e1a9ca38d3748a29e01ea279c6a8309.png
[9f28db0434ee4bdaa4667da09eb2de56.png]: https://img-blog.csdnimg.cn/9f28db0434ee4bdaa4667da09eb2de56.png
[1f96106a2e4e49eabb5cab50dd165bad.png]: https://img-blog.csdnimg.cn/1f96106a2e4e49eabb5cab50dd165bad.png
[385052b69b32493d97909b33dbaff888.png]: https://img-blog.csdnimg.cn/385052b69b32493d97909b33dbaff888.png
[4de3639e8aad4f899a864b9b81b833df.gif]: https://img-blog.csdnimg.cn/4de3639e8aad4f899a864b9b81b833df.gif
[SDF_93_-CSDN]: https://blog.csdn.net/qjh5606/article/details/119958786?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167210868216800217073127%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=167210868216800217073127&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-4-119958786-null-null.142%5Ev68%5Epc_rank_34_queryrelevant25,201%5Ev4%5Eadd_ask,213%5Ev2%5Et3_control2&utm_term=SDF%E5%9B%BE%E7%89%87&spm=1018.2226.3001.4187
[SDF_URP_ - _ _zhihu.com]: https://zhuanlan.zhihu.com/p/361716315
[Unity_SDF_8SSEDT_345_-CSDN]: https://blog.csdn.net/qq_41835314/article/details/128548073?spm=1001.2014.3001.5501
[5e8e158de75c42e0a11278ef27db4ca0.png]: https://img-blog.csdnimg.cn/5e8e158de75c42e0a11278ef27db4ca0.png
[Blender 2.8 UV _ Blender 2.8 UV Mapping]: https://www.bilibili.com/video/BV1mh411d7pG/?p=2&spm_id_from=333.1007.top_right_bar_window_history.content.click&vd_source=df915e2f42f68699ce7f9d08e53731c5
[Cel-Shading_ _ Invictus maneo _x-wflo.github.io]: https://x-wflo.github.io/2021/08/02/Cel-shading2/
[1957d4c86c2c4167ad1d425682bf4413.png]: https://img-blog.csdnimg.cn/1957d4c86c2c4167ad1d425682bf4413.png