目录

Shader Graph 简介

1. 什么是 Shader Graph

4. Shader Graph 界面

4.1 Shader Graph 窗口

4.2 Shader Graph 窗口操作方式

5. 使用 Shader Graph 编辑 Shader 通用步骤

6. Node 节点

6.1 节点概述

6.2 节点分类

7. 主堆栈 Master Stack

7.1 主堆栈

7.2 Context 上下文

7.3 Block Node 块节点

8. 示例中用到的节点

8.1 Gradient Noise Node 梯度噪声节点

8.2 属性节点 Property Node

8.3 算术节点 Math Node

8.4 平铺和偏移节点 Tilling and Offset Node

8.5 重映射节点 Remap Node

8.6 时间节点 Time Node

8.7 分支节点 Branch Node

8.8 Step Node

Shader Graph 简介

1. 什么是 Shader Graph

Shader Graph 就是图形化 Shader 编程工具。类似于 Blender 中的 Shader Editor

Shader Graph 可以帮助您使用类似流程图的图形来构建着色器。在创建图表时，您可以实时查看着色器的材质效果，这让您可以轻松进行实验。

注意：

  • 内置渲染管线虽不允许对渲染管线进行编程，但可以在图形层中，使用自定义的 Shader 着色器，着色器可以进行自定义开发（直接用代码，或 使用 shader graph ）。
  • 自定义的渲染管线，不支持 Shader Graph

可用的 Shader Graph 类型取决于项目中存在的渲染管道。根据渲染管道，某些选项可能存在也可能不存在。

4. Shader Graph 界面

4.1 Shader Graph 窗口

  • Shader Graph 工具栏 (1): 是您保存着色器资源的地方。
  • Blackboard 黑板(2): 包含可供使用此着色器创建材质所使用的属性（可以在 Unity 的 Inspector 窗口中进行值配置）。可以在此处对图表中的属性和关键字进行定义、排序和分类。在 Blackboard 中，您还可以编辑所选 Shader Graph Asset 或 Sub Graph 的路径。
  • 工作区 (3): 将在其中创建着色器的节点图。
  • Main Preview 主预览窗口 (4): 将为您提供着色器外观及其行为方式的实时更新。
  • Graph Inspector 图形检查器窗口 (5): 将显示您选择的任何节点的当前设置、属性和值。
  • Master Stack 主堆栈 (6): 是定义着色器最终表面外观的着色器图的终点，一个 Shader 中有且只有一个。它列出了顶点着色器和片段（片元）着色器的主要着色器属性，并为您提供了插入必要值的末端节点。
  • Internal Inspector：包含与用户当前单击的任何内容相关的信息的区域。这是一个默认情况下自动隐藏的窗口，只有在选择了用户可以编辑的内容时才会出现。使用内部检查器显示和修改属性、节点选项和图形设置。

依次为：基础贴图，法线，金属度，光滑度，发光度，环境光遮罩

4.2 Shader Graph 窗口操作方式

  • 平移：单击鼠标中键并拖动，或按住 Alt (Windows) 或 Option (macOS) 并单击并拖动。
  • 缩放：旋转滚轮或使用触控板缩放。
  • 聚焦和放大：选择一个元素并按 F 键。
  • 适合窗口：按 A 键。
  • 空格键：创建节点，打开创建节点菜单

类似于写程序时候的注释

5. 使用 Shader Graph 编辑 Shader 通用步骤

虽然不同的 Shader ，需要使用不同的编写方式，但在使用 Shader Graph 编辑 Shader，大体上都会遵循下面的步骤：

  1. 创建节点；
  2. 配置节点；
  3. 连接节点：
  4. 输出结果到主堆栈（Master Stack）
  5. 保存图表
  6. 创建材质，选择编辑好的 Shader，并挂接到游戏对象，这一步，也可以放到第二步，这样可以随时在 Unity 中观察 Shader 在游戏对象上的效果

注意：
Shader Graph 的 Shader Editor 中，Ctrl + s 无效（Unity 2022.1 之前版本），想要保存的话，需要点击工具栏中的 Save 按钮。

6. Node 节点

6.1 节点概述

Shader Graph 中和新元素是 Node 节点，每种节点功能各不相同。

每个节点都包含多个端口 Port，每个端口都有确定的数据类型，这些 Port 端口可以用来输入（在节点左侧）、输出（在节点右侧）。

通过 边 Edge 可以将节点连接起来，组成完整的 Shader Graph。

只有一个 Edge 可以连接到任何输入端口，但多个 Edge 可以连接到输出端口。

6.2 节点分类

不同版本 Shader Graph 中，包含的节点种类不同，在最新的 2022.1 版本的 Unity 中，对应的 Shader Graph 为 14.0.0，其中已经包含了近百种不同类型的 Node 。

在 Shader 编辑器中，按照 Create Node 菜单，将其分为八大类，大类中还有子类的细分

在此无法一一细说，就像类库中的类一样，用到时再讲

7. 主堆栈 Master Stack

7.1 主堆栈

