ShaderGraph官方案例：github.com/UnityTechno…

一、前语

点重视不迷路，继续输出干货文章。

嗨，大家好，我是向宇。最近在玩ShaderGraph，决定把我自己实验的一切作用记录到这篇博客中，附带完好高清的连线动态图，期望对想要学习ShaderGraph的同学有所启发。后续有发现一些新的ShaderGraph我还会继续进行更新。

这儿我就不对ShaderGraph基础运用进行说明了，想了解的同学能够去看这篇文章： Shader Graph入门

工程源码见文章末尾。

二、ShaderGraph

1.什么是ShaderGraph

ShaderGraph是Unity中的一个可视化东西，用于创立和修正图形上色器。其含义在于简化编写杂乱上色器的过程，削减对详细编程言语的依靠，使艺术家和设计师能够更方便地创立各种美术作用。运用ShaderGraph能够经过图形界面设置上色器属性，包含色彩、纹路、光照等，并在视窗预览中即时显现成果，然后快速迭代和调整上色器。

运用ShaderGraph需求先装置Unity 2018.1或以上版本，并增加ShaderGraph插件。打开ShaderGraph面板后，能够经过拖放节点并衔接它们来创立上色器。ShaderGraph的节点包含输入输出、数学运算、纹路、光照、特殊作用等，用户能够依据需求选择相应的节点组合成自己的上色器。

2.在运用ShaderGraph时需求留意以下几点：

  1. ShaderGraph的运用需求一定程度的图形学常识，比如了解极点、片段上色器的烘托流程、如何结合Unity的原料修正器等。

  2. 当图形作用非常杂乱时，ShaderGraph或许无法满足需求，需求手写代码完成。

  3. ShaderGraph创立的上色器或许会对功能发生影响，需求在实际项目中评价并做出优化。

  4. ShaderGraph尽管简化了编写上色器的过程，但关于一些高级的特殊作用，仍是需求一定的编程技术。

3.优势

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

  1. 可视化修正。ShaderGraph采用可视化修正方法，经过拖放节点衔接来组合上色器，防止了繁琐的手写代码，并使上色器的结构更加明晰易懂。

  2. 更少的过错。ShaderGraph采用了强类型的节点更新机制，能够防止传统的手写上色器中常发生的过错，如拼写过错、语法过错和类型过错。

  3. 更好的可保护性。因为ShaderGraph采用了可视化修正方法，因而上色器更容易被了解和保护。此外，ShaderGraph还支撑版本控制，能够方便地将上色器与其他团队成员同享和同步。

  4. 更快的迭代。 ShaderGraph答应用户在视窗预览中实时检查更改后的上色器作用，这样能够更快地迭代和调试上色器，并提高开发效率。

  5. 更易扩展。ShaderGraph供给了很多的预制节点，包含数学、贴图、色彩、光照等节点，且支撑自定义节点，因而开发者能够自行扩展和增加节点。

综上所述，ShaderGraph具有可视化、易于了解和保护、快速迭代以及易于扩展等优势，特别适合那些不想深入学习编写杂乱上色器代码的设计师和艺术家。一起，尽管关于更高级的上色作用仍然会需求编程技术，但ShaderGraph能够协助开发者更快速的完成初步作用，完成杂乱上色作用需求的编程技术能够由技术人员来担任。

4.项目

其实之前我就对ShaderGrap有进行一些运用共享，不过没有进行体系的整理，有需求的能够去看看之前的，这儿我贴出链接地址：

人物移动到树后边，不被遮挡的作用

Shader Graph完成传送门作用

unity完成一个刮刮乐作用

三、实例作用

边际发光

首要节点：FresnelEffect, 原理：Fresnel Effect，菲涅耳效应，依据观察视点发生不同反射率然后对表面作用发生影响，当你接近时，会反射更多的光。菲涅耳效应节点经过计算表面法线与视线方向的夹角来近似。这个视点越大，回来值越大。这种作用经常被用来完成边际照明，这在很多艺术风格中都很常见

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

进阶：带方向的菲涅尔边际光作用

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

裁剪

首要节点：Position 、AlphaClip 原理：AlphaClip的值假如比Alpha的值大，则会不显现 留意：一定要调PBR Master面板的Alpha参数，否者不会显现出来作用

进阶 带边际色的裁剪

