【实现100个unity特效之4】Unity ShaderGraph使用教程与各种特效案例（2023/12/1更新）_unity

文章目录

一、前言
二、shadergraph
三、实例效果
源码
参考
完结

一、前言

最近在玩shadergraph，决定把我自己实验的所有效果记录到这篇博客中，附带完整高清的连线动态图，希望对想要学习shadergraph的同学有所启发。后续有发现一些新的shadergraph我还会继续进行更新。

这里我就不对shadergraph基础使用进行说明了，想了解的同学可以去看这篇文章：
shader graph入门

工程源码见文章末尾。

二、shadergraph

1.什么是shadergraph

shadergraph是unity中的一个可视化工具，用于创建和编辑图形着色器。其意义在于简化编写复杂着色器的过程，减少对具体编程语言的依赖，使艺术家和设计师可以更方便地创建各种美术效果。使用shadergraph可以通过图形界面设置着色器属性，包括颜色、纹理、光照等，并在视窗预览中即时显示结果，从而快速迭代和调整着色器。

使用shadergraph需要先安装unity 2018.1或以上版本，并添加shadergraph插件。打开shadergraph面板后，可以通过拖放节点并连接它们来创建着色器。shadergraph的节点包括输入输出、数学运算、纹理、光照、特殊效果等，用户可以根据需求选择相应的节点组合成自己的着色器。

2.在使用shadergraph时需要注意以下几点：

shadergraph的使用需要一定程度的图形学知识，比如了解顶点、片段着色器的渲染流程、如何结合unity的材质编辑器等。
当图形效果非常复杂时，shadergraph可能无法满足需求，需要手写代码实现。
shadergraph创建的着色器可能会对性能产生影响，需要在实际项目中评估并做出优化。
shadergraph虽然简化了编写着色器的过程，但对于一些高级的特殊效果，还是需要一定的编程技能。

3.优势

相比于传统的手写着色器，shadergraph具有以下几个优势：

可视化编辑。shadergraph采用可视化编辑方式，通过拖放节点连接来组合着色器，避免了繁琐的手写代码，并使着色器的结构更加清晰易懂。
更少的错误。shadergraph采用了强类型的节点更新机制，可以避免传统的手写着色器中常发生的错误，如拼写错误、语法错误和类型错误。
更好的可维护性。由于shadergraph采用了可视化编辑方式，因此着色器更容易被理解和维护。此外，shadergraph还支持版本控制，可以方便地将着色器与其他团队成员共享和同步。
更快的迭代。 shadergraph允许用户在视窗预览中实时查看更改后的着色器效果，这样可以更快地迭代和调试着色器，并提高开发效率。
更易扩展。shadergraph提供了大量的预制节点，包括数学、贴图、颜色、光照等节点，且支持自定义节点，因此开发者可以自行扩展和添加节点。

综上所述，shadergraph具有可视化、易于理解和维护、快速迭代以及易于扩展等优势，特别适合那些不想深入学习编写复杂着色器代码的设计师和艺术家。同时，虽然对于更高级的着色效果仍然会需要编程技能，但shadergraph能够帮助开发者更快速的实现初步效果，实现复杂着色效果需要的编程技能可以由技术人员来负责。

4.项目

其实之前我就对shadergrap有进行一些使用分享，不过没有进行系统的整理，有需要的可以去看看之前的，这里我贴出链接地址：

人物移动到树后面，不被遮挡的效果

shader graph实现传送门效果

三、实例效果

边缘发光

主要节点：fresneleffect,
原理：fresnel effect，菲涅耳效应，根据观察角度产生不同反射率从而对表面效果产生影响，当你靠近时，会反射更多的光。菲涅耳效应节点通过计算表面法线与视线方向的夹角来近似。这个角度越大，返回值越大。这种效果经常被用来实现边缘照明，这在很多艺术风格中都很常见
在这里插入图片描述

进阶：带方向的菲涅尔边缘光效果

在这里插入图片描述

裁剪

主要节点：position 、alphaclip
原理：alphaclip的值如果比alpha的值大，则会不显示
注意：一定要调pbr master面板的alpha参数，否者不会显示出来效果
在这里插入图片描述

进阶带边缘色的裁剪

