企业官网建设流程全解析

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必须基于其中一种来创建：

1. 内置渲染管线（Built-in）：传统管线。从2019.3开始，可以通过安装Universal RP或HD RP包，再安装对应的Shader Graph包来使用。不推荐新手从这里开始，配置稍显繁琐。
2. 通用渲染管线（Universal Render Pipeline, URP）：轻量、高性能，适用于移动端和大部分PC平台。这是入门和绝大多数项目的首选。你需要通过Package Manager安装Universal RP包。
3. 高清渲染管线（High Definition Render Pipeline, HDRP）：面向PC和主机的高保真图形管线，功能强大但配置复杂，对硬件要求高。除非你的项目是3A级画质，否则初期不建议使用。

我的选择建议：对于99%的初学者和独立开发者，请毫不犹豫地选择URP。它平衡了效果、性能和易用性。

2.2 创建URP项目与核心包安装

假设我们使用Unity 2022.3 LTS。打开Unity Hub，点击“新建项目”。

1. 在模板选择中，找到并选择“Universal Render Pipeline”模板。Unity会自动为你创建一个预设好URP配置的项目。
2. 如果是从空白项目开始，你需要手动安装包。打开顶部菜单Window > Package Manager。
3. 在Package Manager窗口左上角，确保下拉菜单选择的是“Unity Registry”。
4. 在搜索框中输入“Universal RP”，找到后点击安装。Unity可能会提示你升级项目设置，同意即可。
5. 接着，搜索“Shader Graph”，同样找到并安装。注意：安装Shader Graph时，它会自动关联并安装其依赖项，如Render Pipeline Core等，确保全部安装。

安装完成后，检查你的项目里是否有一个名为Settings的文件夹，里面包含一个UniversalRP-HighQuality之类的资产文件。这证明URP配置已就绪。

2.3 创建你的第一个Shader Graph资产

环境搭好了，我们来创建第一个着色器文件。

1. 在Project窗口的Assets文件夹下，右键点击，选择Create > Shader Graph。这里你会看到几个选项：
   • Blank Shader Graph：一张完全空白的画布，所有节点需要你从头添加。
   • URP > Lit Shader Graph：一个预设好的、基于物理的着色器，包含了法线、金属度、粗糙度等PBR标准输入。强烈建议初学者从这里开始。
   • URP > Unlit Shader Graph：一个不受光照影响的着色器，适合UI、粒子、全屏特效等。
2. 我们选择URP > Lit Shader Graph，并给它起个名字，比如MyFirstShader。
3. 双击这个新创建的.shadergraph文件，ShaderGraph编辑器窗口就会打开。你会看到一个默认的“Master Stack”（主堆栈）和一些已经连接好的基础节点（如Fragment Position、Normal等）。这就是你的可视化着色器工作台。

踩坑实录：有时双击打开ShaderGraph窗口是空白的，或者节点显示异常。这通常是因为编辑器GUI刷新问题。尝试一下步骤：1) 保存所有文件 (Ctrl+S)。 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)。当T=0时，输出A；当T=1时，输出B；T在中间时，输出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 第一步：搭建基础颜色与自发光网络

1. 创建属性：在Blackboard中创建两个属性。
   • _BaseColor(类型: Color)，默认值设为一种深蓝色（如#0A2463）。
   • _EmissionColor(类型: Color)，默认值设为一种亮青色（如#00FFE0）。
   • _PulseSpeed(类型: Float)，默认值设为2，这将控制脉动速度。
   • _PulseStrength(类型: Float)，默认值设为0.5，这将控制发光强度的变化幅度。
2. 制作脉动信号：
   • 从节点创建菜单搜索并添加一个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之间波动的因子。
3. 合成最终自发光颜色：
   • 添加一个Multiply（颜色与标量乘）节点。将_EmissionColor属性节点连接到A，将上一步得到的PulseFactor连接到B。这个节点的输出，就是一个强度随时间脉动的自发光颜色。
   • 关键技巧：为了让发光在最低点时也不完全熄灭，我们可以再加一个Add节点。创建一个Float常量节点，值设为0.2。将PulseFactor和这个常量0.2相加，再将结果连接到与_EmissionColor相乘的Multiply节点的B端。这样，发光强度就在0.2到(0.2+_PulseStrength)之间变化，有了一个基础亮度。
4. 连接主堆栈：
   • 将_BaseColor属性节点直接连接到主堆栈的Base Color输入。
   • 将第3步合成的最终自发光颜色，连接到主堆栈的Emission输入。

4.2 第二步：创建并应用材质