进阶：在裁剪的基础上增加裁剪边际光 首要利用Smoothstep做出一个边际突变 Smoothstep：假如输入In的值别离在输入Edge1和Edge2的值之间，则回来0和1之间的滑润Hermite插值的成果。假如输入In的值小于输入Step1的值，则回来0；假如大于输入Step2的值，则回来1

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

溶解

首要节点 SimpleNoise 留意：一定要调PBR Master面板的Alpha参数，否者不会显现出来作用

进阶 带边际色溶解

溶解边际增加发光，原理就是对Noise噪声做两个Step，然后相减，再乘个色彩，连到Emission发光节点上

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

卡通暗影

首要节点NormalVector、DotProduct、SampleGradient 原理：运用Sample Gradient设置几个暗影色块色彩

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

水波纹

首要节点 TillingAndOffset 、Lerp 原理：经过Tilling And Offset节点的Offset来控制水纹的UV偏移，然后再运用Lerp将水纹和主贴图做一个线性差值

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

积雪作用

首要节点 NomalVector 、DotProduct 原理：运用一个向上的 Vector3和 模型的 Normal Vertor(法线向量) 点乘，得到的是 一个标量，表明模型法线向量和笔直向量的夹角（方向的相似度），然后经过 Step过滤得到要显现白色的部分，即将显现的 白色部分再和一个噪声相乘后输入到Master的Emission发光槽中。

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

不锈钢作用、冰晶作用

首要节点 ViewDirection.、TillingAndOffset、SimpleNoise 原理：由View Direction视角移动， 引发Tilling And Offset 节点 移动 贴图，发生的作用。留意View Direction运用Tangent切线空间。该作用也可用于冰晶作用。

UV颤动

首要节点：UV、Simple Noise、Split 原理，运用Split将UV分开成x和y两个分类，对x分类做一个噪音颤动，最终和y再合并作用到主贴图的UV上。 完成相似老电视屏幕闪耀的作用

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

水面上下波动作用

首要节点：Gradient Noise、Position 原理：运用Gradient Noise随机噪声，再经过一个 Normal Vector结点，代表笔直于物体的法向量，接着，对Position进行一个叠加。 留意Normal Vector和Position的Space都选择Object空间

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

红旗飘飘

首要节点：Simple Noise、UV、Position 原理：经过噪声的UV移动，形成一个动态移动的噪声，作用到Position上，为了让旗的根部所以在经过一个UV的x重量来限制根部的噪音

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

马赛克

首要节点：UV、Posterize 原理：Posterize的作用是色调别离

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

无贴图水球

首要节点：UV、Ellipse、Step 原理：经过UV的y方向结构一个笔直突变的UV，作为噪声的Step边际，形成一条波浪，最终差值两个色彩，再用形状做裁切。

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

无贴图火焰

首要节点：Voronoi、Tiling And Offset、Blend 原理：经过两个Voronoi的融合，得到相似火焰向上焚烧的形状，再经过UV和一个Vector 2的Distance制造两个圆形区域，别离作为火焰内心和外围的区域，再合火焰形状相乘，最终再乘上色彩。

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

无贴图旋涡

首要节点：Twirl、Voronoi 原理：运用Twirl对Voronoi发生一个旋涡形状。 能够用于完成传送门的作用

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

无贴图闪电

首要节点：Simple Noise、Rectangle 原理：噪声经过Rectangle后，能够形成相似闪电的形状 一个UV向下移动的噪声和一个UV向上移动的噪声相加，再经过Rectangle，则能够形成动态闪电作用。

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

全息作用

首要节点：Position、Fraction、Time、Fresnel Effect 原理：经过Fraction获取Position的y重量得到一个条纹作用，再经过UV移动得到一个扫描的作用，最终和菲涅尔作用叠加。

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

水波纹效

首要节点：UV、Sine 原理：经过UV和Sine结构一个圆心向外扩散的作用，再作用到贴图的UV上。

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

高斯含糊

详细完成拜见这篇文章：Unity ShaderGraph完成图片的高斯含糊作用

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

自发光

1.我们先看下PBR ShaderGraph（Lit ShaderGraph）下的自发光作用。

运用自发光贴图，输入到Emmision，有了自发光作用：

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

2.Unlit ShaderGraph中的自发光

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

粒子体系溶解作用

详细完成拜见这篇文章：Unity ShaderGraph溶解作用运用到粒子体系中

物体接近部分溶解

【unity造轮子】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);
    }
}

运转作用