主堆栈是定义着色器最终表面外观的着色器图的终点，一个 Shader Graph 中 有且只有一个。

主堆栈的内容可能会根据您选择的图表设置而改变，主堆栈由包含 Block Node 块节点的上下文 Context 组成

7.2 Context 上下文

主堆栈包含两个上下文：顶点 Vetext 和片段(片元) Fragment 。这些代表着色器的两个阶段。

连接到顶点上下文中块的节点成为最终着色器顶点函数的一部分。您连接到片段上下文中的块的节点成为最终着色器的片段（或像素）函数的一部分。

如果您将任何节点连接到两个上下文，它们将执行两次，一次在顶点函数中，然后再次在片段函数中。您不能剪切、复制或粘贴上下文。

7.3 Block Node 块节点

块节点是主堆栈的特定类型的节点。Block Node 表示 Shader Graph 在最终着色器输出中使用的单个表面（或顶点）描述数据。

特定于某个渲染管道的 Block Node 块节点仅可用于该管道，例如，Universal Block 节点仅适用于 Universal Render Pipeline (URP)，High Definition Block 节点仅适用于 High Definition Render Pipeline (HDRP)。

8. 示例中用到的节点

配套视频教程中，制作了一个散发着流动微光的透明 Shader，其中用到的节点，在下面一一介绍一下

8.1 Gradient Noise Node 梯度噪声节点

此节点属于代码生成类节点（Procedural），其特点是，用于 Shader 的数据来自于代码（算法）生成。

根据输入 UV（float2 类型值）生成梯度或 Perlin 噪声。生成噪声的比例由输入 Scale 控制，Scale 值越大，噪声斑纹越小。

梯度噪声产生的纹理具有连续性，所以经常用来模拟山脉、云朵、水等具有连续性（波状）的物质，该类噪声的典型代表是 Perlin Noise。

其它梯度噪声还有 Simplex Noise 和 Wavelet Noise，它们也是由 Perlin Noise 演变而来。

下图显示了各种不同的噪声算法对应的灰度图：

扩展阅读：图形噪声

8.2 属性节点 Property Node

属性节点，就是 Blackboard 黑板 中创建的属性值节点，使用步骤：

  1. 在 Blackboard 中创建属性；

  2. 将属性拖拽到 Shader 里，用于输入；

  3. 在 Shader Editor 的 Graph Inspector 的 Node Settings 中，可以对属性设置进行更改

  4. 在 unity Inspector 中，可以随时更改属性值

8.3 算术节点 Math Node

顾名思义，是用作算术运算的节点，比如最基础的加减乘除

本节例子中，用到了乘法 Multiply 和除法 Divide

8.4 平铺和偏移节点 Tilling and Offset Node

为 UV 输入，提供平铺和偏移设置，输出新的处理过的 UV。

  • 平铺 Tilling ：一个 float2 （x,y）类型的值，默认 x=1,y=1 表示保持原始大小。X=0.5，y=0.5，表示在原先一个单位区域，现在只能放下 1/4，纹理会被拉伸；x=2,y=2，表示原先一个单位空间，将放入 4 个，纹理会被缩小
  • 偏移 Offset ：一个 float2 值（x,y），设置通道的偏移量，默认 x= 0,y=0。设置后，会在指定坐标轴产生偏移。

这通常用于细节贴图和随时间滚动的纹理。

8.5 重映射节点 Remap Node

将输入的值映射到另一个范围之中，如下图是将 -11 映射到 01

左侧输入：

  • In ：输入的值
  • In Min Max ：输入值的范围
  • Out Min Max : 输出值的范围

右侧输出：

  • out ：输入值根据输入输出值范围，重新映射后，得到的值

8.6 时间节点 Time Node

该节点属于 Input - Basic 分类，所以是一种基础的数据输入类节点，用来提供随时间变化的动态值，作为其他节点的输入

该节点是 Shader Graph 中，实现动态效果的不二之选。

float Time_Time = _Time.y; // 随时间增大的浮点值
float Time_SineTime = _SinTime.w;//正弦时间，随时间在（-1，1）之间变化
float Time_CosineTime = _CosTime.w;//余弦时间
float Time_DeltaTime = unity_DeltaTime.x;//当前帧时间，从前一帧，到后一帧所用的时间
float Time_SmoothDelta = unity_DeltaTime.z;//平滑后的当前帧时间

8.7 分支节点 Branch Node

类似于 if 判断语句，当 Predicate 为真时，输出的值是 True 输入端口的值；当 Predicate 为假时，输出值等于 False 输入端口对应的值

8.8 Step Node

如果输入 In 的值大于或等于输入 Edge 的值，则返回 1 ，否则返回 0。

注意：

  • 学习这些和较为复杂算法相关的节点时，不需要把注意力放在算法上，只需要记住节点的用途即可，也就是节点能做出的效果。
  • 学习 Shader Graph 注重积累，学习过程更像是背单词，一类 Shader 效果对应一套流程；学这个不是靠原理和逻辑，更多是经验的积累，由量变到质变

选中  右键  group selection就可以加方框了