进阶：在裁剪的基础上添加裁剪边缘光
首先利用smoothstep做出一个边缘渐变
smoothstep：如果输入in的值分别在输入edge1和edge2的值之间，则返回0和1之间的平滑hermite插值的结果。如果输入in的值小于输入step1的值，则返回0；如果大于输入step2的值，则返回1
在这里插入图片描述

溶解

主要节点 simplenoise
注意：一定要调pbr master面板的alpha参数，否者不会显示出来效果
在这里插入图片描述

进阶带边缘色溶解

溶解边缘添加发光，原理就是对noise噪声做两个step，然后相减，再乘个颜色，连到emission发光节点上
在这里插入图片描述

卡通阴影

主要节点normalvector、dotproduct、samplegradient
原理：使用sample gradient设置几个阴影色块颜色
在这里插入图片描述

水波纹

主要节点 tillingandoffset 、lerp
原理：通过tilling and offset节点的offset来控制水纹的uv偏移，然后再使用lerp将水纹和主贴图做一个线性差值
在这里插入图片描述

积雪效果

主要节点 nomalvector 、dotproduct
原理：使用一个向上的 vector3和模型的 normal vertor(法线向量) 点乘，得到的是一个标量，表示模型法线向量和垂直向量的夹角（方向的相似度），然后通过 step过滤得到要显示白色的部分，将要显示的白色部分再和一个噪声相乘后输入到master的emission发光槽中。
在这里插入图片描述

不锈钢效果、冰晶效果

主要节点 viewdirection.、tillingandoffset、simplenoise
原理：由view direction视角移动，引发tilling and offset 节点移动贴图，产生的效果。注意view direction使用tangent切线空间。该效果也可用于冰晶效果。
在这里插入图片描述

uv抖动

主要节点：uv、simple noise、split
原理，使用split将uv分开成x和y两个分类，对x分类做一个噪音抖动，最后和y再合并作用到主贴图的uv上。
实现类似老电视屏幕闪烁的效果
在这里插入图片描述

水面上下波动效果

主要节点：gradient noise、position
原理：使用gradient noise随机噪声，再通过一个 normal vector结点，代表垂直于物体的法向量，接着，对position进行一个叠加。
注意normal vector和position的space都选择object空间
在这里插入图片描述

红旗飘飘

主要节点：simple noise、uv、position
原理：通过噪声的uv移动，形成一个动态移动的噪声，作用到position上，为了让旗的根部所以在通过一个uv的x分量来限制根部的噪音
在这里插入图片描述

马赛克

主要节点：uv、posterize
原理：posterize的作用是色调分离
在这里插入图片描述

无贴图水球

主要节点：uv、ellipse、step
原理：通过uv的y方向构造一个垂直渐变的uv，作为噪声的step边缘，形成一条波浪，最后差值两个颜色，再用形状做裁切。
在这里插入图片描述

无贴图火焰

主要节点：voronoi、tiling and offset、blend
原理：通过两个voronoi的融合，得到类似火焰向上燃烧的形状，再通过uv和一个vector 2的distance制造两个圆形区域，分别作为火焰内心和外围的区域，再合火焰形状相乘，最后再乘上颜色。
在这里插入图片描述

无贴图旋涡

主要节点：twirl、voronoi
原理：使用twirl对voronoi产生一个旋涡形状。
可以用于实现传送门的效果
在这里插入图片描述

无贴图闪电

主要节点：simple noise、rectangle
原理：噪声通过rectangle后，可以形成类似闪电的形状
一个uv向下移动的噪声和一个uv向上移动的噪声相加，再通过rectangle，则可以形成动态闪电效果。
在这里插入图片描述

全息效果

主要节点：position、fraction、time、fresnel effect
原理：通过fraction获取position的y分量得到一个条纹效果，再通过uv移动得到一个扫描的效果，最后和菲涅尔效果叠加。
在这里插入图片描述

水波纹效

主要节点：uv、sine
原理：通过uv和sine构造一个圆心向外扩散的效果，再作用到贴图的uv上。
在这里插入图片描述

高斯模糊

具体实现参见这篇文章：unity shadergraph实现图片的高斯模糊效果
在这里插入图片描述

自发光

1.我们先看下pbr shadergraph（lit shadergraph）下的自发光效果。

使用自发光贴图，输入到emmision，有了自发光效果：
在这里插入图片描述

