【节点】[Checkerboard节点]原理解析与实际应用

【Unity Shader Graph 使用与特效实现】专栏-直达

Checkerboard 节点是 Unity URP Shader Graph 中一个功能强大的纹理生成工具，它能够根据输入的 UV 坐标动态创建由两种颜色交替组成的棋盘格图案。这个节点不仅提供了基础的棋盘格生成功能，还包含了抗锯齿处理机制，确保在不同分辨率和视角下都能保持图案的清晰度。在游戏开发中，Checkerboard 节点常用于创建测试材质、程序化纹理、视觉特效以及各种风格化的表面效果。

与传统的贴图采样方式不同，Checkerboard 节点通过数学计算实时生成图案，这意味着它不依赖外部纹理资源，能够有效减少内存占用和加载时间。同时，由于是程序化生成，棋盘格的尺寸、颜色和密度都可以通过参数实时调整，为着色器创作提供了极大的灵活性。

描述

Checkerboard 节点的核心功能是基于输入的 UV 坐标系统，生成一个规则的黑白或彩色棋盘格图案。该图案由两种用户定义的颜色（Color A 和 Color B）在二维空间中间隔排列组成，形成类似国际象棋棋盘的视觉效果。通过调整频率参数，用户可以控制棋盘格在 U 和 V 方向上的密度，从而创建从细密到粗犷的各种比例图案。

该节点的算法实现考虑了实时渲染中的常见问题，特别是边缘锯齿现象。内置的抗锯齿处理通过在颜色交界处进行平滑过渡，有效减少了在相机移动或表面倾斜时出现的闪烁和锯齿瑕疵。这种处理使得生成的棋盘格在各种观看条件下都能保持视觉上的舒适度。

在技术实现上，节点首先将输入的 UV 坐标乘以频率值进行缩放，然后通过分数函数和绝对值函数计算每个片元在棋盘格中的相对位置，最后根据位置阈值决定使用哪种颜色。抗锯齿部分则通过计算 UV 坐标的导数来估算屏幕空间的图案密度，并在边缘区域进行颜色插值。

端口

Checkerboard 节点提供了多个输入和输出端口，让用户能够精确控制生成的棋盘格图案的各个方面。理解每个端口的功能和适用场景对于有效使用该节点至关重要。

输入端口

UV：Vector 2 类型的输入端口，通常连接到 UV 节点或其他提供纹理坐标的节点。这个端口定义了棋盘格图案在模型表面的映射方式。默认情况下，如果未连接任何输入，节点会使用模型的基础 UV 坐标。通过修改这个端口的输入，可以实现棋盘格图案的平移、旋转和缩放等变换效果。
Color A：颜色 RGB 类型的输入端口，用于定义棋盘格的第一个颜色。这个颜色通常被视为棋盘格的基础色或主色。用户可以直接通过颜色选择器指定颜色，也可以连接其他节点（如颜色节点或采样纹理节点）来动态控制这个颜色值。在黑白棋盘格中，这通常是白色；在彩色棋盘格中，可以是任何需要的颜色。
Color B：颜色 RGB 类型的输入端口，用于定义棋盘格的第二个颜色。这个颜色与 Color A 交替出现，形成对比。通过调整 Color A 和 Color B 之间的对比度，可以创建从微妙到强烈的各种视觉效果。两个颜色的组合决定了棋盘格的整体色彩风格和视觉冲击力。
Frequency：Vector 2 类型的输入端口，用于控制棋盘格在 U 和 V 方向上的重复频率。较高的值会产生更小、更密集的棋盘格，而较低的值会产生更大、更稀疏的棋盘格。这个参数对于控制棋盘格的视觉比例至关重要，特别是在不同尺寸的模型表面上保持图案一致性时。X 分量控制水平方向的频率，Y 分量控制垂直方向的频率。

输出端口

Out：Vector 2 类型的输出端口，提供生成的棋盘格图案。这个输出可以连接到主着色器的各种输入，如表面颜色、发射颜色或高度图等，具体取决于用户希望棋盘格影响材质的哪个方面。输出值的范围取决于输入的颜色值，通常是 RGB 颜色空间中的颜色向量。