参考资料：

  • 官方文档-着色器
  • 创意核心教程-初学 ShaderGraph
  • Shader Graph 官方文档
  • 图形噪声
  • Unity 之 ShaderGraph Procedural 节点解析汇总
  • Gabriel Aguiar Prod. 特效教程
  • How to Use All 200+ Nodes in Unity Shader Graph youtube

Shader Graph入门相关推荐

  1. 【Shader Graph】Shader Graph入门

    Unity2018引用了ShaderGraph:通过可视化界面拖拽就可以实现着色器的创建和编辑,听起来很简单,那我们一起来尝试下吧. 我用的unity版本为2019.1.0f2 一.如何引入Shade ...

  2. 【Shader Graph】流光效果（模型流光）

    ShaderGraph的入门知识和基本操作可以参考:[Shader Graph]Shader Graph入门 流光效果的实现原理和shader代码可以参考:[Unity3d Shader]流光效果(模 ...

  3. Shader Graph 7.5.1

    一.关于Shader Graph Shader Graph使您可以直观地构建着色器.你无需编写代码,就可以在图框架中创建和连接节点. Shader Graph可通过Unity版本2018.1及更高版本 ...

  4. 边缘发光材质unity_Unity Shader Graph 小功能实现（一）边缘发光

    在Unity 2018.2 版本正式启用了高清渲染管线,shader可视化编程. 现在我们就尝尝鲜,来实现了个物体边缘发光的shader效果. 准备 点击Windos->Package Mang ...

  5. Shader Forge 入门学习(一) 基础操作

    引言:失踪人口回归,最近几个月刚刚毕业,进入社会,对着未来有着些许迷茫,但起风了,唯有努力生存!近日学习Shader Forge,记录下来,共同进步!内容主要包括ShaderForge的操作设置,并配 ...

  6. Shader Forge 入门学习(二) 实现发光、火焰燃烧、溶解、扭曲效果

    引言:本篇博客主要记录ShaderForge的常用案例,包括外发光.火焰燃烧.溶解.扭曲等效果.由于内容较多会分成几篇博客记录.如果您对Shader Forge的常用操作还不熟悉,请先看 Unity3 ...

  7. Unity初学者Shader Graph教程

    Unity初学者Shader Graph教程 了解面向非程序员的 Unity 引擎可视化着色器编程工具的来龙去脉 课程英文名:Your Ultimate Guide to Shader Graph f ...

  8. Shader Graph学习（一）

    前言 在Unity2018.1之后新增了Shader Graph功能.(emmm,现在都2020了,只怪自己平时关注新知识太少了)Shader Graph可以在一个可视化的面板中完成shader功能的 ...

  9. 泡泡 shader graph unity

    #shader graph 案例学习 泡泡 shader graph 制作 之前在Youtube看到的一个教程,比较老,如果全部照做效果出不来.对此改进了一下 效果图:不同角度颜色不一样 源码: 贴图 ...

最新文章

  1. matplotlib plt.figure（） 参数详细解释 对于绘制直方图 点图 的通用场景
  2. CTO集体怒吼：我到底要不要继续写代码（下篇）
  3. “Matlab R2016a中运行‘mex -setup’，错误使用 mex 未找到支持的编译器或 SDK”的解决办法
  4. ADS下C语言中局部变量的存储位置分配
  5. wxWidgets：wxToolBar类用法
  6. Qt中文乱码解决思路
  7. 互联网日报 | 阿里国内消费者已接近10亿；联想布局半导体赛道；我国5G用户超过6千万户...
  8. 奇怪的象棋游戏及升级版
  9. 提高python 程序运行速度_3个Python函数帮程序员们避免编写循环，提高运行速度...
  10. react 逆地理 高德地图_给高德新版地图点赞！出行服务竟然如此智能
  11. sniffer4d灵嗅_Sniffer4D灵嗅在无人机环境监测中的应用
  12. 爬取企业信息-企业信用信息查询系统-天眼查爬虫
  13. html关于圣诞节主题的网页,灵感: 8个以圣诞节为主题的网站欣赏
  14. ffmpeg音频格式转码（编码器）
  15. 音视频多媒体开发基础概述之颜色空间（2）YUV YIQ YCrCb CMY颜色空间
  16. 配置console口认证（华为/思科）
  17. 孙陶然：当机会降临到你头上时你必须去把握
  18. ubuntu 20.04 自动重启网络
  19. Oracle grant all privileges to user
  20. 算法设计与分析（第4版）

热门文章

  1. 第十届Flash开发者大会-深圳
  2. 怎么解决allegro单位转换后出现DRC错误
  3. 数字音乐大变局：不再有免费午餐
  4. 靶机记录（十三）：SickOs1.2 - IIS 中 PUT 漏洞的利用
  5. arcgis 做闪烁定位
  6. 【包】R语言rvest包简介
  7. 遭遇公司裁员，如何赔偿？
  8. 在XP中自定义打印机纸张大小
  9. android 复制 粘贴 功能实现
  10. win10计算机管理里用户,在Windows10中设置Administrators管理员用户组的方法