2.unlit shadergraph中的自发光

在这里插入图片描述

粒子系统溶解效果

具体实现参见这篇文章：unity shadergraph溶解效果运用到粒子系统中

物体靠近局部溶解

在这里插入图片描述


using system.collections;
using system.collections.generic;
using unityengine;
/// <summary>
/// 脚本挂在到 需要溶解的物体上
/// </summary>
public class main : monobehaviour
{

    /// <summary>
    /// 材质球
    /// </summary>
    public material mat;
/// <summary>
/// 要靠近的物体
/// </summary>
    public transform m_targetobj;
    void start()
    {
        
    }

    
    void update()
    {
        mat.setvector("vector3_b7d1fb9c",m_targetobj.position);
    }
}

运行效果
在这里插入图片描述

物体靠近局部显示

及与上面相反的效果，只需调整下如下几个地方
在这里插入图片描述
运行效果如下

2d描边效果

具体实现参见这篇文章：unity shadergraph 2d描边效果、不规则描边效果
在这里插入图片描述

子弹拖尾效果

具体实现参见这篇文章：unity使用shadergraph配合粒子系统，制作子弹拖尾特效
在这里插入图片描述

冰块效果，一只被冻住的鸡

工程地址：https://gitcode.net/linxinfa/unityurpiceeffect
在这里插入图片描述
效果

弯曲世界

这里的弯曲只是一种视觉效果，不影响碰撞盒子等物理物体。
在这里插入图片描述

在这里插入图片描述

黑洞吸收效果

在这里插入图片描述

能量罩

在这里插入图片描述

激光光束

在这里插入图片描述

管道液体流动

在这里插入图片描述

水瓶液体

在这里插入图片描述

脚本挂载到使用材质的物体上

using system.collections;
using system.collections.generic;
using unityengine;

public class wobble : monobehaviour
{
    renderer rend;
    vector3 lastpos;
    vector3 velocity;
    vector3 lastrot;
    vector3 angularvelocity;
    public float maxwobble = 0.03f;
    public float wobblespeed = 1f;
    public float recovery = 1f;
    public float wobbleamountx;
    public float wobbleamountz;
    float wobbleamounttoaddx;
    float wobbleamounttoaddz;
    float pulse;
    float time = 0.5f;

    // use this for initialization
    void start()
    {
        rend = getcomponent<renderer>();
    }
    private void update()
    {
        time += time.deltatime;
        // 随着时间的推移减少抖动
        wobbleamounttoaddx = mathf.lerp(wobbleamounttoaddx, 0, time.deltatime * (recovery));
        wobbleamounttoaddz = mathf.lerp(wobbleamounttoaddz, 0, time.deltatime * (recovery));

        // 做一个减小摆动的正弦波
        pulse = 2 * mathf.pi * wobblespeed;
        wobbleamountx = wobbleamounttoaddx * mathf.sin(pulse * time);
        wobbleamountz = wobbleamounttoaddz * mathf.sin(pulse * time);

        // 修改着色器参数
        rend.material.setfloat("_wobblex", wobbleamountx);
        rend.material.setfloat("_wobblez", wobbleamountz);

        // 速率
        velocity = (lastpos - transform.position) / time.deltatime;
        angularvelocity = transform.rotation.eulerangles - lastrot;


        // 摆动
        wobbleamounttoaddx += mathf.clamp((velocity.x + (angularvelocity.z * 0.2f)) * maxwobble, -maxwobble, maxwobble);
        wobbleamounttoaddz += mathf.clamp((velocity.z + (angularvelocity.x * 0.2f)) * maxwobble, -maxwobble, maxwobble);

        // 保持最后的位置
        lastpos = transform.position;
        lastrot = transform.rotation.eulerangles;
    }
}

星体

在这里插入图片描述

使用涅菲尔效果实现边缘发光，然后使用时间控制噪声节点偏移，就出现类似星星闪烁的感觉，

然后最重要的是需要做后处理设置，
首先需要安装postprocessing包
然后需要设置相机
然后再hierarchy面板右键volume–global voume
这是会有一个global volume物体，首先设置volume组件上profule,点击new即可
然后点addoverride,添加tonemapping和bloom,
设置bloom上的intensity和tint即可，调整数字和颜色，
在这里插入图片描述