Notifications
Article
教程|使用Shader Graph实现程序化天空盒
Updated 9 days ago
702
12
本文来自荷兰开发者Tim Coster,作者分享了通过使用Unity Shader Graph如何轻松地制作自定义天空盒着色器。
原文地址:https://timcoster.wordpress.com/2019/09/03/unity-shadergraph-skybox-quick-tutorial/
本文我们将使用Shader Graph着色器视图,通过为天空盒每个图层创建函数部分,实现完全可定制的天空盒效果。我们会从天空颜色开始处理,然后添加太阳、云层和星星的效果,通过在场景中旋转定向光实现昼夜交替效果。
本文使用Unity 2019.2.4f1的LWRP模板进行开发。
小贴士:
  • 荷兰已更名为“尼德兰”,轻量级渲染管线LWRP已更名为通用渲染管线URP。本文沿用作者原表述,请开发者在使用中注意不同版本Unity中渲染管线模版名称。

创建天空盒材质

1、创建Unlit Shader Graph
右键单击项目窗口,选择Create > Shader > Unlit Graph。
2、创建新材质
在项目窗口创建新材质,把新建的着色器视图资源拖到材质上,给材质指定着色器。
3、 给天空盒指定材质
打开Window > Rendering > Lighting Settings,把材质拖到Environment设置的Skybox Material属性栏中。
4、打开Shader Graph
双击项目窗口中天空盒的着色器视图文件,打开该视图。
5、简单的渐变天空效果测试
为了确保一切正常工作,我们可以创建非常简单的渐变天空盒进行测试,只需使用归一化世界位置的绿色通道(即Y轴),把该数据传入Sample Gradient节点即可。
归一化世界位置的范围在-1到1之间,-1表示世界的底部,1表示世界的顶部中心位置,为了让该数值可以传入Simple Gradient节点的Time输入,我们需要把数值重映射为0到1的范围。
如果可以在整个天空盒使用Simple Gradient节点的话,处理过程会非常方便,但目前Shader Graph无法把Simple Gradient节点作为属性进行公开。为了避免在调整这部分时反复打开视图,我们会使用三种颜色属性,并把它们混合起来。

添加天空图层

我们的Shader Graph节点设置会混合三个公开的HDR颜色属性,分别用于天空、地平线和地面。
我们可以使用Exponent1属性来调整地平线和地面之间的渐变柔和度,使用Exponent2属性来调整地平线和天空之间的渐变柔和度,使用Intensity属性来调整总体的亮度。
通过使用HDR颜色,我们可以让天空发出的光线接近地平线中点的颜色。如果把HDR颜色和摄像机上的泛光后期效果结合起来,我们可以实现更好的效果

添加太阳

