Shader Graph简介

2023-10-29

        使用着色器(shader)和材质(material),我们能够创造出非常多有趣的效果。除了Unity自带的shader外,还可以自己编写shader或使用其他人所编写的shader。编写shader通常需要我们了解shader编程语言的语法和相关特性,总体来说入门难度相对较高,Shader Graph这个工具能够让编写shader的过程更加容易。

        Shader Graph可以让我们不用写代码就创建一些专用的shader。比如你能够组合不同的纹理,让它们在片元着色器中移动位置,或者在顶点着色器中改变顶点的位置。在专业的技术美术(technical artist)的手中,shader能够创造出千变万化的视觉效果。

打开已有的Shader Graph

        Shader Graph从名字来看,就是想让我们用画图表的方式来创建shader。我们先来看看Shader Graph打开后的样子。在下面例子中,有一个Example_Shimmer的shader,它是通过Shader Graph创建的。在工程中直接双击这个文件即可打开它。

         第一次看到这个界面,脑子会比较糊,没关系,我们接下来创建空的Shader Graph窗口来看。

Shader Graph窗口

        首先,我们在项目窗口中,右键新建一个Shader Graph,名字为Shimmer_ShaderGraph,创建好后双击打开(我的工程目录中创建Shader Graph的位置是Assets > CreativeCore_Shaders > ShaderGraphs,渲染管线是URP,因此右键选择Create > Shader  > Universal Render Pipeline > Lit Shader Graph(Unity版本2020.3.43f1c1)):

        1:Shader Graph工具栏,这里可以保存shader

        2:Blackboard,黑板,包含了所创建的shader可供外部所使用的属性。在这里我们可以定义属性的类型,名字,默认值等

        3:Workspace,工作空间,用于创建shader的node graph的地方

        4:Main Preview window,主预览窗口,可以实时预览当前的shader效果

        5: Graph Inspector window,类似于Unity Editor的Inspector面板,显示当前设置、属性和所选择的node的相关信息

        6: Master Stack,主堆栈,定义着色器最终表面外观的着色器图的终点,一个 Shader 中有且只有一个。它列出了顶点着色器和片段(片元)着色器的主要着色器属性,并提供插入必要值的终端节点

        在Shader Graph窗口中:

        平移:鼠标中间按住后拖动可以实现平移(或者按住Alt(windows)或Option(Mac))

        缩放:滚动鼠标滚轮

        聚焦和放大元素:选中元素后按F,按A恢复

        了解了基本的Shader Graph窗口后,我们以一个案例来练习一下。这个练习目标是创建一个自定义的shader,带有发光(glowing)、透明(transparent)和微光(shimmer)的效果。

添加程序化贴图(Procedural map)

        对于微光(shimmer)的效果,我们使用程序化噪声贴图(procedural noise map)来实现。程序化(Procedural)的意思是纹理是通过方程或算法来创建的,而不是从图片创建而来。Shader Graph提供了少量可选的程序化噪声贴图,每种贴图会产生像云朵流动效果的贴图。

        下面我们来在Shader Graph中添加第一个节点(node):

        1. 在Shader Graph的工作空间中按空格键打开Create Node菜单(也可以用右键选择Create Node)

        2. 在搜索框中输入noise,然后选择Gradient Noise

        3. 在工作空间中选择新建的Gradient Noise,查看结果

       

