Unity2018 Shader Graph 实验室
Tips:
-- 在shader forge和amplyfy Shader节点图形化shader编程的诱惑下,unity官方终于在2018版本也推出了而自己shader节点可视化编程工具Shaderr Graph。本篇文章是对Shader Graph一些效果的尝试,建议学习shader的朋友也尝试下这些工具,对shader的理解会更加直观
-- 效果中自发光光晕是使用的PostProcess中bloom,须自行添加
-- 图看不清,右击在标签页中打开
-- 想要自发光更炫,Color属性节点开启HDR模式
目录
- bilibili小电视
- 光剑
- 火焰卡牌
1.Bilibili小电视([]~( ̄▽ ̄)~*)
效果
![BILIBILI enter description here](https://img2018.cnblogs.com/blog/760344/201812/760344-20181214215638265-1851565276.gif)
节点图
![节点图 节点图](https://img2018.cnblogs.com/blog/760344/201812/760344-20181214215642177-1891720363.png)
效果说明
该效果主要分为三个部分:
- 红色部分,通过一个纹理与一个颜色相乘来作为其基础效果。
- 紫色部分,边缘高光,通过一个菲涅尔节点和颜色相乘赋给自发光。
- 黄色部分,随时间的扭曲和剔除,通过Step阶梯点和Twirl扭曲节点实现,Noise节点辅助产生扭曲条纹状效果。
节点说明
名称 | 说明 |
---|---|
Fresnel | 菲涅尔反射,简单来说就是表面与视角越是平行,则高光效果越明显 (Unity就不能出个中文文档吗,哭![]() |
Step | 如果输入In大于等于输入Edge,返回1,否则返回0 |
Twirl | 将类似于黑洞的旋转扭曲效果应用于输入的UV。扭曲效果的中心参考点由输入参数Center决定,效果的整体强度由输入参数Strength决定。输入Offset可用于偏移结果的各个通道。 |
Position | 获取mesh的顶点或片段的位置。可选的空间有Object, View, World, Tangent。(我们使用该位置为世界坐标下的位置,作为Twirl的中心点位置) |
Time | 可以获取Unity中的时间值。 |
2.光剑(愿原力与你同在QAQ)
效果
![sword enter description here](https://img2018.cnblogs.com/blog/760344/201812/760344-20181214215646153-744428461.gif)
节点图
![enter description here enter description here](https://img2018.cnblogs.com/blog/760344/201812/760344-20181214215651194-532490867.png)
效果说明
该效果主要分为三个部分:
- 红色部分,通过Positon的object即模型坐标下的Y方向Step来获得溶解效果。
- 紫色部分,通过Noise,时间节点作用于UV与模型Position相加,给与模型沿着Y轴抖动的效果。
- 黄色部分,一个简单的自发光。
节点说明
名称 | 说明 |
---|---|
Position | 区别于上次,这次我们使用的Object坐标下,即模型空间下获取模型自身的顶点位置属性 |
Split | 分割,将一个多维向量分割成多个1维的数值。如果输入的向量小于4维,不够的维度会使用默认值分别是 (0, 0, 0, 1)。 |
Gradient Noise | 渐变噪点,基于输入的UV生成一个渐变噪点图(Perlin噪点)。Scale可以控制噪点图的大小。 |
Tiling And Offset | 平铺和偏移,这个功能我们会经常用到,一般只要有贴图的材质上都会有Tiling And Offset。将输入参数UV的值,通过Tiling和Offset改变平铺和偏移。 |
3.地狱之门(愿火焰进化一切)
效果
节点图
![火焰 火焰](https://img2018.cnblogs.com/blog/760344/201812/760344-20181214215659468-817160947.png)
效果说明
UV偏移与发光不在赘述,该效果的要点是边缘部分的与原来颜色叠加,这样火焰的边缘亮度更高,下过更好。这里我们主要通过不同Step后的图作差值来获取边缘。
黄色:纹理取样
蓝色:遮罩
红色:UV偏移
节点说明
名称 | 说明 |
---|---|
One Minus | 1减去,因为纹理像素对应 0~1,所以可以使用该节点做取反操作 |
Add | 相加,这里我们通过相加来混合边缘颜色和原有颜色,也在cutoff剔除的时候加了些,防止将边缘部分剔除 |
Subtract | 相减,我们通过两个不同Step截取后的图相减,从而获得他们的插值部分,即人为获取一定边缘部分 |
4.火焰卡牌(快进来坐吧,酒馆里可热闹了)
效果
![MaskCard enter description here](https://img2018.cnblogs.com/blog/760344/201812/760344-20181214215703797-620972264.gif)
节点图
![节点图 节点图](https://img2018.cnblogs.com/blog/760344/201812/760344-20181214215706231-1068368759.png)
效果说明
像卡牌中流动的效果和前面用到的一样,都是通过控制UV和噪声图来达到的。诸如流水,岩浆,魂魄,雾霭都可以通过这样的方式实现。这个效果比较简单,如果通过多层通道控制遮罩效果,每个遮罩下有不同的特效,我们就可以做出看起来炫酷的效果了。
节点说明
这个效果实现比较简单,需要说明的如若需要多个遮罩效果,可以放在一张图的不同通道下做遮罩。R,G,B,A四层可以做四个遮罩图,这样更能节省资源。然后通过Mask节点来提取不同的遮罩,在控制不同遮罩的效果,我们就能做出更加炫酷的特效。
5.序列帧动画(一切尽在卡牌中)
效果
![AniNum 序列图](https://img2018.cnblogs.com/blog/760344/201812/760344-20181214215707278-1592790403.png)
![AniFram 效果](https://img2018.cnblogs.com/blog/760344/201812/760344-20181214215710236-1442472908.gif)
节点图
![aniframe 节点图](https://img2018.cnblogs.com/blog/760344/201812/760344-20181214215712110-1738835126.jpg)
效果说明
该效果主要实现了序列帧动画,想通过animatior的方式将分割好的序列帧图片播放一样。可以实现读数,火焰,翻页一些效果。
节点说明
名称 | 说明 |
---|---|
Ceilling | 返回大于或等于输入值的最小整数。(floor:返回小于或等于输入值的最小整数;round:返回最接近输入值的整数) |
Flipbook | 将UV分割成若干份width列,height行,通过Tile作为索引来控制UV偏移,实现类似翻页等效果 |