现在,我们给天空盒添加太阳,太阳的位置基于场景定向光的方向,因此我们首先创建获取场景中主光源方向的自定义Main Light节点。
了解创建自定义主光源节点的方法,请阅读:《在Unity 2019.2中扩展Shader Graph,实现自定义光照》。
创建自定义节点并在其它视图重用的最好方法是:首先创建Custom Function节点,然后把它转换为Subgraph子视图。
自定义节点函数.hlsl文件和SubGraph子视图都可以通过下面链接进行下载,文件分别位于Subgraphs文件夹和CustomNodes文件夹中:
https://github.com/Timanious/MyShaderGraphs/tree/master/MyShaderGraphs_Project/Assets/_ShaderGraphs
如果想创建自定义节点,我们可以按照以下步骤创建Main Light节点。
1、创建Custom Function节点
右键单击Shader Graph空白部分,创建Utility分类下的Custom Function节点。
2、添加输入参数和输出参数
点击Custom Function节点上的齿轮图标,添加以下输入和输出参数。
3、函数名称
该节点使用的函数名称在.hlsl文件中是MainLight,因此我们在Name字段输入MainLight。
4、添加HLSL包含文件
我们发现,如果把类型设为字符串,自定义函数节点会有内联函数的选项。如果使用独立的HLSL包含文件,我们可以取得更高的灵活性,HLSL文件可以包含更加复杂的函数,而且我们可以让所有功能都很好地组织在一个位置。
Unity尚未提供方便的菜单选项来创建HLSL包含文件资源,因此我必须自己创建该文件。例如:我可以创建常见的Unlit .shader文件,把文件扩展名改为.hlsl,然后移除其中的代码。
我创建了名称为CustomLighting.hlsl的文件,并把下面脚本的代码复制到该文件中:
github.com/Timanious/MyShaderGraphs/blob/master/MyShaderGraphs_Project/Assets/_ShaderGraphs/CustomNodes/CustomLighting.hlsl
5、指定.hlsl文件
把CustomLighting.hlsl文件拖到节点的Source属性栏,把它指定给自定义函数节点。
6、转换为子视图
右键单击Custom Function节点,选择Convert to Sub-graph,命名为MainLight。
7、添加子视图输出
打开新的子视图,把Custom Function节点的WorldPos输入连接到Position节点。然后在Output节点创建4个新的输入,它们分别对应着Custom Function节点的4个输出。
8、组织子视图节点
如果此时观察Blackboard面板,我们会发现在子视图名称下方,可以指定子视图在节点创建菜单的位置。
如果改为Input/Lighting,该子视图会和其它Input/Lighting分类下的节点保存在相同目录,以便我们轻松找到它。
9、指定太阳的位置
现在我们能够获取场景的主光源方向,我们可以使用该信息来确定太阳的位置。
这个视图会从观察方向和主光源反方向获取点积。太阳的大小、光强和柔和度可以通过Radius、Intensity和Exponent变量来调整。场景中主光源的颜色也会给太阳提供颜色。
10、把太阳添加到天空
我们使用Add节点,把太阳的输出和天空颜色相加。

添加云层

构造云层需要很多步骤,但过程很简单。下面我会逐步构造云层,你可以自行决定自己的云层需要哪些信息。
为了更好展示操作步骤,大部分示例使用了通过Photoshop创建的RGB圆形测试图,并通过CatlikeCoding的NumberFlow Unity插件创建了噪声云纹理和法线贴图,NumberFlow插件也是一个节点工具,用于创建程序化纹理。
下载本文使用的纹理:
https://timcoster.wordpress.com/2019/09/09/tileable-clouds-texture/
如果希望使用自定义纹理,那么最好使用透明的.PNG文件,而不是黑色和白色构成的图像。这样云不会带有灰色边缘,而是带有白色透明边缘。此外,我们还要确保纹理拥有Alpha通道。
1、添加云层
下图的节点设置会为云的纹理生成无限大的平面图层
我们可以使用Blend节点,把透明云纹理和天空颜色及太阳混合起来。
通过在Blend节点的Opacity输入点连接纹理的Alpha通道,并把Blend节点设为Overwrite模式,我们可以取得不错的结果。
2、添加远处的平铺效果
如果给远处平铺效果添加属性,我们可以让地平线和摄像机的距离看起来更近。
对于RGB圆形示例,我们把属性值设为0.1,而对于云层,我们把该值设为0.25。
3、添加纹理平铺
添加纹理平铺属性后,我们可以控制纹理的大小,我们在此把该属性设为0.05。
4、添加纹理偏移
我们添加Vector2类型的云纹理偏移属性,该属性将在之后用于实现云的动画效果。
5、添加Cutoff属性
我们在此添加Distance属性和Cutoff属性,从而控制云向地平线方向逐渐消失的效果。在本示例中,Distance值设为0.8,Cutoff值设为25。
6、添加Opacity属性
我们可以通过让云纹理的Alpha通道乘以Vector1类型的不透明度属性,添加不透明效果。下面的示例中,Opacity值设为0.5。
7、添加法线贴图
我们可以添加对法线贴图纹理的支持,根据光线方向来确定深度。在定向光向下直射时,这样会在云的底部呈现阴影效果。
为法线贴图添加Sample Texture节点时,我们要确保把节点类型设为Normal。同时还要在Blackboard面板上,把云法线贴图纹理的属性设为Bump模式。
自定义Main Light函数节点在子视图之外使用,因为它使用的是切线位置,而不是世界位置。我们可以从Main Light子视图复制自定义节点。
本示例中,我们把法线贴图强度设为0.8。
8、添加亮度
为了控制云的亮度,我们添加一个Vector1属性、Add节点、Subtract节点和Multiply节点。
把Brightness亮度值减去1,然后加上Blend节点的输出结果。
把Brightness值减去1后,该值为1时会呈现正常的亮度,而该值为0时则完全没有光亮,从而避免出现Brightness值为0时出现正常的光亮。
我们把法线贴图强度乘以Brightness属性,然后把结果传入Blend节点,让Brightness值影响Blend节点的输出。
下图中,左图的Brightness值设为0.1,右图的Brightness值设为1.5。
9、添加定向光颜色
如果把纹理乘以Main Light颜色输出,我们可以让定向光的颜色影响云的颜色。下面的示例图中,我们把光线颜色分别设为浅橙色和淡蓝色。
10、整理图层
为了让不同图层的叠加效果更自然,我们可以整理视图,让顺序变为“太阳+天空+云层”,最靠近摄像机的部分会最后添加。