让程序化贴图动起来

        回忆一下之前讲过的纹理的Offset属性,它可以改变物体表面从纹理的哪个位置开始映射。前面一小节生成的贴图是一个随机的噪声图,我们可以让Offset值不停地变化来让这个图动起来。

        正如Tiling和Offset在URP/Lit Shader中是一起出现的一样,Tiling和Offset在Shader Graph中也是绑定到一个节点中的。

        1. 在工作空间中,按空格键或右键,在弹出的窗口中创建一个Tiling and Offset节点。这个节点可以用来调整noise map的缩放参数和起始位置

        2. 拖动Tiling and Offset节点的output到Gradient Noise Node的input。完成连接后,在Tiling and Offset里的值就会影响到Gradient Noise

        3. 改变Tiling and Offset节点上的Offset值,看看实际的效果。

         4. 创建一个Time节点,这个节点可以让我们随着时间变化改变一个值

        5. 由于我们想要Offset随着时间变化,因此我们将Time节点的output和Tiling and Offset节点的input连接起来,连接后,我们就可以看到noise纹理动起来了

        注意到Time节点有几种选择,对于Sine/Cosine Time,其效果就是一个来回往复的效果,正如正弦、余弦函数是周期函数的性质一样

         6. 最后,我们将Gradient Noise节点的output连接到Master Stack的Base Color,这样就能看到这个材质所呈现的效果了

        注意:记得经常使用Shader Graph窗口的左上角的 Save Asset保存你的成果!!!

 添加材质的可输入属性

        对于使用你所创建的材质的艺术家或你自己而言,如果我们能够提供外部可调的参数来控制材质的效果,比如本例子中,shimmer效果的移动速度,那么这个材质会变得更加实用。要实现这个功能,我们可以使用input node来设置材质属性,允许使用者修改最终效果。

        Input node在Blackboard中创建,黑板的标题和shader的名字是一样的。

        1. 在Blackboard上点击“+”,选择Float,创建一个浮点值input node。将其命名为“ScrollSpeed”。使用这个input node,使用者就可以通过输入一个浮点数来调整滚动速度了

        

         2. 拖动刚刚在Blackboard中创建的input node到工作空间中

         3. 由于Time节点并没有input节点,我们无法直接将ScrollSpeed的输出和Time节点输入连接起来。这里我们用另一种方式来实现这两者的结合,创建一个Multiply节点,它可以用来将两个值组合到一起,组合的方式是相乘并输出结果。

              提示:还有一种让Create Node菜单出现的方法,就是拖动ScrollSpeed的output节点到工作空间的空白处,然后松开鼠标左键,这时就会出现Create Node菜单。

        4. 我们将原来Time节点的output和Tiling And Offset之间的连接,改到ScrollSpeed连接的Multiply节点上的B输入上(要删除原来的连线,可以选择原来的连线,然后按delete),接下来将Multiply节点的output和Tiling and Offset的input连接起来。

         注意此时,noise贴图停止运动了。这是因为ScrollSpeed的默认值是0,因此Multiply所返回的结果是0,因此Tiling And Offset节点中Offset的值固定为0,所以就没有动的效果了。

        7. 要修改ScrollSpeed的默认值,选中ScrollSpeed,在Graph Inspector中,输入一个默认值。

 贴图组合

        前面的几个小节中,我们已经实现了一个能够移动的噪声贴图,我们还可以再增加一个造成贴图,让这个贴图移动速度不同,然后叠加组合这两幅噪声贴图的效果来实现更有趣的效果。

        首先我们先复制一份原来的Gradient Noise,Multiply,Tiling And Offset节点(不用选择Time或ScrollSpeed)。

        1. 在工作空间中,拖出一个方框,框住这些节点(或者通过按住Ctrl后点击这些节点)

        2. 选中所有要复制的节点后,点击右键,选择Duplicate,然后复制这些节点(也可以用Ctrl+D)

         3. 接下来,我们调节一下复制出的噪声贴图的移动速度,这里我们要将移动速度变慢。因此我们增加一个Divide节点,用来做除法,将Time的Cosine Time的output连接到Divide节点的A输入,然后设置B输入为2,表示Time输出的值除以2.

            4. 将Divide节点的output和Multiply的B节点连接起来

        5. 现在我们得到了两张不同移动速度和方向的噪声贴图,为了将它们的效果融合到一起。我们再新建一个Multiply节点,然后将两个Gradient Noise Map的output连接到Multiply的A,B输入,然后将Multiply的output连接到Master Stack的Base Color上

使用节点分组功能

        当Shader Graph中节点数量变得庞大时,我们有必要对完成特定功能的节点进行分组管理,以便让图看起来更加简洁。下面我们将所有用来生成Offset值的节点(不包括Gradient Noise节点)放大一个Group中来维护。

        1. 首先选中所有的节点,如下图

         2. 在任意一个选中的节点上点击右键(注意不是工作空间空白处),点击Group Selection(或者按Ctrl + G(MAC上按CMD+G) ),然后将Group的名字改为“Changing Offset over Time”

         当这些节点被划分为一个group后,我们可以对它们做整体移动管理,并且从逻辑上看这些节点的功能一目了然

