【程序化天空盒】过程记录01：日月天空渐变大气散射

骑猪看日落 2023-09-23 18:26 126阅读 0赞

## 1 日月 SunAndMoon ##

昼夜的话肯定少不了太阳和月亮，太阳和月亮实现的道理是一样的，只不过是月亮比太阳多了一个需要控制月牙程度（or添加贴图）的细节~

### 1.1 Sun ###

太阳的话很简单，直接在shader里实现一个太阳跟随平行光旋转而旋转的样子就行。实现这个效果需要用到Unity内置变量\_WorldSpaceLightPos0获取当前平行光的方向，不要被这个参数名字“lightPos”迷惑了，它实际上就是一个归一化的vector（w=0）。接着用Unity内置的distance函数计算当前uv坐标（i.uv.xyz）到上面那个的距离。

如何理解这个“距离”呢？——我们再来复习一遍图形学基础吧：学习齐次坐标时讲到“点与向量的区别”时，例如vector(a, b, c, 0)和point(a, b, c, 1)，我们可以把vector看作这个point挪向无穷远处位置。行，那么我们再来看看这个distance计算出来的结果的几何意义是不是就十分简单了——**uv坐标越靠近，代表离这个无穷远处的点越近，于是结果越小。**

*  我们需要的是一个实心圆（模拟“日月”），如果只将distance的结果与\_SunColor相乘并作为片元着色器的结果输出，主要代码及效果如下：

float sun = distance(i.uv.xyz, _WorldSpaceLightPos0);
    ...
    fixed4 col = sun * _SunColor;

![0d6d2253b626499585f80d359790f8ed.png][]

*  场景中越靠近远处的“太阳”位置越黑，想要实现一个实心圆就很简单了，补充后代码及效果如下：

float sun = distance(i.uv.xyz, _WorldSpaceLightPos0);
    float sunDis = 1 - sun / _sunRadius;
    ...
    fixed4 col = sunDis * _SunColor;

![4b9668e48f5845c0b2d6a19b491f420a.png][]

为了实现控制最大化，加入了\_sunRadius参数以控制“太阳”的大小，选择除法的原因也很简单——太阳越大意味着白色部分越大，意味着disatance()函数计算结果的权重更加分散，所以是除法。

*  到了这一步你会发现，上图还是缺点什么！

【第一】边界有些模糊，我们想实现的效果是轮廓明显的“日月”，这是因为**边界的sunDis数值不够大**，导致\_sunColor相乘混合的颜色“淡”。如何处理？——简单，直接乘上个合适的倍数就行！

【第二】原有的网格不见了，给人一种黑色“笼罩”整个天空盒的错觉。看到这里你似乎会觉得疑惑：“网格不见了”啥意思？我来举个例子，下面是我将sunDis值分别设置为1，0，-1的效果：

![d9ccd5e5f6464bd4bdab4857d070c5f5.png][]

![ca2c70237b5c492dbdfb6c6adef8243c.png][]

![dfcd2e054aac4f99883c6bcfe8abd083.png][]

2和3看似都是黑色，其实还是有差别的，他会掩盖网格。而且这个sunDis系数最后是跟类型为Color的\_SunColor变量相乘，参考光照计算模型，这里理应将该系数也限制在(0, 1)，这里用saturate()就行！

考虑了以上两点后最终的代码：

float sun = distance(i.uv.xyz, _WorldSpaceLightPos0);
    float sunDis = saturate((1 - sun / _sunRadius) * 50);
    ...
    fixed4 col = sunDis * _SunColor;

最终效果：

![552861966dd048a59f16aa834198c81a.gif][]

### 1.2 Moon ###

太阳做完了，到了月亮部分，它俩一个在光的正方向（太阳）一个在反方向（月亮），这个不难理解吧！所以，关于跟随平行光方向的部分，设置跟Sun一样，只是多了一个负号。

这里我计划实现两种月亮的方法，一种是贴上一个真实的月亮图片，另一个是做一个简单的可以控制的月牙形状。

#### 第一种：月牙 ####

另外，由于月亮是有月牙的~就用两个圆相减的形式做出月牙的效果，相减效果采用给uv.x一个偏移值\_CrescentOffset的方法实现的。同样，这里也需要注意只要涉及相减的需要给数值规范到(0, 1)才能确保效果的正确。

