ShaderGraph关于贴图方面实战

目录

SHADERGRAPH节点讲解

边缘光效果

溶解效果

积雪效果

扭曲效果

干扰效果

流光效果

石化效果


SHADERGRAPH节点讲解

       ****项目需求创建一个全息效果****

       创建一个SampleTexture2D节点(Texture是属性别创建错了)

       并且添加一张贴图,选择这张图片我们需要根据rgb通道控制颜色

      

 

      

       第二步实现透明

       我们需要将Surface更改成Transparent(将表面颜色更改成透明的)

      

       将贴图的Alpha通道连接过来我们发现还是没实现透明

       我们可以创建一个Preview节点查看Alpha值是白色,说明了这整张贴图的Alpha值都为1

        

 

       我们可以观察这张图片发现图片本身是没有A通道的

      

 

       那应该怎么实现透明呢?

       其实我们可以使用其他的通道,通常来说灰度图的rgb通道的值都是一样的

      

 

       将贴图的其他通道连接到Alpha我们会发现,将颜色值调成红色我们会发现实现了透明效果

      

 

       添加一个属性,我们希望在材质面板上进行修改颜色

        

 

       透明效果算是完成了,但是我们希望将这个材质动起来以便实现更好的全息效果

       一般在ShaderGraph中我们希望将材质运动的话,我们需要用到Time这个节点

      

 

       Time节点介绍

       Time  对应unity中的Time.time

      

       SineTime   给这个Time做了一个正弦计算(他的返回值是0~1)

       CosineTime  一样也是一个Cosine的曲线

       DeltaTime  对应Time.deltaTime

       SmoothDelta  做过平滑的Time.deltaTime

       **让一个材质移动起来我们一定要修改他的uv值所以我们要添加一个TilingAndOffset节点

      

 

       TilingAndOffset节点介绍

       这个功能我们经常会用到,一般只要有贴图的材质都会有TilingAndOffset。

       我们输入参数uv的值,通过Tiling和Offset改变平铺和偏移。

      

       首先Time是一个一维的量,而offset是一个二维量,在连接两个维度时系统会自动在二维上添加一个默认值

      

 

       连接节点之后我们会发现虽然实现了材质偏移但是偏移的速度太快,我们需要添加一个值限制偏移速度。

       添加一个一维的值

      

 

       添加完之后我们需要让这个值去乘以Time的值,添加一个乘法的节点,将各个节点连接之后再输出就完成了

       (当然我们可以鼠标右键property将这个一维的值转换为属性)

 

       Multipy节点介绍

       返回两个变量相乘之后的值

材质虽然发生了偏移,但是当我们将这个Shader添加的一些比较复杂的模型上的时候,他的偏移却是不规则的。这是因为我们之前使用的的uv是这个模型自身的uv,这个模型的每一块uv都是不一样的。

 

方法一:将模型空间下的uv值转换的屏幕空间,添加一个ScreenPosition节点

 

方法二:将模型空间下的uv值转换的世界空间,添加一个Position节点

 

最后为便于我们调整,给Tiling添加个属性就行。这样就完成了我们的全息效果

总结:

 

边缘光效果

       首先创建一个PBR的ShaderGraph

      

       创建一个节点FresnelEffect节点(菲涅尔效应)

      

 

       节点分析

              菲涅尔效应是基于视角的不同对表面反射率的影响,接近于掠射角度时会反射更多的光线,菲涅尔效应

              通过计算表面法线和视角方向之间的角度,该角度越宽返回值越大,这种效果通常用于实现边缘照明,

              这在许多特效中很常见

              Power   : 调节边缘光的强度

       我们可以自定义边缘光的颜色:

       添加一个Color属性将边缘光与颜色属性相乘之后再输出,我们可以在节点中很直观的发现颜色的变化

 

       添加材质贴图与法线贴图和金属贴图

       当我们添加法线贴图时,我们要将Type改成法线,不然他就会认为这张贴图是普通贴图

       当然如果模型本身带有一张边缘光贴图时我们可以将FresnelEffect节点加上边缘光贴图后输出出去

 

       最后为了保证Shader的通用性给这几张贴图添加属性就行了

       总结

 

      

溶解效果

       首先给模型添加相应的贴图

       溶解是一个没有规律的随机的,我们可以添加一个SimpleNoise节点(噪波)

      

 

       节点分析

              Scale  : 随机的区域大小(试试就知道了)

             

              该节点会介于0~1之间随机

       如果我们直接拖动到Alpha通道上是没有效果的。Alpha透明是有两种方式的,一种是半透明,一种是完全

       透明。溶解效果我们可以直接使用全透明的方式。

      