调节纹理的缩放

        在实际使用中,我们要让shader尽可能的有更多的灵活性。当前的shader的纹理看起来有些密集,我们可以添加一个input节点来调节纹理的缩放效果。

        本例子中,我们会增加一个叫GradientScale的浮点类型输入节点,然后实现两个Noise Map有不同缩放比例的效果。具体的过程不再详细描述,使用之前的知识已经完全足够了,下面的示例图是一个参考,大家练习的时候可以自由发挥,创造出不同的效果。

 调整对比度

        目前为止,我们的shader已经越来越有微光的效果了,但效果本身只有黑白两种对比强烈的颜色,并且也无法修改颜色。

        要调整对比度,我们需要使用Remap节点,它可以将0-1范围的值缩到更窄的范围内。

        1. 首先在Blackboard中增加一个Vector2 input节点,它只有两个值。我们取名为RemapValues,将它拖到工作空间中,并设置Y为1

        2. 增加一个Remap节点到工作空间

        3. 连接之前作为Base Map input节点的Multiply节点的output,到Remap的的In节点

        4. 连接RemapValues节点到Reamp节点的Out Min Max,这个值指定了Remap节点所能输出的值的最小值和最大值,可供外部进行调节

        5. 确保Remap节点的In Min Max的值设置为了0和1,这个值是用来匹配输入值In的实际范围的。

        6. 在Graph Inspector中,调节一下RemapValues的默认值

        7. 将Remap节点的output和Master Stack的Base Color进行连接,看看实际效果

 调整颜色和透明度

        为了能够调整颜色,我们再添加一个Multiply节点,让当前Remap输出的颜色和一个TintColor的input节点进行叠加,有了之前的基础,这里应该很容易能够完成。

         如果要让颜色看起来更加突出,这里TintColor的Mode可以选择HDR。

         颜色看起来似乎还是不够突出?我们还可以将Multiply节点的output连接到Master Stack的Emission节点上,看看效果

         接下来我们来实现透明效果,在Graph Inspector中,在Graph Settings标签页上,将Surface改为Transparent,然后将Remap节点的output和MasterStack的Alpha连接起来

 最后的练习

        观察目前为止我们所创建的Shader的Master Stack,里面还有Metallic和Smoothness这两个值我们没有动过,我们可以尝试添加Input节点来让使用者能够调节这两个值,这个练习留给大家自己实现。

        重要提示:记得点击Save Asset及时保存你的进展

