1. 项目概述程序纹理的“无中生有”之道在Unity的Shader开发中纹理Texture是我们最常用的资源之一它定义了模型表面的颜色、凹凸、光泽等视觉细节。通常我们会从外部导入一张图片作为纹理。但你是否想过能否不依赖任何外部图片仅凭几行代码就在GPU中实时“画”出一张纹理这就是“程序纹理”Procedural Texture的魅力所在。它不像传统纹理那样占用显存而是通过数学函数和算法在着色器中动态生成图案。今天我们就来深入探讨如何在Unity Shader中实现一个简单但极具代表性的程序纹理——格子Checkerboard并以此为基础拆解其背后的核心原理、实现步骤以及那些新手极易踩坑的细节。对于技术美术、图形程序员乃至希望深入理解Shader机制的游戏开发者而言掌握程序纹理是进阶的必经之路。它不仅是优化资源包体、实现动态效果如随时间变化的腐蚀效果、可配置的科技网格的利器更是理解片元着色器Fragment Shader像素级操作逻辑的绝佳范例。通过亲手实现一个格子纹理你将深刻理解UV坐标、步进函数、取模运算等核心概念是如何协同工作最终在屏幕上呈现出规整图案的。接下来我将以一个从业者的视角带你从零开始一步步构建并优化这个经典的Shader案例。2. 核心原理与设计思路拆解2.1 程序纹理的本质用数学代替位图程序纹理的核心思想是用一个定义在二维空间通常是UV坐标系上的数学函数f(u, v)来直接计算每个像素点的颜色值而不是去采样一张预存的位图。这里的(u, v)就是纹理坐标范围通常在[0, 1]之间。对于格子纹理我们的目标函数非常简单当(u, v)落在某些特定区域时输出颜色A比如白色落在另一些区域时输出颜色B比如黑色。那么如何用数学来定义这种“格子”区域呢最直观的思路是将连续的UV空间“离散化”。想象一下我们把一张UV图一个从(0,0)到(1,1)的正方形划分成许多个大小相等的小方格比如10x10的网格。然后我们规定所有行号和列号之和为偶数的格子涂成白色和为奇数的涂成黑色。这样一个国际象棋棋盘般的格子图案就出现了。在Shader中实现这个逻辑我们需要几个关键步骤缩放UV通过将原始UV乘以一个缩放系数例如_Tiling来改变格子图案的密度。uv * _Tiling;意味着将UV空间“放大”原来(0,1)的范围现在可能只对应一个格子从而在视觉上让格子变得更密集。取整与取模这是生成离散网格的关键。对缩放后的UV坐标分别取其小数部分frac可以用于后续的渐变或平铺但更直接的方式是使用floor函数向下取整得到每个像素点所在的格子索引行号和列号。例如float2 cell floor(scaledUV);。奇偶判断得到格子索引(cell.x, cell.y)后判断其奇偶性。一个经典且高效的方法是float checker frac((cell.x cell.y) * 0.5) * 2.0;。这里(cell.x cell.y)是行列索引之和乘以0.5再取小数部分结果会在0和0.5之间交替。乘以2后结果就会在0和1之间交替正好对应两种颜色。输出颜色最后利用step函数或简单的条件判断将checker的值映射到两种颜色上。例如fixed3 col lerp(_ColorA, _ColorB, checker);。注意这里有一个非常重要的性能考量。在Shader中应尽量避免使用if-else分支语句因为GPU的并行架构对分支处理不友好可能导致性能下降。取而代之的是使用step,lerp(线性插值) 或smoothstep(平滑步进) 这类内置函数它们能在所有像素上无分支地执行相同的算术逻辑效率更高。这是我们实现程序纹理时的一个核心优化技巧。2.2 方案选型Surface Shader vs. Unlit Shader在Unity中编写Shader我们主要有几种模板可选Surface Shader表面着色器、Unlit Shader无光照着色器和Vertex/Fragment Shader顶点/片元着色器。对于程序纹理这种不依赖复杂光照模型、核心在于片元颜色计算的效果我强烈推荐从Unlit Shader开始。为什么选择Unlit Shader简洁透明Unlit Shader模板结构清晰直接暴露了顶点着色器vert和片元着色器frag的代码块。它移除了Surface Shader中用于处理光照、阴影的复杂封装让我们可以专注于最核心的纹理生成算法理解数据从顶点到片元的完整流动。学习价值高通过手写Unlit Shader你能更深刻地理解模型空间、世界空间、裁剪空间等坐标变换以及如何将纹理坐标UV从顶点传递到片元。这是图形学的基础。性能可控没有多余的光照计算Shader指令数Instruction Count更少运行效率更高。对于UI特效、背景图案等不需要真实光照的场景尤其合适。当然如果你希望生成的程序纹理能参与标准的光照计算例如让格子纹理影响漫反射和高光那么最终可以将其集成到Surface Shader的Albedo反照率或Emission自发光通道中。但作为入门和原理理解Unlit Shader是最佳起点。它就像一张白纸让我们可以毫无干扰地描绘程序纹理的数学之美。3. 核心细节解析与实操要点3.1 理解UV坐标一切图案的基石UV坐标是连接三维模型表面与二维纹理或程序算法的桥梁。在顶点着色器中我们通常从模型的顶点数据中读取TEXCOORD0第一套UV。对于简单的Quad面片或Plane平面其UV默认就是规整的从(0,0)到(1,1)的映射。但在复杂的模型上UV可能是扭曲、拉伸或重叠的这会导致程序纹理也发生相应的形变。一个关键细节UV的Wrap Mode循环模式。在导入外部纹理时我们可以在Inspector中设置Wrap Mode为Repeat重复或Clamp钳制。对于程序纹理我们通常在Shader代码中模拟“重复”行为。这就是为什么我们要对缩放后的UV使用frac函数。frac(scaledUV)会返回坐标的小数部分效果等同于将UV空间无限平铺。例如scaledUV为 (1.3, 2.7) 时frac后得到 (0.3, 0.7)。这确保了无论模型UV值多大我们的格子图案都能无缝重复。实操心得在编写Shader时我习惯将UV作为一个float2类型的变量在顶点和片元着色器之间传递。为了获得最好的灵活性我通常会暴露一个_UVScale或_Tiling和_UVOffset属性给材质面板。这样美术同学或策划可以直接在编辑器里调整格子的密度和位置而无需修改Shader代码。这在迭代游戏视觉效果时非常高效。// 在Properties块中定义 _Tiling (Tiling, Vector) (10, 10, 0, 0) _Offset (Offset, Vector) (0, 0, 0, 0) // 在片元着色器中计算 float2 uv i.uv * _Tiling.xy _Offset.xy; uv frac(uv); // 实现平铺3.2 奇偶判断的多种实现与性能对比前面提到了用(cell.x cell.y)之和的奇偶性来判断格子颜色。这是最经典的方法但并非唯一。我们来分析几种常见实现及其细微差别取模运算fmod法float checker fmod(cell.x cell.y, 2.0);这种方法最符合直觉。但需要注意的是fmod是浮点数取模运算在某些老旧的移动端GPU上可能比整数运算稍慢。不过在现代GPU上差异微乎其微。位与运算法// 先将索引转换为整数注意GLSL和HLSL/Cg中位操作对整数类型要求严格 int ix (int)cell.x; int iy (int)cell.y; float checker (ix 1) ^ (iy 1); // 使用异或当行列奇偶性相同时为0不同时为1这是效率极高的方法因为位运算是GPU的“原生语言”。但代码稍显复杂且需要处理数据类型转换。如果你追求极致的性能例如在移动端大量使用可以考虑这种方法。小数部分frac倍增法即之前介绍的方法float checker frac((cell.x cell.y) * 0.5) * 2.0;这个方法巧妙地利用了frac函数和乘法完全由算术运算构成没有分支也没有严格的类型要求兼容性好是平衡性能和代码简洁性的优秀选择。性能对比小结对于绝大多数情况方法3frac倍增法是首选。它足够快代码清晰且能稳定输出0或1的结果。方法2虽然最快但可读性稍差且需要确保传入的cell值是非负整数floor函数可以保证。在实际项目中除非经过性能分析证实此处是瓶颈否则建议优先考虑代码的清晰度和可维护性。3.3 从硬边缘到平滑过渡step与smoothstep的运用我们生成的格子纹理边缘是锐利、突变的。这是由step函数或简单的checker 0.5判断决定的。step(a, x)函数在x a时返回0否则返回1形成了一个硬边缘。但有时我们可能需要格子之间有平滑的过渡比如实现一种毛玻璃模糊边缘的格子或者用于生成某些渐变遮罩。这时smoothstep函数就派上用场了。smoothstep(min, max, x)函数在x处于[min, max]区间内时返回一个在0到1之间的平滑插值使用Hermite插值。我们可以利用它来软化格子边缘。实现思路我们不再简单地判断像素“属于”哪个格子而是计算像素到格子边界的“距离”。当距离小于某个阈值时进行颜色混合。// 假设每个格子的大小是1单位计算像素在当前格子内的局部坐标范围0~1 float2 localPos frac(scaledUV); // 计算到最近边界的距离四个方向 float distToEdge min(min(localPos.x, 1.0 - localPos.x), min(localPos.y, 1.0 - localPos.y)); // 定义过渡区域的宽度 float blurWidth 0.1; // 使用smoothstep生成平滑的边界因子 float edgeFactor smoothstep(0.0, blurWidth, distToEdge); // 混合两种颜色。注意此时checker需要是一个0~1的连续值而不是0或1。 // 我们可以用sin/cos函数生成一个连续的波或者直接用localPos的某种组合。 float wave sin(scaledUV.x * 3.14159) * sin(scaledUV.y * 3.14159); // 范围-1~1 wave wave * 0.5 0.5; // 映射到0~1 fixed3 col lerp(_ColorA, _ColorB, wave); // 应用平滑边缘 col lerp(_ColorBorder, col, edgeFactor); // _ColorBorder是边缘颜色这个例子生成了一个具有平滑过渡边缘的正弦波格子视觉效果更加柔和复杂。smoothstep是制作程序化渐变、软化边缘的利器值得深入掌握。4. 完整Shader实现与分步详解下面我将呈现一个完整的、功能丰富的Unlit Shader实现基础格子、颜色反转、中心对称以及平滑边缘等特性并逐段进行详细解释。4.1 Shader属性与变量声明首先我们在Shader的Properties块中定义所有可以在材质面板上调节的参数。Shader Unlit/ProceduralCheckerboard { Properties { // 基础颜色 _ColorA (Color A, Color) (1,1,1,1) // 白色 _ColorB (Color B, Color) (0,0,0,1) // 黑色 // 格子密度与偏移 _Tiling (Tiling, Vector) (10, 10, 0, 0) // xy分量控制U和V方向的重复次数 _Offset (Offset, Vector) (0, 0, 0, 0) // 控制图案整体偏移 // 边缘控制 _EdgeWidth (Edge Smoothness, Range(0, 0.5)) 0.05 // 平滑边缘的宽度 // 特效开关 [Toggle]_Invert (Invert Colors, Float) 0 // 颜色反转开关 [Toggle]_CenterSymmetry (Center Symmetry, Float) 0 // 中心对称开关 }参数详解_ColorA和_ColorB定义了格子的两种基础颜色。使用Color类型方便在面板上使用拾色器。_Tiling一个Vector但我们主要用其xy分量。_Tiling.x控制水平方向格子数量_Tiling.y控制垂直方向。值越大格子越密集。_Offset同样使用Vector的xy分量。用于平移整个图案在制作动画如滚动背景时非常有用。_EdgeWidthRange类型滑块限制在0到0.5之间。当值为0时边缘锐利值增大时边缘会产生平滑过渡。最大值0.5意味着过渡区域可能占据半个格子此时图案会变得非常模糊。[Toggle]这是一个属性绘制器Property Drawer它会在材质面板上生成一个复选框。_Invert为1时反转AB颜色_CenterSymmetry为1时启用中心对称模式。4.2 顶点与片元着色器结构接下来是SubShader和Pass块。我们使用最简单的Unlit结构确保在所有渲染管线中兼容性良好。SubShader { Tags { RenderTypeOpaque } LOD 100 Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #pragma shader_feature _INVERT_ON #pragma shader_feature _CENTERSYMMETRY_ON // 确保在片元着色器中进行纹理采样时支持线性插值 #pragma target 3.0 #include UnityCG.cginc // 声明与Properties对应的变量 fixed4 _ColorA; fixed4 _ColorB; float4 _Tiling; float4 _Offset; float _EdgeWidth; // 定义从顶点着色器传递给片元着色器的数据结构 struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; // 模型的第一套UV }; struct v2f { float2 uv : TEXCOORD0; float4 vertex : SV_POSITION; };关键点解析#pragma shader_feature _INVERT_ON这是一个编译指令。它告诉Unity根据材质面板上_Invert开关的状态编译两个不同版本的Shader。当开关打开时_INVERT_ON关键字被定义我们可以在代码中用#ifdef _INVERT_ON来编写反转颜色的逻辑。这样做的好处是关闭的功能完全不会产生任何运行时开销是Shader中实现功能开关的标准做法。appdata结构体定义了从模型网格输入到顶点着色器的数据。POSITION是顶点位置模型空间TEXCOORD0是第一套UV坐标。v2f结构体顶点着色器的输出也是片元着色器的输入。SV_POSITION是顶点在齐次裁剪空间中的位置这是必须的。uv是我们传递的纹理坐标。4.3 顶点着色器实现顶点着色器的任务相对固定将顶点位置从模型空间变换到裁剪空间并传递UV坐标。v2f vert (appdata v) { v2f o; o.vertex UnityObjectToClipPos(v.vertex); // 核心变换函数 o.uv v.uv; // 直接传递UV return o; }这里UnityObjectToClipPos是UnityCG.cginc内置的辅助函数它等价于mul(UNITY_MATRIX_MVP, v.vertex)在旧版Unity中它一次性完成了从模型空间到裁剪空间的变换经过模型、世界、视图、投影矩阵。这是每个顶点着色器的标准操作。4.4 片元着色器核心算法实现这里是所有魔法发生的地方。我们将逐步构建最终颜色。fixed4 frag (v2f i) : SV_Target { // 步骤1: 应用平铺和偏移 float2 scaledUV i.uv * _Tiling.xy _Offset.xy; // 步骤2: 计算格子索引 float2 cell floor(scaledUV); // 计算像素在当前格子内的局部位置 (范围 0~1) float2 localPos frac(scaledUV); // 步骤3: 奇偶判断 - 生成一个0或1的checker值 float checker frac((cell.x cell.y) * 0.5) * 2.0; // 步骤4: 处理中心对称如果启用 #ifdef _CENTERSYMMETRY_ON // 将局部坐标从(0~1)映射到(-0.5~0.5) float2 centeredLocalPos localPos - 0.5; // 计算到中心点的距离并取绝对值这样四个象限的图案就对称了 // 同时我们根据距离的奇偶性来生成新的checker模式 float2 symCell floor(abs(centeredLocalPos) * _Tiling.xy * 2.0); // 注意这里乘以2因为对称后频率加倍 checker frac((symCell.x symCell.y) * 0.5) * 2.0; #endif // 步骤5: 处理平滑边缘 float edgeFactor 1.0; // 默认边缘因子为1表示完全锐利 if (_EdgeWidth 0.0) { // 计算到当前格子四条边的最短距离 float distToEdgeX min(localPos.x, 1.0 - localPos.x); float distToEdgeY min(localPos.y, 1.0 - localPos.y); float distToEdge min(distToEdgeX, distToEdgeY); // 使用smoothstep创建平滑过渡。当distToEdge小于_EdgeWidth时edgeFactor从1平滑过渡到0。 // 这里用一个很小的值0.001作为下界避免除零错误。 edgeFactor smoothstep(0.0, _EdgeWidth, distToEdge / max(0.001, _EdgeWidth)); } // 步骤6: 基础颜色混合 fixed4 col lerp(_ColorA, _ColorB, checker); // 步骤7: 应用平滑边缘如果启用 if (_EdgeWidth 0.0) { // 假设边缘颜色是两种颜色的中间值也可以定义一个单独的边缘颜色属性 fixed4 edgeColor (_ColorA _ColorB) * 0.5; col lerp(edgeColor, col, edgeFactor); } // 步骤8: 颜色反转如果启用 #ifdef _INVERT_ON col.rgb 1.0 - col.rgb; #endif return col; } ENDCG } } FallBack Diffuse // 如果当前SubShader不支持则回退到漫反射Shader }分步详解平铺与偏移scaledUV i.uv * _Tiling.xy _Offset.xy;这是控制图案密度和位置的基础。_Tiling放大UV_Offset平移UV。离散化floor(scaledUV)获取当前像素所在的格子索引整数。frac(scaledUV)获取像素在格子内的相对位置用于后续的边缘计算。经典奇偶判断frac((cell.x cell.y) * 0.5) * 2.0是核心算法产生0和1交替的值。中心对称处理当启用_CENTERSYMMETRY_ON时我们先将局部坐标中心化到(-0.5, 0.5)然后取绝对值这样第一象限的图案就会对称地复制到其他三个象限。接着在新的对称UV空间上重新计算格子索引和奇偶值。注意_Tiling.xy * 2.0因为对称后视觉上的格子密度会翻倍所以需要补偿。平滑边缘计算计算localPos到格子四条边的最短距离distToEdge。使用smoothstep函数当距离小于_EdgeWidth时edgeFactor从1内部平滑过渡到0边缘。这个因子将用于混合内部颜色和边缘颜色。基础颜色混合使用lerp(线性插值) 函数根据checker值在_ColorA和_ColorB之间插值。lerp(a, b, t)当t0时返回at1时返回b。应用平滑边缘如果启用了平滑边缘我们计算一个中间色作为边缘颜色然后使用edgeFactor在边缘色和内部色col之间进行二次混合。edgeFactor为0时像素在边缘显示边缘色为1时像素在格子中心显示内部色。颜色反转如果启用了反转开关简单地将RGB通道用1.0去减即可得到反色效果。这个Shader已经具备了相当丰富的可调参数和功能你可以通过材质面板实时调整观察每一种变化。5. 常见问题、优化与扩展思路5.1 性能分析与优化建议程序纹理虽然省去了纹理采样Texture Fetch的开销但增加了片元着色器中的计算指令。对于这个格子Shader我们可以进行一些分析和优化指令数Instruction Count在Unity编辑器中你可以通过点击Shader Inspector底部的“Compile and show code”按钮查看编译后的汇编指令数。我们的Shader主要消耗在floor,frac,smoothstep等数学运算上。在移动平台如OpenGL ES 2.0上需要关注指令数是否超过限制。条件判断我们代码中有一个if (_EdgeWidth 0.0)。在Shader中静态分支基于Uniform常量的if的性能开销很小因为所有像素执行相同的路径。但如果是动态分支基于逐像素变化的变量的if性能代价会很高。我们的用法是安全的。优化技巧减少冗余计算如果_EdgeWidth为0我们完全不需要计算distToEdge和edgeFactor。这正是我们用if包裹的原因这是一种优化。使用更廉价的函数在不需要平滑过渡时用step代替smoothstep。step的指令数更少。向量化操作GPU擅长并行处理向量。例如float2 distToEdge min(localPos, 1.0 - localPos); float minDist min(distToEdge.x, distToEdge.y);可以稍微优化但编译器通常已经做得很好。实测建议将这个Shader应用在一个覆盖全屏的Quad上在目标平台如Android手机上使用Unity Profiler或内置的GPU Profiler查看其渲染耗时。对于简单的格子性能开销通常可以忽略不计。但如果在一个复杂的场景中对成千上万个物体使用非常复杂的程序纹理则需要进行细致的性能剖析。5.2 常见问题与排查图案扭曲或拉伸问题描述将Shader应用在一个非正方形的模型如长方形平面或复杂模型上时格子变成了长方形。原因分析这是因为我们使用_Tiling.xy对UV的x和y分量进行了非均匀缩放。如果模型的UV本身不是正方形映射或者_Tiling.x不等于_Tiling.y就会导致拉伸。解决方案如果希望格子始终是正方形可以只使用一个_Tiling浮点数或者强制_Tiling.y _Tiling.x。如果希望格子适应模型形状可以计算UV的宽高比进行补偿float aspect _ScreenParams.x / _ScreenParams.y;(屏幕空间) 或从模型顶点数据中计算。使用模型的世界空间XZ坐标代替UV来生成纹理这样可以获得与世界坐标对齐的、不受模型UV影响的图案float2 worldUV i.worldPos.xz;需要在顶点着色器中计算并传递世界坐标。边缘闪烁Z-fighting或接缝问题问题描述在格子边缘特别是当相机移动时有时会出现闪烁或细微的接缝。原因分析这通常是由于浮点数精度问题引起的。floor和frac函数在边界值如恰好为1.0时不同GPU或不同片元间可能产生极其微小的差异导致checker值在0和1之间跳变。解决方案在计算scaledUV后添加一个极小的偏移量epsilon将边界情况“推”到安全的一侧。float2 scaledUV i.uv * _Tiling.xy _Offset.xy; scaledUV 1e-5; // 一个非常小的偏移这个技巧在程序化噪声Noise生成中也非常常见。在移动设备上显示为粉色Missing Shader问题描述在PC上运行正常发布到Android/iOS后模型显示为粉色。原因分析Shader使用了目标设备不支持的语法或特性。例如我们的Shader开头有#pragma target 3.0这需要Shader Model 3.0支持。一些非常老的移动设备可能只支持Shader Model 2.0。解决方案尝试将#pragma target 3.0改为#pragma target 2.0但注意smoothstep等函数在2.0中可能支持不佳。使用CGINCLUDE或编写多个SubShader为不同性能等级的GPU提供降级方案Fallback。我们的FallBack Diffuse就是一种最终降级。在Player Settings中检查Graphics APIs和Shader兼容性级别。5.3 扩展思路让程序纹理动起来静态的格子只是开始。程序纹理的强大之处在于它可以随时间、空间或其他参数动态变化。这里提供几个扩展方向动态滚动 要让格子滚动起来只需在每一帧修改_Offset。可以在Shader中通过_Time变量来实现。// 在片元着色器开头 float2 scrolledOffset _Offset.xy float2(_Time.y * _ScrollSpeedX, _Time.y * _ScrollSpeedY); float2 scaledUV i.uv * _Tiling.xy scrolledOffset;其中_ScrollSpeedX和_ScrollSpeedY是新增的属性控制滚动速度。_Time.y是自游戏开始以来的时间秒。基于距离的密度变化 实现一种“透视感”让离相机越远的地方格子越密集。// 在顶点着色器中计算顶点到相机的距离或深度并传递给片元着色器 // 在片元着色器中 float adaptiveTiling _TilingBase * (1.0 i.depth * _TilingScale); float2 scaledUV i.uv * adaptiveTiling _Offset.xy;这需要将深度信息从顶点着色器传递到片元着色器并进行插值。生成更多图案 格子只是二维程序纹理的冰山一角。你可以修改奇偶判断的逻辑生成更多图案条纹只对cell.x或cell.y进行奇偶判断。圆点计算localPos到格子中心(0.5, 0.5)的距离用step或smoothstep判断是否小于一个半径。波浪/正弦纹理直接使用sin(scaledUV.x * _Frequency) * cos(scaledUV.y * _Frequency)作为颜色因子。程序纹理的世界充满了可能性。从简单的格子出发理解其背后的数学和Shader编程思想你就能创造出无限丰富的动态视觉效果。它不仅是节省资源的手段更是表达创意、实现独特艺术风格的重要工具。在实际项目中我经常将程序纹理用于生成科技感的HUD背景、动态的地面污渍、风格化的水面波纹等其灵活性和性能优势是传统位图纹理难以比拟的。