1.2 从零创建第一个 Unlit 图

1.2 从零创建第一个 Unlit 图

本节摘要：本节完整走一遍"新建 Unlit 图、连出纯色、升级为渐变、保存、创建材质、赋给物体"的操作链。六个步骤全程无需写代码，做完你手里就有第一个能运行的着色器，并且理解每一步在渲染里对应发生了什么。

动手之前

环境确认过了，现在解决一个朴素的问题：屏幕上那个立方体的颜色，到底是谁决定的？答案是被渲染管线调用的着色器程序，而 Shader Graph 就是用来"画"出这个程序的工具。这一节我们不解释任何原理，先照着清单把图建出来——原理留到 1.3 和 1.4，用你已经做出来的东西去对照着理解，效率高得多。

全程只需要一个 URP 项目和场景里随便一个物体（新建项目的 SampleScene 里自带的立方体就行）。

第一步：创建资产

在项目窗口的空白处右键，选择"创建"→"着色器图形"下的"Unlit 图"（不同版本菜单文字略有差异，2021 之后叫 URP 下的 Unlit Shader Graph，旧一点的可能直接叫 Unlit Shader）。给资产起名，比如 FirstUnlit——注意不要用空格开头、不要带中文引号之类的特殊符号，虽然 Unity 能容忍，但跨平台构建时偶尔会咬人。

双击这个资产，Shader Graph 编辑器窗口打开。你会看到两块主要区域：中间大片空白的"画布"（视区），以及左侧的 Blackboard 面板和右侧的主栈（Master Stack）面板。如果主栈面板是空的，点右上角的"+"号，添加一个"片元"（Fragment）块——这就是我们接下来要连线的地方。

第二步：连出纯色

先做最简单的：让立方体变成红色。在主栈的 Fragment 块里找到 Base Color 输入端口，它旁边有个小圆点。点击画布空白处按住右键，弹出节点搜索框，输入 Color 回车，画布上出现一个 Color 节点，它有一个默认值输入端口和一个输出端口。用鼠标从 Color 节点的输出端口拖一根线到 Base Color 端口上松手，连线完成。

把 Color 节点默认值的色块点开，改成纯红色。然后按编辑器左上角的"保存资产"按钮。这一步很重要：Shader Graph 是"保存时编译"，不保存，场景里不会有任何变化。回到场景窗口，给立方体创建一个材质（右键这个图资产→"创建"→"材质"，或直接在物体上拖），你会看到立方体变成纯红。

第三步：升级为渐变

纯色连一次线就完成，但纯色看不出"图"和"材质默认值"的区别。我们把颜色变成沿屏幕上下渐变：删除原连线（点端口上的线再按 Delete），右键搜索 UV，加一个 UV 节点；再搜 Split，把 UV 的输出接进 Split；Split 有四个输出 R、G、B、A，把 G 输出接到 Fragment 块新增的输入上——更直接的做法是右键 Fragment 块的 Base Color 端口选"转换为属性"附近的选项不行，我们用另一条路：添加一个 Vector3 节点不行——正确的最短路径是：UV 的 G 通道是一个零到一的数，直接连到 Base Color 会报类型错误（颜色是四维向量），所以中间加一个 Lerp 节点：A 输入接深蓝，B 输入接浅黄，T 输入接 UV 拆出的 G。保存，物体表面就出现了从底到顶的渐变。

图：第一个渐变 Unlit 图的节点布局

第四步：创建材质并上墙

保存后在项目窗口选中图资产，检查器底部有"为此着色器创建材质"之类的快捷入口（没有就右键→创建→材质，把材质的着色器字段确认是刚才那张图）。把材质拖到场景里的立方体上。到这一步，操作链闭合：图 → 编译 → 材质 → 物体表面。

第五步：看懂预览与统计

编辑器窗口左下的图形检查器（Graph Inspector）里有两个标签页：预览（Preview）显示一个内置的球体模型，用的是你当前图的效果；统计（Stats）显示顶点数、像素数这些参考值。现在打开预览，把 Lerp 的 T 输入临时断开直接接一个 Vector1 的常数 0.5，预览球变成上下均匀的中间色——这就是"逐像素执行"的直观证据：每个像素各自算了一遍 T 值。

常见的第一图翻车点

⚠️ 三个高频问题：物体变洋红说明材质指向的图编译报错，回编辑器看检查器窗口的红色报错行；连线是红的说明端口类型不匹配，编译器能自动转一部分，但 Vector1 连 Vector4 这类大跨度转换建议手动插 Split 或 Combine；改了颜色场景没反应，九成是忘了点保存。

到这里你已经有完整的操作肌肉记忆了：建资产、拖节点、连线、保存、上材质。下一节我们把镜头拉近，看清这根连线两端的数据到底是什么——顶点与片元两条流水线的分工，正是所有进阶效果的底层地图。

问题：预览球的颜色和场景里的不一样，是图有错吗？

多数情况不是。预览球用的是中性光照环境，场景里的颜色要经过光源颜色、环境光、后处理三道工序。判断方法：把物体拖到一个空场景（只有默认光源）再看，如果两边一致，说明图没问题，差异来自场景配置。这个判断值得记住——"预览与场景不一致"是排查颜色问题时第一个要排除的干扰项。

保存与编译缓存的行为

保存触发的编译有缓存机制：没改动的部分不会重编，改动越大等待越久。图变复杂后（几十个节点）保存会有可感知的停顿，属于正常现象；但如果保存超过十秒，通常意味着图里有关键字组合在爆炸（7.3 节的话题），提前留个心眼。另一个习惯：频繁小改动时不必每次全保存，用编辑器的自动保存图设置（图形设置面板里可以开启）减少手动点按。

给操作链加一道验收

六个步骤每步都有验收标准，合起来就是一条可以自查的链：建资产后双击能打开编辑器；加块后主栈面板出现 Fragment 条目；连线后端口间有实线而非红色虚线；保存后检查器无红色报错；建材质后材质检查器的着色器字段指向你的图；赋物体后 Scene 视图立即变色。哪一步的验收不过，问题就固定在哪一步——这条链练熟之后，任何复杂图的开发过程都只是它的放大版。

一个容易忽略的细节

图资产改名后，引用它的材质不会自动更新指向（材质记录的是着色器引用）。所以项目定型后尽量避免给图改名；确实要改名，先在材质检查器里确认引用是否还活着。这个小坑在多人项目里出现频率不低，两名新人各建各的图再互相改名，一晚上能造出一片洋红。

本节要点回顾

• 保存即编译：Shader Graph 只在保存资产时重新生成着色器，改完必须保存。
• 数据流向右：连线永远从输出端口到输入端口，终点是主栈块。
• 类型要匹配：颜色是四维向量，标量不能直接连颜色端口，注意端口颜色提示。
• 预览即验证：图形检查器的预览球是最低成本的验证工具，先看预览再上场景。