尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

Unity ShaderGraph入门:可视化着色器制作与动态发光材质实战

Unity ShaderGraph入门:可视化着色器制作与动态发光材质实战 1. 项目概述为什么你需要ShaderGraph如果你在Unity里做过3D项目肯定遇到过这样的场景美术同学递给你一个材质需求说想要一个会呼吸的发光边缘或者一个随着距离变化的溶解效果。你打开代码编辑器看着那一堆CG/HLSL代码感觉头大如斗。传统的Shader编写就像是用汇编语言在画画门槛高、调试难、迭代慢。这就是ShaderGraph的价值所在。它把编写着色器这个“黑盒”过程变成了一个可视化的、连线式的图形编辑工作流。你不用再死记硬背那些晦涩的语法和矩阵运算而是通过拖拽节点、连接线缆直观地构建出复杂的视觉效果。从简单的颜色混合到基于物理的渲染PBR再到全屏后处理特效ShaderGraph都能胜任。它极大地降低了图形编程的门槛让技术美术TA甚至是有一定逻辑思维的美术同学都能参与到核心视觉效果的创作中。这个项目就是带你从零开始亲手搭建你的第一个可视化着色器。我们会从最基础的环境配置讲起确保你的Unity能跑通ShaderGraph然后深入解析几个最核心、最常用的节点理解它们是如何运作的最后我们会把这些知识串联起来制作一个简单但炫酷的实战效果——比如一个随时间脉动、颜色可调的发光材质。整个过程我会穿插我踩过的坑和总结的技巧让你不仅能复现更能理解背后的逻辑。2. 环境配置搭建你的可视化着色器工作台万事开头难但配置环境这一步我们必须走得稳稳当当。一个错误的环境配置可能会导致后续所有步骤都无法进行或者出现各种诡异的报错。2.1 Unity版本与渲染管线选择这是最关键的一步选错了版本或管线ShaderGraph根本用不了。Unity版本ShaderGraph是作为一个可安装的包Package提供的。从Unity 2019.1开始它被正式集成到编辑器中但更稳定、功能更全面的体验我强烈推荐使用Unity 2021 LTS长期支持版或更新版本。LTS版本经过了更长时间的测试Bug更少社区支持也更完善。我目前的主力版本是2022.3 LTS非常稳定。渲染管线Render Pipeline这是ShaderGraph的运行基础。Unity目前主要有三种渲染管线你的ShaderGraph必须基于其中一种来创建内置渲染管线Built-in传统管线。从2019.3开始可以通过安装Universal RP或HD RP包再安装对应的Shader Graph包来使用。不推荐新手从这里开始配置稍显繁琐。通用渲染管线Universal Render Pipeline, URP轻量、高性能适用于移动端和大部分PC平台。这是入门和绝大多数项目的首选。你需要通过Package Manager安装Universal RP包。高清渲染管线High Definition Render Pipeline, HDRP面向PC和主机的高保真图形管线功能强大但配置复杂对硬件要求高。除非你的项目是3A级画质否则初期不建议使用。我的选择建议对于99%的初学者和独立开发者请毫不犹豫地选择URP。它平衡了效果、性能和易用性。2.2 创建URP项目与核心包安装假设我们使用Unity 2022.3 LTS。打开Unity Hub点击“新建项目”。在模板选择中找到并选择“Universal Render Pipeline”模板。Unity会自动为你创建一个预设好URP配置的项目。如果是从空白项目开始你需要手动安装包。打开顶部菜单Window Package Manager。在Package Manager窗口左上角确保下拉菜单选择的是“Unity Registry”。在搜索框中输入“Universal RP”找到后点击安装。Unity可能会提示你升级项目设置同意即可。接着搜索“Shader Graph”同样找到并安装。注意安装Shader Graph时它会自动关联并安装其依赖项如Render Pipeline Core等确保全部安装。安装完成后检查你的项目里是否有一个名为Settings的文件夹里面包含一个UniversalRP-HighQuality之类的资产文件。这证明URP配置已就绪。2.3 创建你的第一个Shader Graph资产环境搭好了我们来创建第一个着色器文件。在Project窗口的Assets文件夹下右键点击选择Create Shader Graph。这里你会看到几个选项Blank Shader Graph一张完全空白的画布所有节点需要你从头添加。URP Lit Shader Graph一个预设好的、基于物理的着色器包含了法线、金属度、粗糙度等PBR标准输入。强烈建议初学者从这里开始。URP Unlit Shader Graph一个不受光照影响的着色器适合UI、粒子、全屏特效等。我们选择URP Lit Shader Graph并给它起个名字比如MyFirstShader。双击这个新创建的.shadergraph文件ShaderGraph编辑器窗口就会打开。你会看到一个默认的“Master Stack”主堆栈和一些已经连接好的基础节点如Fragment Position、Normal等。这就是你的可视化着色器工作台。踩坑实录有时双击打开ShaderGraph窗口是空白的或者节点显示异常。这通常是因为编辑器GUI刷新问题。尝试一下步骤1) 保存所有文件 (CtrlS)。 2) 关闭ShaderGraph窗口再重新打开。 3) 重启Unity编辑器。这个问题在早期版本中比较常见。3. 核心节点解析理解着色器的“乐高积木”ShaderGraph的核心就是节点Node。每个节点都是一个独立的功能单元有输入端口、输出端口和可配置的属性。通过连线数据如颜色、向量、数值从一个节点的输出“流”向另一个节点的输入经过层层处理最终决定屏幕上每个像素的颜色。3.1 输入节点数据的源头输入节点是着色器获取信息的入口。它们本身不处理数据而是提供数据。Property属性这是最常用、最重要的输入节点。它定义的变量会暴露在材质的Inspector面板上让你可以在运行时动态调整。比如一个Color属性可以让你随意改变物体颜色一个Float属性可以控制发光强度。创建在ShaderGraph编辑器右上角的Blackboard黑板区域点击号选择类型Color, Vector, Float, Texture2D等。使用将属性从Blackboard拖到画布上它就变成了一个可连接的节点。将其输出连接到后续节点。技巧给属性起一个清晰的名字如_MainColor并合理设置默认值。勾选Exposed确保它在材质面板可见。Time时间提供自游戏开始以来的时间值以秒为单位。它是制作动态效果如脉动、旋转、流动的核心驱动。输出的是一个不断增长的浮点数。UV提供模型顶点的纹理坐标通常是一个二维向量。它是采样纹理、制作平铺/偏移效果的基础。Position / Normal / Vertex Color分别提供片段像素的世界空间位置、法线向量和顶点颜色数据。用于制作基于位置、朝向或预绘顶点色的复杂效果。3.2 数学与运算节点数据的加工厂这些节点对输入的数据进行数学计算。Add / Subtract / Multiply / Divide加减乘除基础运算。注意对于颜色Vector4和向量Vector2/3运算是逐分量进行的。Lerp线性插值使用频率极高的节点。它接受三个输入A, B, T (0到1)。当T0时输出A当T1时输出BT在中间时输出A和B的混合值。它常用于平滑地在两种状态如两种颜色、两种纹理之间过渡。Sine / Cosine正弦/余弦结合Time节点可以轻松创建周期性的波动效果比如呼吸灯。公式通常是输出 原始值 (正弦(时间 * 频率) * 幅度)。Fraction / Floor / Ceil取小数/向下取整/向上取整常用于创建网格、棋盘格等离散化效果。One Minus一减快速计算(1 - 输入)常用于反转遮罩或效果。3.3 纹理与采样节点引入细节Sample Texture 2D采样2D纹理这是使用贴图的关键节点。你需要将一张Texture2D类型的Property连接到它的Texture输入端口将UV坐标连接到UV端口。它的RGBA输出分别对应纹理的红、绿、蓝和透明度通道。技巧对于Normal Map法线贴图在创建Texture2D属性时需要将其Type设置为Normal这样Unity才会以正确的方式sRGB关压缩格式为BC5/DXT5nm处理它。采样法线贴图后通常还需要一个Normal From Texture节点将其转换为着色器可用的法线向量。3.4 主堆栈Master Stack最终的出口这是所有数据流的终点决定了片段像素的最终归宿。在URP Lit Shader Graph中主堆栈通常包含Base Color基础色物体本身的颜色。可以连接一个颜色值或纹理采样结果。Normal法线连接法线向量影响光照计算产生凹凸感。Metallic / Smoothness金属度/光滑度PBR材质参数决定物体是金属还是非金属表面是粗糙还是光滑。Emission自发光让物体自己发光不受场景光照影响。这是制作发光效果的关键通道。Alpha / Alpha Clipping控制透明度和透明度裁剪。你的所有节点网络最终必须连接到主堆栈的这些输入端口上才能影响最终的渲染结果。4. 实战效果制作创建一个动态脉动发光材质现在我们把学到的节点组合起来制作一个会呼吸、颜色可调的发光球体。这个效果综合运用了属性、时间、数学运算和主堆栈输出。4.1 第一步搭建基础颜色与自发光网络创建属性在Blackboard中创建两个属性。_BaseColor(类型: Color)默认值设为一种深蓝色如#0A2463。_EmissionColor(类型: Color)默认值设为一种亮青色如#00FFE0。_PulseSpeed(类型: Float)默认值设为2这将控制脉动速度。_PulseStrength(类型: Float)默认值设为0.5这将控制发光强度的变化幅度。制作脉动信号从节点创建菜单搜索并添加一个Time节点。添加一个Multiply节点。将Time节点的Time输出口连接到Multiply的A将_PulseSpeed属性节点连接到B。这样我们就得到了一个加速后的时间T Time * _PulseSpeed。添加一个Sine节点。将上一步Multiply节点的输出连接到Sine的输入。现在输出是一个在-1到1之间周期性变化的值。添加一个Remap重映射节点。将Sine的输出连接到Remap的In。将Remap的Out Min Max设置为In Min Max为(-1, 1)Out Min Max为(0, 1)。这样我们就得到了一个在0到1之间平滑变化的信号更适合控制强度。再添加一个Multiply节点。将Remap的输出连接到其A将_PulseStrength属性节点连接到B。输出结果PulseFactor就是一个受我们控制的、在0到_PulseStrength之间波动的因子。合成最终自发光颜色添加一个Multiply颜色与标量乘节点。将_EmissionColor属性节点连接到A将上一步得到的PulseFactor连接到B。这个节点的输出就是一个强度随时间脉动的自发光颜色。关键技巧为了让发光在最低点时也不完全熄灭我们可以再加一个Add节点。创建一个Float常量节点值设为0.2。将PulseFactor和这个常量0.2相加再将结果连接到与_EmissionColor相乘的Multiply节点的B端。这样发光强度就在0.2到(0.2_PulseStrength)之间变化有了一个基础亮度。连接主堆栈将_BaseColor属性节点直接连接到主堆栈的Base Color输入。将第3步合成的最终自发光颜色连接到主堆栈的Emission输入。4.2 第二步创建并应用材质保存你的ShaderGraph点击编辑器左上角的Save Asset。在Project窗口中右键点击你的.shadergraph文件选择Create Material。Unity会自动创建一个使用此着色器的新材质并以其命名如MyFirstShader.mat。在场景中创建一个Sphere球体或Cube立方体。将上一步创建的材质球直接从Project窗口拖拽到场景中的物体上。点击该物体在Inspector面板中查看其材质组件。你应该能看到我们定义的四个属性_BaseColor,_EmissionColor,_PulseSpeed,_PulseStrength的调节滑块和色盘。运行游戏。你应该能看到物体在基础色之上散发着脉动的光芒。尝试在运行状态下拖动_PulseSpeed和_PulseStrength的滑块可以看到发光频率和强度实时变化。调整_EmissionColor可以改变发光的色调。4.3 第三步效果优化与扩展思路基础的脉动发光已经实现了但这只是个开始。添加纹理细节创建一个Texture2D属性_MainTex用Sample Texture 2D节点采样将其RGB输出与_BaseColor通过Multiply节点混合再输出到Base Color。这样就有了纹理细节。法线贴图创建另一个Texture2D属性_NormalMap类型设为Normal。采样后连接Normal From Texture节点再将结果输出到主堆栈的Normal物体表面立刻会有凹凸质感。更复杂的脉动用两个不同频率的Sine波通过Add或Multiply组合可以创造出更丰富、不规则的脉动模式。基于距离的发光使用Position节点获取像素世界坐标计算其与某个目标点可用Vector3属性定义的距离。用这个距离值去影响Emission的强度就可以做出靠近某处才发光的效果。5. 常见问题与排查技巧实录即使跟着步骤做也难免会遇到问题。这里记录了几个我高频踩到的坑和解决方法。5.1 问题ShaderGraph窗口打开是空白或节点显示不全可能原因1Unity编辑器GUI或Shader编译器临时错误。排查与解决首先尝试保存所有文件 (CtrlS)。关闭并重新打开ShaderGraph窗口。如果不行尝试点击Unity顶部菜单Assets Reimport All。终极方案重启Unity编辑器。这个问题在复杂项目或长时间运行后较常见。5.2 问题材质在场景中显示为洋红色Missing可能原因1着色器编译错误。这是最常见的原因。ShaderGraph背后还是在生成代码如果节点连接有逻辑错误如类型不匹配编译就会失败。排查与解决检查ShaderGraph编辑器窗口的底部是否有红色的错误信息。双击错误信息通常会定位到有问题的节点。常见错误试图将ColorVector4直接连接到只接受Float的输入端口。使用Split节点分离出需要的通道如R或使用Swizzle节点重新组织向量分量。检查所有属性节点的Reference名称是否含有空格或特殊字符应使用下划线。可能原因2渲染管线不匹配。你的ShaderGraph是基于URP创建的但项目当前使用的渲染管线设置是Built-in或HDRP。排查与解决检查Edit Project Settings Graphics看看Scriptable Render Pipeline Settings是否挂载了正确的URP配置文件如UniversalRP-HighQuality。确保场景中的灯光是URP兼容的如Universal Additional Light Data组件。5.3 问题效果在Game视图和Scene视图不一样可能原因Scene视图的渲染模式可能不是“Shaded”。或者Game视图的分辨率、后处理效果与Scene视图不同。排查与解决在Scene视图左上角确保渲染模式是Shaded。检查Main Camera上是否有后处理Post Processing组件确保其配置一致。这是一个常见现象通常以Game视图为准进行调试。可以在ShaderGraph中使用Preview窗口主堆栈旁边的3D模型预览作为主要参考它更稳定。5.4 问题性能疑虑节点连得太复杂会不会很卡分析与建议单个Shader的复杂度对于现代GPU一个中等复杂度的ShaderGraph几十个节点在单个物体上的开销通常可以忽略不计。性能瓶颈更多出现在**Draw Call绘制调用和Overdraw过度绘制**上。优化技巧合并材质尽可能让多个物体使用同一个材质实例这是减少Draw Call最有效的手段。充分利用ShaderGraph的Property通过材质实例化来调节差异。简化计算避免在片段着色器Fragment中进行非常复杂的循环或高开销数学运算如pow,sin,noise。考虑能否将部分计算移到顶点着色器Vertex中。使用贴图代替实时计算对于一些复杂的、静态的图案如污渍、花纹可以事先用绘图软件生成贴图然后用Sample Texture 2D读取这比实时用节点计算噪声和函数要高效得多。利用LOD细节层次为远处物体使用简化版本的Shader。5.5 问题想实现一个效果但不知道用什么节点解决思路拆解效果把最终效果拆解成一步步的数据处理过程。例如“边缘光” “获取边缘信息” “颜色与强度控制”。“获取边缘信息”又可以拆解为利用Normal和View Direction做点积计算。善用搜索在ShaderGraph节点的创建菜单里有一个搜索框。尝试用关键词搜索比如“边缘”可能搜不到但搜“Fresnel”菲涅尔效应常用于边缘光或“Dot Product”点积就能找到相关节点。参考官方示例与社区Unity Asset Store里有大量免费的ShaderGraph示例包。在Package Manager中搜索“Shader Graph Samples”并导入里面有很多现成的效果网络可供学习和拆解。
返回列表