创建一个测试材质

        到这里我们已经创建出了一个shader了,要使用这个shader,我们创建一个新的材质,取名为MyShimmerMaterial,然后将这个材质的Shader选择为我们用Shader Graph创建的shader

         我们将其应用到场景中的某个模型上,看看实际效果

 Shader Graph更多的探索

        上面的练习我们创建了一个简单的shader并且应用到了材质上。Shader Graph还有许多东西值得探索,在具体使用过程中,我们可能会想要了解某一个节点的详细帮助信息。我们可以在Shader Graph中选择一个节点,右键点击后,选择Open Documentation选项,Unity会帮助我们打开这个节点相关的文档。

        Unity官方关于Shader Graph的手册地址:About Shader Graph | Shader Graph | 10.7.0

        Unity官方的一个制作飘扬的旗帜的案例:Make a Flag Wave with Shadergraph - Unity Learn

        Unity资源商店中其他创作者的案例:Unity Asset Store - The Best Assets for Game Making

        

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Shader Graph简介 的相关文章

  • QML 将纹理应用于网格

    我正在尝试将图像纹理应用到 QML Qt 5 6 2 中的网格 我从示例 Shadow Map QML 开始 我想对 GroundPlane 进行纹理处理 材质和效果 qml 类应用于该 GroundPlane 网格 但我看不到如何应用图像
  • 游戏开发常见操作梳理系列之——玩家信息的显示系统

    在游戏中 有不少游戏在左上角会出现玩家的头像和等级以及血量 这就是玩家的信息显示系统 那么这些是如何制作的呢 接下来我将讲讲代码的操作 其它操作我会在其它笔记中一一说明 敬请期待 信息的显示相当简单就是控制一些UI 然后在其它系统里面填写相
  • 游戏开发常用实践操作之按动任意键触发

    接下来一些笔记会对于一些大大小小的实践操作进行记录 希望对你有所帮助 在游戏中 我们经常会遇到一些按动任意键触发的操作 接下来展示核心代码 以下是对于Unity中的操作 使用的UI是NGUI 对于核心操作没有影响 你可以自己置换 void
  • 为 webgl 中的每个对象使用不同的顶点和片段着色器

    我在 webgl 中有一个包含多个对象的场景 对于每个对象 我想使用不同的顶点和片段着色器 我的第一个问题是 是否可以为每个对象都有一个着色器 我知道在 opengl 中这是可能的 这是与我的想法类似的伪代码 任何例子将不胜感激 glena
  • 线性光模式的 Alpha 混合层

    我正在重新创建一些 Photoshop 混合 并尝试使用线性光模式 在 Photoshop 中 您将有一个不透明度为 100 的背景图层 然后是一个不透明度为 50 的顶层 其混合模式设置为 线性光 我确实找到了有关如何进行线性光混合的信息
  • Three.js 使用 WebRTC 并应用 Shader

    我不知道如何将着色器应用于具有视频纹理的 Three js 对象 我一直在使用 webRTC 和 Three js 并使用标准材质成功将视频纹理映射到网格上 var material new THREE MeshBasicMaterial
  • 着色器:如何在不生成几何体的情况下绘制 3D 点顶点?

    我有一个 3D Webgl 场景 我正在使用Reglhttp regl party http regl party 这就是WebGL 所以我本质上是直接写 GLSL 这是一个游戏项目 我有一个 3D 位置数组 x y z 它们是子弹或射弹
  • OpenGL 定向光着色器

    我想使用 OpenGL 和 GLSL 将定向光添加到我的场景中 问题在于 理论上正确的方法会产生错误的结果 在顶点着色器中我执行以下操作 光线的方向以世界坐标给出 并使用 viewMatrix 转换为相机坐标 使用法线矩阵将顶点的法线转换为
  • 如何将shadershop公式转换成glsl

    我最近一直在学习着色器的一些基础知识 并且想出了一个很棒的视觉工具 着色器商店 http www cdglabs org Shadershop 但我无法将我在此站点中创建的公式转换为 glsl 一个简单的例子 我在此网站中创建了一个公式 我
  • 在Unity中如何使两个精灵的重叠区域透明?

    在Unity中如何使两个精灵的重叠区域透明 你能写一个关于它的着色器吗 经过一些研究 我了解到我应该使用模板缓冲区 但我不知道如何使用 这对我来说至关重要 我必须在 6 天内完成这个学校项目 请帮忙 示例图片 就这样 请记住这是我第一次使用
  • 使用着色器创建模糊过滤器 - 从片段着色器访问相邻像素?

    我想使用 OpenGL ES 2 0 中的片段着色器创建模糊效果 我感兴趣的算法只是一个平均模糊 将所有相邻像素添加到我自己中并除以 9 进行标准化 但是我有两个问题 1 这是否需要我首先渲染到帧缓冲区 然后切换渲染目标 或者有更简单的方法
  • 如何使用鼠标改变OpenGL相机

    我正在尝试在 OpenGL 中设置一个相机来查看 3 维中的一些点 为了实现这一点 我不想使用旧的 固定的功能样式 glMatrixMode glTranslate 等 而是自己设置模型视图投影矩阵并在我的顶点着色器中使用它 正交投影就足够
  • OpenGL:多个顶点的单个顶点属性?

    我有一个接受以下属性的顶点着色器 a posCoord 顶点位置 a texCoord 纹理坐标 传递给片段着色器 a alpha 透明度因子 传递给片段着色器 我正在渲染的对象都是 广告牌 一对直角三角形组成一个矩形 我正在使用一次调用g
  • CPU 到 GPU 法线映射

    我正在创建一个地形网格 然后这个答案 https stackoverflow com a 5284527 1356106我正在尝试将 CPU 计算法线迁移到基于着色器的版本 以便通过降低网格分辨率并使用在片段着色器中计算的法线贴图来提高性能
  • 使用 GLSL 着色器在同一片段着色器中定义的多个子例程类型无法正常工作

    我正在开发一个使用 GLSL 着色器的程序 我编写了 2 种不同的方法来用 2 种不同的方法计算 ADS 环境光 漫反射 镜面反射 着色 为了正确完成这项工作 我使用子例程来使用一种或另一种方法来计算 ADS 着色 这是片段着色器代码的一部
  • 帧缓冲区和在 opengl 中使用着色器

    我对帧缓冲区有点困惑 我想要做的是使用附加了多个纹理的帧缓冲区 填充每个纹理 然后使用着色器组合 混合 所有纹理以创建新的输出 听起来很容易 是的 我也是这么想的 但我不明白 如何将当前绑定的纹理传递给着色器 您需要的是将纹理放入特定的槽中
  • 在着色器中旋转法线

    我有一个场景 其中有多个具有各自位置和旋转的模型 给定法线 着色器对每个像素应用简单的双向照明 那是我的顶点着色器 version 150 in vec3 position in vec3 normal in vec2 texcoord o
  • iPhone glShader二进制

    有谁有如何编译着色器 保存着色器二进制文件以及使用 glShaderBinary 稍后使用 iPhone iOS OpenGL ES 2 0 加载着色器的示例 这是不可能的 至少对于 iOS 4 及更低版本 iOS 不支持任何预编译的二进制
  • 3D 图形批处理

    很多网站 文章都说 批量 批 批 有人可以解释一下着色器中的 批处理 代表什么吗 即 是否 改变纹理 更改任意着色器变量 意味着某些东西不能 批处理 最简单的总结方法就是尝试尽可能少地调用 API 来绘制您需要绘制的内容 使用顶点数组或 V
  • Raspberry PI 上的 JavaFX:加载库存着色器时出错

    目前我正在尝试部署我的 JavaFX 应用程序 该应用程序可以在 Windows 上的 Raspberry Model B v1 2 上顺利运行 由于 JavaFX 不能直接在 Raspi 上使用 我已经按照此处所述使用 Gluon 进行了

