Shader Graph（一）基本使用

迈不过友情╰ 2023-09-23 20:16 26阅读 0赞

## 一、如何使用Shader Graph ##

### 1.1 新建项目 ###

通过创建URP或HDRP模板项目，可以自动配置好Shader Graph。  
![e048422cde2e46bdb0e53415026fb562.png][]

### 1.2 已有项目 ###

在「Package Manager」中安装「Shader Graph」及URP或HDRP组件。然后在弹出的渲染管线向导面板中点击「Fix All」即可。如果项目中存在已经创建好的材质，则需要在向导面板最下方将项目的材质升级到对应的渲染管线。  
![ba1960db7bd85353d3ec97035555519d.png][]

## 二、创建第一个Shader Graph ##

下面来编写我们的第一个Shader Graph。首先在目录中右键「Create -> Shader Graph -> HDRP -> Lit Shader Graph」创建一个新的Shader Graph。  
![40952418e0c01f4cca3bb631f9801bb4.png][]

然后双击打开，就可以看到Shader Graph的编辑界面  
![7f209c435d48e01f31ba61bbd96fae60.png][]

接下来在空白处右键「Create Node」创建一个节点，并选择「Input -> Basic -> Color」。  
![940dfb54a3011098ab95cddcb2b1d8a6.png][]

创建完成后会出现如下所示的节点  
![36bfdff94e81a97850b1b55d3456df07.png][]

我们需要将它的输出连接到片元着色器的输入上  
![bc69037fc8ddad980312c7744ebcdd67.png][]

然后点击左上角的「Save Asset」，第一个Shader Graph就编写好了。接下来创建一个材质球，并应用我们刚才创建的Shader Graph。然后把材质挂载到场景中的物体上，效果如下  
![3c33ab6a6194f333f7ec360298c15e66.png][]

如果我们想改变物体的颜色，需要在Shader Graph编辑器中手动修改Color节点  
![3c626c9dc6d757028580fd99f8d86f89.gif][]

这样显然很不方便。为了能直接在Inspector面板中随时更改物体的颜色，我们需要在左侧的面板中新建一个Color类型的变量，然后拖拽到编辑器中，并将其连接到片元着色器的输入端  
![e126153a0e1559d734933c671927394f.gif][]

保存Shader Graph。然后我们就能在材质的Inspector面板上手动调整颜色了  
![59aca00b1966daa3357619c205db9ce1.png][]

## 三、顶点着色器 ##

### 3.1 改变顶点位置 ###

我们知道顶点着色器的作用之一是将本地坐标下的顶点变换到裁剪空间。所以如果在顶点着色器中，对其位置信息进行修改，那么最终渲染出的顶点位置也会相应的发生变化。

比如我们在Shader Graph中创建一个「Position」节点用来接收物体本地坐标下的顶点坐标，然后再添加一个「Add」节点，对顶点坐标的Z轴进行修改，最后再将结果传入Vertex  
![88f4051659429b71208dc5d4c0f7aecc.png][]

就可以看到如下效果。渲染的物体在Z轴上产生了偏移。  
![0ae0a4921276a81654eb94f4ea10ada6.png][]

### 3.2 动态改变顶点位置 ###

上面这种偏移是固定的，如果我们想让物体随时间动态地进行偏移又该如何实现呢？其实Unity在Shader Graph中提供了「Time」这种节点  
![582a7228bdaa0900aa6127349a788503.png][]

它的输出值就是自场景加载开始经过的时间，以及该时间的一系列三角函数值。这里我们要使用到「Sine Time」。因为正弦函数值是相对原点往复变化的，所以通过正弦值改变物体的偏移值正好能够实现往复运动的效果。接下来就是将「Time」的输出值加到顶点的位置信息中。这里仍然是加到Z轴上  
![52ce57c3e8f2c734ce26d8246028044b.png][]

效果如下  
![48aef4d5d917d906f22b5c110718b5fc.gif][]

