【实现100个unity特效之4】Unity ShaderGraph使用教程与各种特效案例(上)

简介: 【实现100个unity特效之4】Unity ShaderGraph使用教程与各种特效案例


ShaderGraph官方案例:https://github.com/UnityTechnologies/ShaderGraph_ExampleLibrary

一、前言

最近在玩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,菲涅耳效应,根据观察角度产生不同反射率从而对表面效果产生影响,当你靠近时,会反射更多的光。菲涅耳效应节点通过计算表面法线与视线方向的夹角来近似。这个角度越大,返回值越大。这种效果经常被用来实现边缘照明,这在很多艺术风格中都很常见

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

裁剪

主要节点: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

效果

弯曲世界

这里的弯曲只是一种视觉效果,不影响碰撞盒子等物理物体。

目录
相关文章
|
2月前
|
图形学 开发者 存储
超越基础教程:深度拆解Unity地形编辑器的每一个隐藏角落,让你的游戏世界既浩瀚无垠又细节满满——从新手到高手的全面技巧升级秘籍
【8月更文挑战第31天】Unity地形编辑器是游戏开发中的重要工具,可快速创建复杂多变的游戏环境。本文通过比较不同地形编辑技术,详细介绍如何利用其功能构建广阔且精细的游戏世界,并提供具体示例代码,展示从基础地形绘制到植被与纹理添加的全过程。通过学习这些技巧,开发者能显著提升游戏画面质量和玩家体验。
67 3
|
2月前
|
图形学 数据可视化 开发者
超实用Unity Shader Graph教程:从零开始打造令人惊叹的游戏视觉特效,让你的作品瞬间高大上,附带示例代码与详细步骤解析!
【8月更文挑战第31天】Unity Shader Graph 是 Unity 引擎中的强大工具,通过可视化编程帮助开发者轻松创建复杂且炫酷的视觉效果。本文将指导你使用 Shader Graph 实现三种效果:彩虹色渐变着色器、动态光效和水波纹效果。首先确保安装最新版 Unity 并启用 Shader Graph。创建新材质和着色器图谱后,利用节点库中的预定义节点,在编辑区连接节点定义着色器行为。
96 0
|
2月前
|
API 图形学
Unity精华☀️Audio Mixer终极教程:用《双人成行》讲解它的用途
Unity精华☀️Audio Mixer终极教程:用《双人成行》讲解它的用途
|
2月前
|
图形学
Unity精华☀️点乘、叉乘终极教程:用《小小梦魇》讲解这个面试题~
Unity精华☀️点乘、叉乘终极教程:用《小小梦魇》讲解这个面试题~
|
1月前
|
图形学 开发者
【独家揭秘】Unity游戏开发秘籍:从基础到进阶,掌握材质与纹理的艺术,打造超现实游戏视效的全过程剖析——案例教你如何让每一面墙都会“说话”
【8月更文挑战第31天】Unity 是全球领先的跨平台游戏开发引擎,以其高效性能和丰富的工具集著称,尤其在提升游戏视觉效果方面表现突出。本文通过具体案例分析,介绍如何利用 Unity 中的材质与纹理技术打造逼真且具艺术感的游戏世界。材质定义物体表面属性,如颜色、光滑度等;纹理则用于模拟真实细节。结合使用两者可显著增强场景真实感。以 FPS 游戏为例,通过调整材质参数和编写脚本动态改变属性,可实现自然视觉效果。此外,Unity 还提供了多种高级技术和优化方法供开发者探索。
41 0
|
2月前
|
图形学 数据安全/隐私保护 iOS开发
Unity与IOS⭐Xcode打包,上架TestFlight的完整教程
Unity与IOS⭐Xcode打包,上架TestFlight的完整教程
|
2月前
|
Apache 图形学
WebGL☀️Unity WebGL适配到各平台的教程
WebGL☀️Unity WebGL适配到各平台的教程
|
2月前
|
开发工具 图形学 Android开发
Pico Neo 3教程☀️ 二、从 PicoVR Unity SDK 迁移至 Unity XR SDK
Pico Neo 3教程☀️ 二、从 PicoVR Unity SDK 迁移至 Unity XR SDK
|
4月前
|
图形学
【实现100个unity特效之4】Unity ShaderGraph使用教程与各种特效案例(下)
【实现100个unity特效之4】Unity ShaderGraph使用教程与各种特效案例
75 0
|
2月前
|
图形学 C#
超实用!深度解析Unity引擎,手把手教你从零开始构建精美的2D平面冒险游戏,涵盖资源导入、角色控制与动画、碰撞检测等核心技巧,打造沉浸式游戏体验完全指南
【8月更文挑战第31天】本文是 Unity 2D 游戏开发的全面指南,手把手教你从零开始构建精美的平面冒险游戏。首先,通过 Unity Hub 创建 2D 项目并导入游戏资源。接着,编写 `PlayerController` 脚本来实现角色移动,并添加动画以增强视觉效果。最后,通过 Collider 2D 组件实现碰撞检测等游戏机制。每一步均展示 Unity 在 2D 游戏开发中的强大功能。
82 6