随机推荐

  • Java代码中对文件的操作

    引言 这几天的项目涉及到了文件的操作 我这边做一下整理 环境说明 jdk版本 1 8 0 311 对文件的操作 1 保存文件 保存文件 param file 文件 param path 文件保存目录 param name 保存后的文件名字
  • 怎么在浏览器的控制台上换行输入?

    使用快捷键 shift enter 如
  • python numpy.meshgrid()函数的用法

    numpy meshgrid xi kwargs 从一个坐标向量中返回坐标矩阵 参数 x1 x2 xn array like 表示网格坐标的一维数组 indexing xy ij 可选 笛卡尔 xy 默认值 或矩阵 ij 输出索引 spar
  • matlab跟踪目标图像边缘并计算长轴短轴

    题目如下 对图像进行处理和分析 跟踪出目标边缘 并计算出目标的长轴和短轴及方向 原始图像如图1所示 图1 原始图像 一 处理过程 1 边缘提取 目标边缘提取在图像处理学科中属于数学形态学 在提取目标边缘之前有认真思考过应该用什么方法 是用4
  • java的内存机制以及变量的作用域

    初学者对于Java的类和对象往往一头雾水 尤其是当涉及到程序细节的时候 出现混乱似乎在所难免 笔者根据自己的学习经验 认为 理解java的内存机制以及变量的种类和作用域 对于精确把握编程规则相当重要 一 java内存机制 java程序在内存
  • Springboot整合Mysql集群

    文章目录 一 方法一 1 1 默认配置 1 2 需要自定义配置 1 3 自定义数据库配置类 1 4对从库进行操作 在写一个配置类 一 方法一 1 1 默认配置 1 2 需要自定义配置 1 3 自定义数据库配置类 第一步 添加连接池驱动 第二
  • Java内存的Used、Committed、Max的区别

    不想看英文 可直接看最后的结论 A MemoryUsage object represents a snapshot of memory usage Instances of the MemoryUsage class are usuall
  • 【C语言进阶】文件操作(二)

    大家好我是沐曦希 文件操作 1 前言 2 文件的随机读写 2 1 fseek函数 2 2 ftell函数 2 3 rewind 3 文本文件和二进制文件 4 文件读取结束的判定 4 1 被错误使用的feof 5 文件缓冲区 6 写在最后 1
  • rsync远程同步实现快速、安全、高效的异地备份

    目录 一 rsync介绍 1 rsync是什么 2 rsync同步方式 3 rsync的特性 4 rsync的应用场景 5 rsync与cp scp对比 6 rsync同步源 二 rsync命令 1 常用选项 2 实例 本地复制对比 3 配
  • React(二):React开发神器Webpack

    React 一 React的设计哲学 简单之美 React 二 React开发神器Webpack React 三 理解JSX和组件 React 四 虚拟DOM Diff算法解析 React 五 使用Flux搭建React应用程序架构 上一篇
  • 基于LinearLayout的小标签(TextView)自动换行(修改)

    设计最初是因为公司项目需要多处显示多个小标签 并且需要多行展示 最开始使用的GridLayout 但是这个网格布局局限性太高 标签是动态的 内容也不定 用GridLayout就会有多行占用的各种显示问题 所以后来换成了LinearLayou
  • 【源码学习】正则表达式

    模式 Patterns 和修饰符 flags 正则表达式是提供了一种在文本中进行搜索和替换的强大的方式的模式 在 JavaScript 中 我们可以通过 RegExp 对象使用它们 也可以与字符串方法结合使用 正则表达式 正则表达式 可叫作
  • 如何制作一个微信小程序【微信小程序是怎么做的】

    为什么现在这么多人使用微信小程序呢 因为微信小程序除了便捷易开发 公司企业可以用来做小程序展示官网 商家也可以做小程序商城 甚至个人也可以拥有自己的小程序 那么如何制作一个微信小程序 微信小程序是怎么做的呢 下面给大家说说简单的流程 一 要
  • IGBT的绘制与逆变器的绘制-Visio制图总结【电控类】(三)

    在逆变器非线性补偿研究方向的文章中看到了一些逆变器的示意图 发现均有手绘的痕迹 碰巧在AxGlyph软件中有IGBT这个元件 就截图仿着画了一张IGBT的图 下文中会给出一张IGBT图片和两张逆变器图片 绘图步骤 把截到的IGBT图片粘贴到
  • 一篇搞定Linux和IOS或Android通讯(usbmuxd、libimobiledevice、libusb、AOA)

    1 Linux要与苹果手机通讯需要两个组件 1 usbmuxd 是苹果的一个服务 这个服务主要用于在USB协议上实现多路TCP连接 将USB通信抽象为TCP通信 苹果的iTunes Xcode 都直接或间接地用到了这个服务 参考链接 htt
  • 阻止回车提交表单

  • UNCTF2022 wp Misc magic_word

    知识点 GBK编码 UTF 8编码 零宽度隐写 原题链接 WP 通过文档开篇打油诗中的锟斤拷可以很明显知道此题和UTF 8编码与GBK编码有关 将内容通过UTF 8编码可以得到提示 零宽隐写 将全文清除格式可以得到正文 再使用解码工具解码后
  • SpringBoot_4

    1 PropertySource PropertySource 加载指定的配置文件 properties 先前我们通过 ConfifigurationProperties加载全局配置文件中的值到javabean中 但是我们在具体使用的时候不
  • VScode配置MySQL连接使用MySQL

    目录 本地安装MySQL 1 MySQL官网下载 点击下载 https dev mysql com downloads mysql 2 解压并设置环境变量 3 初始化启动 VScode 连接MySQL 1 安装插件 2 连接MySQL 3
  • Shader Graph简介

    使用着色器 shader 和材质 material 我们能够创造出非常多有趣的效果 除了Unity自带的shader外 还可以自己编写shader或使用其他人所编写的shader 编写shader通常需要我们了解shader编程语言的语法和