物体接近部分显现

及与上面相反的作用，只需调整下如下几个当地

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例
运转作用如下
【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

2D描边作用

详细完成拜见这篇文章：Unity ShaderGraph 2D描边作用、不规则描边作用

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

子弹拖尾作用

详细完成拜见这篇文章：Unity运用ShaderGraph合作粒子体系，制造子弹拖尾特效

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

冰块作用，一只被冻住的鸡

工程地址：gitcode.net/linxinfa/un…

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例
作用
【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

曲折国际

这儿的曲折仅仅一种视觉作用，不影响磕碰盒子等物理物体。

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

黑洞吸收作用

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例
【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

能量罩

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例
【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

激光光束

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例
【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

管道液体流动

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例
【unity造轮子】Unity ShaderGraph使用教程与各种特效案例
【unity造轮子】Unity ShaderGraph使用教程与各种特效案例
【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

水瓶液体

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例
【unity造轮子】Unity ShaderGraph使用教程与各种特效案例
脚本挂载到运用原料的物体上

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;
    }
}

星体

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例
【unity造轮子】Unity ShaderGraph使用教程与各种特效案例
【unity造轮子】Unity ShaderGraph使用教程与各种特效案例
【unity造轮子】Unity ShaderGraph使用教程与各种特效案例
【unity造轮子】Unity ShaderGraph使用教程与各种特效案例
【unity造轮子】Unity ShaderGraph使用教程与各种特效案例
【unity造轮子】Unity ShaderGraph使用教程与各种特效案例
运用涅菲尔作用完成边际发光，然后运用时刻控制噪声节点偏移，就呈现相似星星闪耀的感觉，

然后最重要的是需求做后处理设置， 首要需求装置PostProcessing包 然后需求设置相机 然后再Hierarchy面板右键Volume–Global Voume 这是会有一个Global Volume物体，首要设置Volume组件上Profule,点击New即可 然后点AddOverride,增加Tonemapping和Bloom, 设置Bloom上的Intensity和Tint即可，调整数字和色彩，

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例
【unity造轮子】Unity ShaderGraph使用教程与各种特效案例
【unity造轮子】Unity ShaderGraph使用教程与各种特效案例
【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

涟漪作用

这是一种图像作用，它扭曲烘托的图像，水面上的涟漪，源码方位 github.com/keijiro/Rip…

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

灰烬飘散（2023/7/5更新）

教你在Unity中完成模型融化化为灰烬飘散的作用

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

完成在模型上涂鸦的作用（2023/7/5更新）

运用Unity ShaderGraph完成在模型上涂鸦的作用，那么，纹个手吧

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

子弹拖尾特效（2023/7/5更新）

Unity运用ShaderGraph合作粒子体系，制造子弹拖尾特效

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

溶解、火灾、全息图、像素化、卡通化、简单旗帜（2023/7/5更新）

github.com/andydbc/uni…

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例
【unity造轮子】Unity ShaderGraph使用教程与各种特效案例
【unity造轮子】Unity ShaderGraph使用教程与各种特效案例
【unity造轮子】Unity ShaderGraph使用教程与各种特效案例
【unity造轮子】Unity ShaderGraph使用教程与各种特效案例
【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

弯路和国际曲折作用（2023/7/8更新）

blog.csdn.net/qq_36303853…

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例
【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

完成2d图片多种描边作用（2023/7/9更新）

blog.csdn.net/qq_36303853…

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例

待续

源码

后边有空我会整理好放上来 gitee.com/qimingzhiha…

参考

【文章】：blog.csdn.net/m0_46378049… 【文章】：blog.csdn.net/linxinfa/ar…

结束

赠人玫瑰，手有余香！假如文章内容对你有所协助，请不要吝啬你的点赞谈论和重视，以便我第一时刻收到反应，你的每一次支撑都是我不断创造的最大动力。当然假如你发现了文章中存在过错或者有更好的解决方法，也欢迎谈论私信告诉我哦！

好了，我是向宇，xiangyu.blog.csdn.net

一位在小公司静静奋斗的开发者，出于兴趣爱好，于是最近才开始自习unity。假如你遇到任何问题，也欢迎你谈论私信找我， 尽管有些问题我或许也不一定会，但是我会查阅各方材料，争取给出最好的主张，期望能够协助更多想学编程的人，共勉~

【unity造轮子】Unity ShaderGraph使用教程与各种特效案例