在Maste节点上我们选择AlphaClipThreshold全透明通道,给他添加一个属性,当贴图通道值小于AlphaClipThreshold的时候就会呈现一种透明效果

 

Slider节点

 

将值限制在一定的范围的值

同样我们右键ConvertToProperty也可以修改成属性

 

下一步:溶解周围的火焰效果

添加一个Step节点

 

节点解析

Step节点的作用在于要么是0,要么是1,从In输入过来的值如果大于Edge的话就是1,反之如果小于

的话就是0。

       当我们将Edge的值与Slider连接之后我们发现颜色就与溶解差不多了

 

       解题思路

       黑色代表透明,白色代表步透明。我们希望在这个透明与不透明的这个边缘添加一点火焰的颜色,

       试想一下能否扩大这个白色区域,在白色区域上去显示火焰的效果(因为黑色区域已经是透明的显示不了)

       我们可以在Step节点之前让Slider与SimpleNoise做一个减法运算,

 

       减法运算之后我们会发现原本的黑色变成白色,白色变成了黑色。

       白色区域实际上是我们溶解掉了的区域。

       我们可以继续使用Step节点与SubTract连接的到一张一样的图

 

       下一步也是比较关键的一步,因为我们已经将两张图片交换了,得到两张完全相反的图片。

       扩大白色区域,因为透明度的关系白色区域目前是看不到的。但是我们扩大了区域,与之前图片

       对比不透名的敌方还是能看到白色的

我们可以将Ender的值调小,这时我们会发现当大于这个值的颜色就会变成白色,最后我们将输出的值连接到自发光贴图通道上就行了。

最后看一下结果

 

       总结

        

 

       难点

              贴图颜色反转之后,扩大不透明区域,改变这个区域的颜色

              颜色混合用乘法,颜色叠加用加法

积雪效果

       创建一个NormalVector节点

      

 

       获取模型的法向量      Space  :  可以选择的空间(Object , View , World , Tangent)

       点乘      

      

 

       两个向量的夹角越小他得到的数值越大,两个向量的夹角等于90度得到的是0,大于90度得到的是一个负数

     

 

       主要计算了两个向量,模型自身法向量点乘一个自定义向上的向量

 

       总结:

 

扭曲效果

       添加一个Twirl节点

 

       节点解析

       可以将我们的贴图或者其他的数据做这种漩涡的效果

      

       使用乘法给他添加颜色,他的透明度实际上也是我们的SimpleNoise的值,将他连接到Alpha上,不要忘记

       将Surface改成Transparent。

 

       Center  : 扭曲的中心点

       Strength  : 扭曲的强度

       Offset  : 材质偏移(材质旋转)

      

       这时候我们可以看到实现了漩涡的效果,但是他是一个方形的,这样看起来比较怪

 

我们可以给他添加一个形状(以下有各种形状可以参考)

 

我们可以让这个漩涡与这个形状做一个乘法运算(得到的效果如下:)

 

我们可以看到他的周围变成了黑色,这其实是不对的。

我们们可以做如下调整,将噪波图与圆型图相乘,然后将他分别连接到Alpha与颜色上面就行了

总结

 

干扰效果

       添加一个uv节点

      

      

       添加一个Split节点,他会将一个多维度的值进行分割

      

       要实现干扰效果实际是对这张贴图的UV坐标做出改变

       我们需要让UV坐标的X值做一个随机的变化,所以让UV的X值加上一个随机数,创建一个SimpleNoise

 

       其次我们只采样SimpleNoise节点在X上为0,Y上为1的uv,所以我们直接将G通道拖过来。最后输出时

       改变的时X上的uv,Y通道依然用之前的,此时可以看到贴图的UV在X轴上时扭曲的。

       最后一步让扭曲运动起来,添加一个时间节点,让他在X轴上扭曲Y轴还是不变

 

       总结

贴图的UV上的Y值无论在什么地方都没有发生改变,随机的都是X上的值,无论是在最后输出还是

              随机数UV的采样。

 

     

流光效果

(2D)首先添加两张贴图,让两张贴图进行叠加

       因为黑色部分的数值是0,所以即使相加也可以实现这种半透明的效果

 

       最后让他的流光贴图的UV进行材质的偏移就行了

       下面看一下(3D)的流光如何制作

       总结:

      

石化效果

       首先添加模型自身的几个贴图,然后添加一张被石化后的贴图

 

       我们希望使得这个材质有一种慢慢被石化后的效果

       添加一个新的Lerp节点

       A,B  :代表两个值

       T  :一个过渡值(当T=1时会返回B的值,当T=0时会返回A的值)

       公式是:Out = (1-T)*A + T*B

      

       最后我们通过代码就可以控制这个T值进行石化

      

       总结:

      

 

*********下期分享顶点偏移***********

  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值