下面是月亮部分的代码：

//2.Add Moon
    float moon = distance(i.uv.xyz, -_WorldSpaceLightPos0);
    float moonDis = saturate((1 - moon / _MoonRadius) * 50);
    float crescent = distance(float3(i.uv.x + _CrescentOffset, i.uv.yz), -_WorldSpaceLightPos0);
    float crescentDis = saturate((1 - crescent / _MoonRadius) * 50);
    moonDis = saturate(moonDis - crescentDis);
    fixed4 moonN = moonDis * _MoonColor;

最终效果：

![d3f5fbceca334c3cae5710a4e576d6fd.gif][]

#### 第二种：月亮贴图 ####

贴图主要问题是解决**UV坐标系变换**问题，因为如果继续用原始的改变光照方向后月亮贴图会变形的问题，我们希望每个角度贴图形状都是圆圆的（参考日常生活中每个角度的月亮都是圆圆的），那么我们就需要一个建立一个4x4的坐标系变换矩阵去实现。

问题又来了：Unity自带的变换矩阵unity\_WorldToLight对于平行光是行不通的，只适用于point/spot/烘焙光，所以这里我们需要自己脚本实现变换矩阵。这里我们不难想到shadowmap里也需要求得光源空间的变换矩阵，可以参考我记录的[GAMES202作业1][GAMES202_1]中**CalcLightMVP()**的实现过程去写出这个变换矩阵，还可以跟着这一篇[用Unity实现Shadow Map][Unity_Shadow Map]的博客实现这个变换矩阵，道理都是相通的。

更方便的还可以用Unity自带的transform的worldToLocalMatrix获得当前对象的世界空间到local空间的变换矩阵，给场景中的平行光一个子Camera再获取一下这个变换矩阵就行（后面会补充完整脚本内容和shader部分的内容，这里就先放一个效果）。

效果如下，加上了一点后面会做的渐变天空效果：

![00ec704793b14a27ab8718543af2c804.gif][]

## 2 天空主体色 Gradient Sky ##

### 1.0版本 ###

完成了日月交替的部分只能说才实现了一小部分，而且天空很单调，为了实现更加酷炫的效果，加点渐变天空颜色。说起渐变，要用上lerp()了！分别给白天天空和晚上天空赋予颜色——基于UV坐标的y 轴值来做天空颜色的渐变，记住还是需要saturate()！最后根据uv坐标（i.uv.y）判断何时昼夜交替。

// 3.gradient sky
    fixed3 gradientDay = lerp(_DayBottomColor, _DayTopColor, saturate(i.uv.y));
    fixed3 gradientNight = lerp(_NightBottomColor, _NightTopColor, saturate(i.uv.y));
    fixed3 gradientSky = lerp(gradientNight, gradientDay, saturate(_WorldSpaceLightPos0.y));

### 2.0版本 ###

上面的渐变天空简单的lerp做的，很枯燥。参考[程序化天空盒实现昼夜变换][Link 1]，我们也来这位大佬的构思思路，做一次分析（毕竟是作品集，所有过程自己实现一遍最好啦！），也天空变化归纳了出来：

![273e5485bfc943b8a82a4cb15db73b45.png][]

参考他提出的思路，地平线渐变用worldPos.y控制，但天空的主体颜色用光方的z和y共同控制，关于天空主体色我的理解：

（纠正一下，感觉早晨不是supper blue而是一种偏绿色的蓝色？颜色可以自行调整的）

![7d9e86d1936349578b28aebd44075a1b.jpeg][]

即从早晨开始，早晨（非常蓝）-->中午（正常蓝）-->傍晚（紫色）-->深夜（深蓝色），其中，y控制着白天和晚上，z控制白天三种颜色变换、晚上三种颜色交替

白天：

![069b05e00cbc4ee6b3e6bde51ab73ff1.jpeg][]

上述思路对应的理解代码为，

// 早午过渡
    col = lerp(morningCol, noonCol, smoothstep(0,0.5,z));
    // 再把上面的当作午的，进行午傍晚过渡
    lerp(col, nightfallCol, smoothstep(0.5,1,z));

同理晚上：

![023700bad84548dab3b1d6d6749a5b01.jpeg][]

