资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

Unity ShaderGraph使用教程与100个特效案例详解

创作时间:

作者:

@小白创作中心

Unity ShaderGraph使用教程与100个特效案例详解

引用

CSDN

https://blog.csdn.net/qq_36303853/article/details/131376168

Unity ShaderGraph是Unity中的一个可视化工具，用于创建和编辑图形着色器。它简化了编写复杂着色器的过程，使艺术家和设计师可以更方便地创建各种美术效果。本文将介绍使用ShaderGraph实现的100个特效案例，包括边缘发光、裁剪、溶解、卡通阴影等，并附有详细的原理说明和节点连接图。

ShaderGraph简介

什么是ShaderGraph

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

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

使用ShaderGraph时需要注意以下几点：

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

ShaderGraph的优势

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

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

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

ShaderGraph项目资源

ShaderGraph官方示例库：https://github.com/UnityTechnologies/ShaderGraph_ExampleLibrary
作者之前分享的ShaderGraph使用案例：人物移动到树后面效果、Shader Graph实现传送门效果、Unity实现刮刮乐效果

ShaderGraph特效案例

边缘发光

主要节点：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溶解效果运用到粒子系统中

物体靠近局部溶解

物体靠近局部显示

及与上面相反的效果，只需调整下如下几个地方

运行效果如下

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;

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