如果在编译器模式下看不到运动效果，可以打开编译器模式下的「Always Refresh」选项  
![f70cbdcdf8b4b7d47aa82e1eb8263b61.png][]

接下来加大难度。虽然我们在前面实现了顶点的动态移动效果，但只是整体上对所有的顶点进行移动。如果让所有的顶点错开进行移动，就可以更加柔软的效果。

为了实现这一效果，我们就不能对所有的顶点增加同样的偏移值，而是根据顶点的位置确定不同的偏移值。具体的做法是将顶点位置的X值与时间值相加后再取正弦值，然后再增加到Z轴上。  
![ded20ba698c75f48d2fa60dd07adf9c2.png][]

效果如下  
![5a13f623f09971817f68d22126bba587.gif][]

## 四、片元着色器 ##

### 4.1 改变片元颜色 ###

片元着色器主要的作用是计算片元的颜色值。我们可以通过改变Fragment下的Base Color来改变物体最终渲染的颜色  
![5068106f9f94b0d79bd392b8823ebc07.png][]

效果如下  
![6385eb20b2c26066cc01a08be823e4af.png][]

如果想让颜色多一些变化，可以根据法线的方向来决定最终的颜色值  
![418ad7f9d1975631ec606eb2874f3d94.png][]

效果如下  
![6e0d0b8e069f43b17f8e88636af951d9.png][]

可以发现有一部分区域是黑色，这是因为法线各分量的取值范围为\[-1,1\]，而颜色各分量的取值范围为\[0,1\]，小于0的部分按0取值。所以法线的各个分量都小于0时，就会取到黑色。解决方法也很简单，只需要对法线向量`n*0.5+0.5`，即可将法线向量的取值范围映射到\[0,1\]。  
![f3b7dd9d2d9b4472820d52155ad0b266.png][]

效果如下  
![0581e1140ed17dbff85998ec02306933.png][]

### 4.2 光照模型 ###

接下来我们尝试使用Shader Graph实现一个之前学过的光照模型——半兰伯特模型的效果。

首先创建一个「Unlit Shader Graph」，这是一种不考虑场景光照的Shader。我们可以通过自己定义的变量模拟光照效果。创建如下变量：DiffuseColor（材质颜色）、DIrectionLightVector（平行光方向）、DirectionLightColor（平行光颜色）、DirectionLightIntensity（平行光强度）。然后根据半兰伯特模型的公式  
 c d i f f u s e = ( c l i g h t ⋅ m d i f f u s e ) ( 0.5 ( n ⋅ l ) + 0.5 ) c\_\{diffuse\}=(c\_\{light\}·m\_\{diffuse\})(0.5(n·l)+0.5) cdiffuse=(clight⋅mdiffuse)(0.5(n⋅l)\+0.5)  
形成如下连线  
![02f25d2596cb32cb0ab74564130ab027.png][]

效果如下  
![945e8af4d8f3c2dff0d76ff1f98c8e3e.png][]

## 五、参考资料 ##

\[1\]. https://www.sikiedu.com/course/907/