// 早晚过渡
    col = lerp(morningCol, nightCol, smoothstep(0,0.5,z));
    // 再把上面的当作晚的，进行晚和傍晚的过渡
    lerp(col, nightfallCol, smoothstep(0.5,1,z));

再优化一下：我想要清晨和傍晚的颜色持续的少一点，白天的天蓝色维持的久一点，这样就需要更改参数，索性直接多给两个参数，来调节一天内清晨和傍晚的持续时间，最终关于天空颜色早晚变化的参数如下：

![48b64b8ae2ed428191c05bc0ade7c078.png][]

## 3 地平线渐变 ##

跟参考文章不太一样的是，我把渐变天空分为两个部分：半天空渐变色+范围变化的Bloom，虽然这样比较麻烦（叠加了三层orz），但原神有些画面它就是三种颜色叠加的效果，例如下图傍晚的天空：

![31fda938f2a842d89d9797df4a05bf2c.png][] 原神的傍晚天空

索性直接拆成三块做。

### 3.1 半天空渐变 ###

半天空渐变色有4种颜色，4个颜色变化的时间刚好跟天空主题渐变色对应，

1 晚上：深蓝色+淡色地平线

早晨：浅蓝色+淡色地平线

中午：天蓝色+浅蓝地平线

傍晚：紫色+淡黄色地平线

![eb66a70b99d7417d895bc51ba08a348a.png][]

由于这个是跟主色叠加，是不是应该在天空主体渐变的基础上修改，达到天空主色渐变的感觉：

好，说做就做，以早晨为例，还需要能控制渐变程度等，最后的参数如下：

![b1d24b726bfc4cccaee457157d3ae5c4.png][]

![8fd83ccef1cd46beaf39bb6857f9b072.png][]

整个天空颜色很接近了（斗胆），现在就差地平线附近的Bloom。

### 3.2 范围变化的Bloom ###

（做了一下午了，起来活动一下继续，orz，，）

再继续观察：

早->午：红色（小）-->黄色（大）-->白色（小）

傍晚->晚上：黄色（大）-->橙黄色（超大）-->黄色（小）

![3f51d5e8a6bc45fd961992e5078cf671.png][]

（补充：既然节点4Mie散射开始，那我们把大部分白色的Bloom都交给Mie散射，假设整个发光到节点4就宣告结束。）

【空缺了一部分思路，这里做得比较着急没有记录，放个对比图吧之后补充】

![d5e66f46ec8448a88e245679a794dfe7.png][]

日出日落配上天空颜色变化：

![2a43134e81284da68724eaebbe47ca6b.gif][]

![9a71e60eac0945d1a0edfeda15ee8fdc.gif][]

emmm配色什么的感觉挺脏的，然后bloom那里需要给参数调整的，做的时候随便选的，先继续进行下面的步骤，最后再优化。

接下来是加上云、和星空银河，放在下一篇文章吧。

我上面实现渐变天空选择的颜色还是照抄参考里的配色。但是！我认为一个优秀的天空盒，配色一定是要有讲究的！配色的实现方法打算参考[这篇文章][Link 2]里提到的将配色数据做成数组形式，像动画关键帧那样呈现出来的方法。

## 3 大气散射 ##

做的时候没有记录过程，作品搞完后会回来补上。

## 参考 ##

这里是我搜刮遍了各种网站找到的实现动态天空盒的文章，自己在做的过程中也参考了很多，这里罗列出来希望对看到这篇文章的你有所帮助：

[风格化的动态天空球 – WalkingFat][Link 2]

[Unity日夜循环天空球(Procedural Skybox) - 知乎][Unity_Procedural Skybox_ -]

[Making a Stylized Skybox Shader][]

[Unity 卡通渲染 程序化天空盒 - 知乎][Unity _ _ -]

[【unity URP】昼夜循环天空球 - 知乎][unity URP_ -]

[程序化天空盒实现昼夜变换 - 知乎 (zhihu.com)][Link 1]