1. 保存你的ShaderGraph（点击编辑器左上角的Save Asset）。
2. 在Project窗口中，右键点击你的.shadergraph文件，选择Create > Material。Unity会自动创建一个使用此着色器的新材质，并以其命名（如MyFirstShader.mat）。
3. 在场景中创建一个Sphere（球体）或Cube（立方体）。
4. 将上一步创建的材质球，直接从Project窗口拖拽到场景中的物体上。
5. 点击该物体，在Inspector面板中查看其材质组件。你应该能看到我们定义的四个属性（_BaseColor,_EmissionColor,_PulseSpeed,_PulseStrength）的调节滑块和色盘。
6. 运行游戏。你应该能看到物体在基础色之上，散发着脉动的光芒。尝试在运行状态下拖动_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窗口打开是空白或节点显示不全

• 可能原因1：Unity编辑器GUI或Shader编译器临时错误。
• 排查与解决：
  1. 首先尝试保存所有文件 (Ctrl+S)。
  2. 关闭并重新打开ShaderGraph窗口。
  3. 如果不行，尝试点击Unity顶部菜单Assets > Reimport All。
  4. 终极方案：重启Unity编辑器。这个问题在复杂项目或长时间运行后较常见。

5.2 问题：材质在场景中显示为洋红色（Missing）

• 可能原因1：着色器编译错误。这是最常见的原因。ShaderGraph背后还是在生成代码，如果节点连接有逻辑错误（如类型不匹配），编译就会失败。
• 排查与解决：
  1. 检查ShaderGraph编辑器窗口的底部，是否有红色的错误信息。双击错误信息通常会定位到有问题的节点。
  2. 常见错误：试图将Color（Vector4）直接连接到只接受Float的输入端口。使用Split节点分离出需要的通道（如R），或使用Swizzle节点重新组织向量分量。
  3. 检查所有属性节点的Reference名称是否含有空格或特殊字符，应使用下划线。
• 可能原因2：渲染管线不匹配。你的ShaderGraph是基于URP创建的，但项目当前使用的渲染管线设置是Built-in或HDRP。
• 排查与解决：
  1. 检查Edit > Project Settings > Graphics，看看Scriptable Render Pipeline Settings是否挂载了正确的URP配置文件（如UniversalRP-HighQuality）。
  2. 确保场景中的灯光是URP兼容的（如Universal Additional Light Data组件）。

5.3 问题：效果在Game视图和Scene视图不一样

• 可能原因：Scene视图的渲染模式可能不是“Shaded”。或者Game视图的分辨率、后处理效果与Scene视图不同。
• 排查与解决：
  1. 在Scene视图左上角，确保渲染模式是Shaded。
  2. 检查Main Camera上是否有后处理（Post Processing）组件，确保其配置一致。
  3. 这是一个常见现象，通常以Game视图为准进行调试。可以在ShaderGraph中使用Preview窗口（主堆栈旁边的3D模型预览）作为主要参考，它更稳定。

5.4 问题：性能疑虑，节点连得太复杂会不会很卡？

• 分析与建议：
  • 单个Shader的复杂度：对于现代GPU，一个中等复杂度的ShaderGraph（几十个节点）在单个物体上的开销通常可以忽略不计。性能瓶颈更多出现在**Draw Call（绘制调用）和Overdraw（过度绘制）**上。
  • 优化技巧：
    1. 合并材质：尽可能让多个物体使用同一个材质实例，这是减少Draw Call最有效的手段。充分利用ShaderGraph的Property，通过材质实例化来调节差异。
    2. 简化计算：避免在片段着色器（Fragment）中进行非常复杂的循环或高开销数学运算（如pow,sin,noise）。考虑能否将部分计算移到顶点着色器（Vertex）中。
    3. 使用贴图代替实时计算：对于一些复杂的、静态的图案（如污渍、花纹），可以事先用绘图软件生成贴图，然后用Sample Texture 2D读取，这比实时用节点计算噪声和函数要高效得多。
    4. 利用LOD（细节层次）：为远处物体使用简化版本的Shader。

5.5 问题：想实现一个效果，但不知道用什么节点？

• 解决思路：
  1. 拆解效果：把最终效果拆解成一步步的数据处理过程。例如“边缘光” = “获取边缘信息” + “颜色与强度控制”。“获取边缘信息”又可以拆解为：利用Normal和View Direction做点积计算。
  2. 善用搜索：在ShaderGraph节点的创建菜单里，有一个搜索框。尝试用关键词搜索，比如“边缘”可能搜不到，但搜“Fresnel”（菲涅尔效应，常用于边缘光）或“Dot Product”（点积）就能找到相关节点。
  3. 参考官方示例与社区：Unity Asset Store里有大量免费的ShaderGraph示例包。在Package Manager中搜索“Shader Graph Samples”并导入，里面有很多现成的效果网络可供学习和拆解。