添加夜晚的天空

现在,我们得到了出现太阳的天空和基础云层,就可以开始添加星星。
为了在添加后更好地看到星星,如果可以对混合部分使用阳光的方向,自动把白天天空颜色转为夜晚天空颜色,这样会大大方便我们的工作。
我们可以使用类似太阳部分的位置输入,让它在颜色a和颜色b之间插值,同时对天空的Exponent1和Exponent2属性执行相同的操作,让地平线在晚上显得更细。
在添加星星前,我们要调整天空颜色图层。
1、添加夜晚天空的属性
添加3个Color属性,用于控制夜晚的天空颜色,添加2个Vector1属性,用来调整夜晚天空的柔和度。

2、插值颜色
使用Lerp节点调整颜色属性和柔和度属性,然后按照下图部分把它们连接起来。
第一张图是原来的天空视图,第二张图是新的天空图层,我们在图中选中了新增的节点,因此会出现蓝色边框。

添加星星

现在,我们可以过渡到夜晚的天空颜色,因此可以添加星星图层到天空盒上。本文使用了非常简单的黑白星星纹理,你也可以使用效果更加丰富的纹理。
1、球体映射空间
下面的节点设置可以提供星星纹理的球体映射。由于在创建时没有让纹理正好包围球体,因此在下图出现了一些瑕疵。纹理在地平线附近时,纹理会逐渐消失,所以瑕疵在这里影响不大。
2、添加强度
把星星纹理的RGB输出乘以强度值,从而控制星星的亮度。
3、添加纹理偏移
我们给UV坐标添加Vector2类型的偏移值,然后把结果导入纹理,这样可以控制星星纹理的位置,以便后面添加动画。

4、添加地平线的淡化效果
为了让地平线附近的星星逐渐淡出,我们可以使用Power节点和Fadeout属性,在此对纹理进行乘法计算。
5、添加昼夜交替效果
在Lerp节点的T输入点使用光线方向的点积结果,然后把Lerp节点结果乘以之前的结果,我们便可添加昼夜交替的过程。
在定向光向上时,我们可以看到星星,而在定向光向下时,则无法看到星星。
6、添加星星图层
整理视图,把星星部分放在视图的上方。星星的距离最远,因此我们要首先绘制星星图层。
我们把所有部分结合起来,然后在拥有地面的小型测试场景使用该着色器。
在场景中,指数雾的数值很小,大约是0.0006左右,我也启用了一些后期处理效果,让天空盒效果有更接近游戏的感觉。
使用Shader Graph实现程序化天空盒为大家介绍到这里,你也可以添加落日效果,使用C#组件来让定向光的强度受到方向影响、对云层进行亮度、定向光颜色和云层颜色相加的调整,从而实现一个精致的天空盒效果。
开发过程中遇到问题?打开Unity Connect App或者Unity编辑器内置群聊工具,在“技术交流”群聊组中提问。
Tags:
Unity教程推荐
9
Comments
l
lindexi
8 days ago
膜拜
0
K
K
9 days ago
悠悠教程图片已更新
哇!哭了!感谢!
0
Ann
9 days ago
悠悠教程图片已更新
感动的哭了!!感谢!
0
悠悠
Staff
9 days ago
K我的天啊!我看不清图片。谁能能做完发我份
教程图片已更新
1
悠悠
Staff
9 days ago
Ann🥺啥也看不清啊
教程图片已更新
1