[0d6d2253b626499585f80d359790f8ed.png]: https://img-blog.csdnimg.cn/0d6d2253b626499585f80d359790f8ed.png
[4b9668e48f5845c0b2d6a19b491f420a.png]: https://img-blog.csdnimg.cn/4b9668e48f5845c0b2d6a19b491f420a.png
[d9ccd5e5f6464bd4bdab4857d070c5f5.png]: https://img-blog.csdnimg.cn/d9ccd5e5f6464bd4bdab4857d070c5f5.png
[ca2c70237b5c492dbdfb6c6adef8243c.png]: https://img-blog.csdnimg.cn/ca2c70237b5c492dbdfb6c6adef8243c.png
[dfcd2e054aac4f99883c6bcfe8abd083.png]: https://img-blog.csdnimg.cn/dfcd2e054aac4f99883c6bcfe8abd083.png
[552861966dd048a59f16aa834198c81a.gif]: https://img-blog.csdnimg.cn/552861966dd048a59f16aa834198c81a.gif
[d3f5fbceca334c3cae5710a4e576d6fd.gif]: https://img-blog.csdnimg.cn/d3f5fbceca334c3cae5710a4e576d6fd.gif
[GAMES202_1]: https://blog.csdn.net/qq_41835314/article/details/125726339
[Unity_Shadow Map]: http://richbabe.top/2018/06/27/%E7%94%A8Unity%E5%AE%9E%E7%8E%B0Shadow-Map/
[00ec704793b14a27ab8718543af2c804.gif]: https://img-blog.csdnimg.cn/00ec704793b14a27ab8718543af2c804.gif
[Link 1]: https://zhuanlan.zhihu.com/p/603032215
[273e5485bfc943b8a82a4cb15db73b45.png]: https://img-blog.csdnimg.cn/273e5485bfc943b8a82a4cb15db73b45.png
[7d9e86d1936349578b28aebd44075a1b.jpeg]: https://img-blog.csdnimg.cn/7d9e86d1936349578b28aebd44075a1b.jpeg
[069b05e00cbc4ee6b3e6bde51ab73ff1.jpeg]: https://img-blog.csdnimg.cn/069b05e00cbc4ee6b3e6bde51ab73ff1.jpeg
[023700bad84548dab3b1d6d6749a5b01.jpeg]: https://img-blog.csdnimg.cn/023700bad84548dab3b1d6d6749a5b01.jpeg
[48b64b8ae2ed428191c05bc0ade7c078.png]: https://img-blog.csdnimg.cn/48b64b8ae2ed428191c05bc0ade7c078.png
[31fda938f2a842d89d9797df4a05bf2c.png]: https://img-blog.csdnimg.cn/31fda938f2a842d89d9797df4a05bf2c.png
[eb66a70b99d7417d895bc51ba08a348a.png]: https://img-blog.csdnimg.cn/eb66a70b99d7417d895bc51ba08a348a.png
[b1d24b726bfc4cccaee457157d3ae5c4.png]: https://img-blog.csdnimg.cn/b1d24b726bfc4cccaee457157d3ae5c4.png
[8fd83ccef1cd46beaf39bb6857f9b072.png]: https://img-blog.csdnimg.cn/8fd83ccef1cd46beaf39bb6857f9b072.png
[3f51d5e8a6bc45fd961992e5078cf671.png]: https://img-blog.csdnimg.cn/3f51d5e8a6bc45fd961992e5078cf671.png
[d5e66f46ec8448a88e245679a794dfe7.png]: https://img-blog.csdnimg.cn/d5e66f46ec8448a88e245679a794dfe7.png
[2a43134e81284da68724eaebbe47ca6b.gif]: https://img-blog.csdnimg.cn/2a43134e81284da68724eaebbe47ca6b.gif
[9a71e60eac0945d1a0edfeda15ee8fdc.gif]: https://img-blog.csdnimg.cn/9a71e60eac0945d1a0edfeda15ee8fdc.gif
[Link 2]: http://walkingfat.com/%E9%A3%8E%E6%A0%BC%E5%8C%96%E7%9A%84%E5%8A%A8%E6%80%81%E5%A4%A9%E7%A9%BA%E7%90%83/
[Unity_Procedural Skybox_ -]: https://zhuanlan.zhihu.com/p/197107007
[Making a Stylized Skybox Shader]: https://www.patreon.com/posts/making-stylized-27402644
[Unity _ _ -]: https://zhuanlan.zhihu.com/p/540692272
[unity URP_ -]: https://zhuanlan.zhihu.com/p/404704243