理解这些端口之间的相互作用是掌握 Checkerboard 节点的关键。例如，通过将 Time 节点连接到 Frequency 端口，可以创建动态变化的棋盘格图案；通过将 Normal 向量连接到 Color 端口，可以创建基于表面方向的颜色变化效果。这种灵活性使得 Checkerboard 节点不仅是纹理生成工具，更是复杂着色器网络中的构建模块。

生成的代码示例

Checkerboard 节点在背后生成的着色器代码揭示了其内部工作原理和算法实现。通过分析这段代码，我们可以更深入地理解节点是如何将输入参数转换为视觉图案的，以及它是如何处理抗锯齿等高级特性的。

ini 复制代码

void Unity_Checkerboard_float(float2 UV, float3 ColorA, float3 ColorB, float2 Frequency, out float3 Out)
{
    UV = (UV.xy + 0.5) * Frequency;
    float4 derivatives = float4(ddx(UV), ddy(UV));
    float2 duv_length = sqrt(float2(dot(derivatives.xz, derivatives.xz), dot(derivatives.yw, derivatives.yw)));
    float width = 1.0;
    float2 distance3 = 4.0 * abs(frac(UV + 0.25) - 0.5) - width;
    float2 scale = 0.35 / duv_length.xy;
    float freqLimiter = sqrt(clamp(1.1f - max(duv_length.x, duv_length.y), 0.0, 1.0));
    float2 vector_alpha = clamp(distance3 * scale.xy, -1.0, 1.0);
    float alpha = saturate(0.5f + 0.5f * vector_alpha.x * vector_alpha.y * freqLimiter);
    Out = lerp(ColorA, ColorB, alpha.xxx);
}

这段代码可以分为几个关键部分，每部分都承担着特定的计算任务：

UV 变换：代码首先对输入的 UV 坐标进行变换，通过加上 0.5 并乘以频率值，将原始 UV 坐标转换为适合棋盘格生成的坐标系。这个步骤确保了棋盘格图案能够正确响应频率参数的变化，并在模型表面上以期望的密度重复。
导数计算：通过 ddx 和 ddy 函数计算 UV 坐标在屏幕空间中的偏导数。这些导数反映了 UV 坐标在像素之间的变化率，是后续抗锯齿计算的基础。导数的大小与表面在屏幕上的投影尺寸相关，当表面倾斜或远离相机时，导数会增大。
距离计算：通过一系列数学运算（frac、abs、减法等）计算当前片元到棋盘格图案中颜色区域边界的距离。这个距离值决定了该片元应该更接近 Color A 还是 Color B，以及在不同颜色区域之间的过渡方式。
抗锯齿处理：基于前面计算的导数和距离值，代码计算出抗锯齿所需的缩放因子和频率限制器。这些参数确保了当棋盘格图案在屏幕空间中变得过于密集时（即单个棋盘格小于像素尺寸时），颜色之间会有平滑的过渡而不是生硬的边界，从而避免产生闪烁和摩尔纹等视觉瑕疵。
颜色插值：最后，通过 lerp（线性插值）函数根据计算出的 alpha 值在 Color A 和 Color B 之间进行混合。alpha 值为 0 时完全使用 Color A，为 1 时完全使用 Color B，中间值则在两种颜色之间创建平滑过渡，实现抗锯齿效果。

理解这段生成的代码不仅有助于更有效地使用 Checkerboard 节点，还能为自定义着色器编写提供有价值的参考。特别是其中的抗锯齿技术，可以应用到其他程序化图案的生成中，提升着色器的整体视觉质量。

使用示例与技巧

Checkerboard 节点在实际项目中有多种应用方式，从简单的测试材质到复杂的视觉效果都能发挥重要作用。以下是一些典型的使用示例和实用技巧，展示了如何充分发挥这个节点的潜力。

基础棋盘格材质创建

创建基础的棋盘格材质是最直接的应用场景。只需将 Checkerboard 节点连接到主着色器的 Albedo 输入，即可为模型添加棋盘格图案。通过调整 Color A 和 Color B，可以创建不同风格的棋盘格，如经典的黑白配

【Unity Shader Graph 使用与特效实现】专栏-直达 （欢迎点赞留言探讨，更多人加入进来能更加完善这个探索的过程，🙏）