[e048422cde2e46bdb0e53415026fb562.png]: https://img-blog.csdnimg.cn/img_convert/e048422cde2e46bdb0e53415026fb562.png
[ba1960db7bd85353d3ec97035555519d.png]: https://img-blog.csdnimg.cn/img_convert/ba1960db7bd85353d3ec97035555519d.png
[40952418e0c01f4cca3bb631f9801bb4.png]: https://img-blog.csdnimg.cn/img_convert/40952418e0c01f4cca3bb631f9801bb4.png
[7f209c435d48e01f31ba61bbd96fae60.png]: https://img-blog.csdnimg.cn/img_convert/7f209c435d48e01f31ba61bbd96fae60.png
[940dfb54a3011098ab95cddcb2b1d8a6.png]: https://img-blog.csdnimg.cn/img_convert/940dfb54a3011098ab95cddcb2b1d8a6.png
[36bfdff94e81a97850b1b55d3456df07.png]: https://img-blog.csdnimg.cn/img_convert/36bfdff94e81a97850b1b55d3456df07.png
[bc69037fc8ddad980312c7744ebcdd67.png]: https://img-blog.csdnimg.cn/img_convert/bc69037fc8ddad980312c7744ebcdd67.png
[3c33ab6a6194f333f7ec360298c15e66.png]: https://img-blog.csdnimg.cn/img_convert/3c33ab6a6194f333f7ec360298c15e66.png
[3c626c9dc6d757028580fd99f8d86f89.gif]: https://img-blog.csdnimg.cn/img_convert/3c626c9dc6d757028580fd99f8d86f89.gif
[e126153a0e1559d734933c671927394f.gif]: https://img-blog.csdnimg.cn/img_convert/e126153a0e1559d734933c671927394f.gif
[59aca00b1966daa3357619c205db9ce1.png]: https://img-blog.csdnimg.cn/img_convert/59aca00b1966daa3357619c205db9ce1.png
[88f4051659429b71208dc5d4c0f7aecc.png]: https://img-blog.csdnimg.cn/img_convert/88f4051659429b71208dc5d4c0f7aecc.png
[0ae0a4921276a81654eb94f4ea10ada6.png]: https://img-blog.csdnimg.cn/img_convert/0ae0a4921276a81654eb94f4ea10ada6.png
[582a7228bdaa0900aa6127349a788503.png]: https://img-blog.csdnimg.cn/img_convert/582a7228bdaa0900aa6127349a788503.png
[52ce57c3e8f2c734ce26d8246028044b.png]: https://img-blog.csdnimg.cn/img_convert/52ce57c3e8f2c734ce26d8246028044b.png
[48aef4d5d917d906f22b5c110718b5fc.gif]: https://img-blog.csdnimg.cn/img_convert/48aef4d5d917d906f22b5c110718b5fc.gif
[f70cbdcdf8b4b7d47aa82e1eb8263b61.png]: https://img-blog.csdnimg.cn/img_convert/f70cbdcdf8b4b7d47aa82e1eb8263b61.png
[ded20ba698c75f48d2fa60dd07adf9c2.png]: https://img-blog.csdnimg.cn/img_convert/ded20ba698c75f48d2fa60dd07adf9c2.png
[5a13f623f09971817f68d22126bba587.gif]: https://img-blog.csdnimg.cn/img_convert/5a13f623f09971817f68d22126bba587.gif
[5068106f9f94b0d79bd392b8823ebc07.png]: https://img-blog.csdnimg.cn/img_convert/5068106f9f94b0d79bd392b8823ebc07.png
[6385eb20b2c26066cc01a08be823e4af.png]: https://img-blog.csdnimg.cn/img_convert/6385eb20b2c26066cc01a08be823e4af.png
[418ad7f9d1975631ec606eb2874f3d94.png]: https://img-blog.csdnimg.cn/img_convert/418ad7f9d1975631ec606eb2874f3d94.png
[6e0d0b8e069f43b17f8e88636af951d9.png]: https://img-blog.csdnimg.cn/img_convert/6e0d0b8e069f43b17f8e88636af951d9.png
[f3b7dd9d2d9b4472820d52155ad0b266.png]: https://img-blog.csdnimg.cn/img_convert/f3b7dd9d2d9b4472820d52155ad0b266.png
[0581e1140ed17dbff85998ec02306933.png]: https://img-blog.csdnimg.cn/img_convert/0581e1140ed17dbff85998ec02306933.png
[02f25d2596cb32cb0ab74564130ab027.png]: https://img-blog.csdnimg.cn/img_convert/02f25d2596cb32cb0ab74564130ab027.png
[945e8af4d8f3c2dff0d76ff1f98c8e3e.png]: https://img-blog.csdnimg.cn/img_convert/945e8af4d8f3c2dff0d76ff1f98c8e3e.png