ShaderGraph节点解析(139):棋盘格节点（Checkerboard Node）详解

最新推荐文章于 2025-07-08 09:52:10 发布

小李也疯狂

最新推荐文章于 2025-07-08 09:52:10 发布

阅读量1k

点赞数 15

CC 4.0 BY-SA版权

分类专栏： # ShaderGraph节点详解-程序化篇文章标签： Unity ShaderGraph Checkerboard

本文链接：https://blog.youkuaiyun.com/qq_40882017/article/details/149099429

ShaderGraph节点详解-程序化篇专栏收录该内容

3 篇文章

订阅专栏

场景：为地面、桌面等材质添加棋盘格纹理，模拟瓷砖、布料的格子图案

4.2 UI 背景（棋盘格背景）

场景：为 UI 面板、图片框添加棋盘格背景，常用于设计工具、编辑界面（如图片透明区域的棋盘底纹）

4.3 地形与平面（网格纹理）

场景：为地形平面添加棋盘格纹理，辅助 3D 场景的比例判断（如用于调试网格对齐、碰撞体积）

4.4 遮罩与特效（棋盘格遮罩）

场景：用棋盘格作为遮罩，控制特效的显示区域（如部分区域显示粒子，部分区域隐藏）

一、节点功能概述

棋盘格节点（Checkerboard Node）是 Unity Shader Graph 中用于生成交替颜色棋盘格图案的核心工具。它基于输入的 UV 坐标，通过Frequency参数控制棋盘格的密度（频率越高，格子越密集），并将Color A和Color B两种颜色按规则交替排列，形成类似国际象棋棋盘的图案。该节点的核心优势在于：内置抗锯齿处理，通过计算屏幕空间导数动态调整边缘过渡，避免格子边缘出现硬边锯齿；支持自定义颜色和密度，适配从 UI 背景到材质纹理的多种场景。

二、端口详解

端口名称	方向	类型	描述
UV	输入	Vector 2	棋盘格的 UV 坐标（默认绑定主纹理 UV，范围通常为 [0,1]）
Color A	输入	Color RGB	棋盘格中第一种交替颜色（如黑色）
Color B	输入	Color RGB	棋盘格中第二种交替颜色（如白色）
Frequency	输入	Vector 2	棋盘格的频率（X/Y 轴分别控制水平 / 垂直方向的格子密度，值越大，格子越密集）
Out	输出	Color RGB	生成的棋盘格颜色（由 Color A 和 Color B 交替组成，边缘平滑过渡）

三、技术原理解析

3.1 核心逻辑与代码解析

棋盘格的生成核心是 “基于 UV 整数部分的奇偶判断”，并通过抗锯齿处理实现边缘平滑。生成代码的关键步骤解析如下：

hlsl

void Unity_Checkerboard_float(float2 UV, float3 ColorA, float3 ColorB, float2 Frequency, out float3 Out)
{
    // 1. UV预处理：偏移并按频率缩放（控制格子密度）
    UV = (UV.xy + 0.5) * Frequency;
    
    // 2. 计算UV的屏幕空间导数（用于抗锯齿，获取相邻像素的UV变化率）
    float4 derivatives = float4(ddx(UV), ddy(UV)); // ddx/ddy返回UV在x/y方向的导数
    float2 duv_length = sqrt(float2(dot(derivatives.xz, derivatives.xz), dot(derivatives.yw, derivatives.yw))); // 导数的模长（边缘过渡宽度）
    
    // 3. 计算棋盘格格子的边缘距离（用于抗锯齿）
    float width = 1.0; // 边缘基础宽度
    float2 distance3 = 4.0 * abs(frac(UV + 0.25) - 0.5) - width; // 归一化到格子边缘的距离（负为内部，正为边缘）
    
    // 4. 计算边缘过渡的缩放系数（基于导数动态调整，确保不同分辨率下边缘平滑）
    float2 scale = 0.35 / duv_length.xy; // 导数越大（格子越密集），缩放系数越小，过渡越窄
    float freqLimiter = sqrt(clamp(1.1f - max(duv_length.x, duv_length.y), 0.0, 1.0)); // 限制高频下的过渡强度，避免模糊
    
    // 5. 计算平滑的交替系数（alpha）
    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); // 基于x/y方向的因子乘积，得到0-1的交替系数
    
    // 6. 混合两种颜色（alpha=0→ColorA，alpha=1→ColorB）
    Out = lerp(ColorA, ColorB, alpha.xxx);
}

3.2 核心原理拆解

UV 缩放与偏移：
UV = (UV.xy + 0.5) * Frequency 用于控制棋盘格的密度和对齐 ——Frequency值越大，单位 UV 空间内的格子数量越多（密度越高）；+0.5确保格子中心与 UV 整数坐标对齐。
抗锯齿核心：
棋盘格的硬边（格子交界处）容易产生锯齿，节点通过以下步骤解决：
- 导数计算：ddx(UV)和ddy(UV)获取 UV 在屏幕空间的变化率（相邻像素的 UV 差值），用于判断边缘的 “锐利程度”；
- 距离归一化：distance3计算像素到格子边缘的归一化距离，负表示在格子内部，正表示在边缘；
- 动态过渡：scale根据导数调整过渡宽度（密度高的格子过渡更窄），vector_alpha将距离转换为 - 1 到 1 的平滑因子，最终通过alpha实现两种颜色的无缝混合。
颜色交替逻辑：
alpha的计算基于vector_alpha.x * vector_alpha.y—— 当 x 和 y 方向的因子同号（均为负或均为正）时，alpha接近 0 或 1，对应 Color A 或 Color B；边缘处因子异号，alpha在 0-1 之间，实现平滑过渡，最终形成交替的棋盘格图案。

3.3 视觉特性

密度控制：Frequency.x控制水平方向的格子数量（值越大，横向格子越密），Frequency.y控制垂直方向（值越大，纵向格子越密）；当Frequency.x = Frequency.y时，格子为正方形，否则为长方形。
抗锯齿效果：边缘过渡的平滑程度由屏幕分辨率和格子密度自动适配 —— 低密度（大格子）边缘过渡宽，高密度（小格子）过渡窄，始终保持清晰无锯齿。

四、应用场景与实战案例

4.1 纹理与材质（棋盘格纹理）

场景：为地面、桌面等材质添加棋盘格纹理，模拟瓷砖、布料的格子图案

需求：创建正方形棋盘格纹理，格子大小适中，颜色为黑白交替

实现步骤：

hlsl

// 输入UV（已绑定主纹理UV）
float2 uv = IN.uv_MainTex;

// 生成棋盘格（频率=5，即横向和纵向各5个格子）
float3 checker = CheckerboardNode.Out; // UV=uv, ColorA=float3(0,0,0), ColorB=float3(1,1,1), Frequency=float2(5,5)

// 应用到材质
o.Albedo = checker;

4.2 UI 背景（棋盘格背景）

场景：为 UI 面板、图片框添加棋盘格背景，常用于设计工具、编辑界面（如图片透明区域的棋盘底纹）

步骤：

hlsl

// UI的UV（范围[0,1]）
float2 uv = IN.uv;

// 生成细格子棋盘格（频率=20，浅色交替）
float3 uiChecker = CheckerboardNode.Out; // UV=uv, ColorA=float3(0.9,0.9,0.9), ColorB=float3(1,1,1), Frequency=float2(20,20)

// 应用到UI背景
o.Albedo = uiChecker;
o.Alpha = 1;

4.3 地形与平面（网格纹理）

场景：为地形平面添加棋盘格纹理，辅助 3D 场景的比例判断（如用于调试网格对齐、碰撞体积）

实现：

hlsl

// 基于世界空间XZ坐标生成UV（确保大尺度下格子比例一致）
float2 worldUV = IN.worldPos.xz * 0.1; // 缩放因子控制格子大小（0.1=10米/格）

// 生成棋盘格（频率=1，即1格/单位UV）
float3 terrainChecker = CheckerboardNode.Out; // UV=worldUV, ColorA=float3(0.2,0.2,0.2), ColorB=float3(0.8,0.8,0.8), Frequency=float2(1,1)

// 应用到地形
o.Albedo = terrainChecker;

4.4 遮罩与特效（棋盘格遮罩）

场景：用棋盘格作为遮罩，控制特效的显示区域（如部分区域显示粒子，部分区域隐藏）

示例：

hlsl

// 粒子系统的UV（范围[0,1]）
float2 particleUV = IN.uv * 10; // 缩放UV，使格子密集

// 生成棋盘格遮罩（ColorA=黑色=0，ColorB=白色=1）
float3 maskChecker = CheckerboardNode.Out; // UV=particleUV, ColorA=float3(0,0,0), ColorB=float3(1,1,1), Frequency=float2(8,8)

// 用遮罩控制粒子透明度（仅ColorB区域显示粒子）
float alpha = maskChecker.r; // 取红色通道作为遮罩值
o.Albedo = _ParticleColor;
o.Alpha = alpha;

五、使用技巧与注意事项

5.1 频率参数控制

正方形格子：设置Frequency.x = Frequency.y（如float2(5,5)），确保格子为正方形；
长方形格子：通过Frequency.x ≠ Frequency.y生成横向或纵向拉伸的格子（如float2(10,5)生成宽是高 2 倍的格子）；
格子大小计算：格子在世界空间的大小 = 1 / (Frequency * UV 缩放因子)，例如Frequency=5且 UV 未额外缩放时，每个格子大小为 0.2 单位（1/5）。

5.2 抗锯齿与性能

节点的抗锯齿逻辑依赖ddx和ddy函数（GPU 导数指令），性能开销低，适合大多数场景；
极端高频（如Frequency>100）可能导致边缘过渡过窄，视觉上接近硬边，此时可适当降低频率或接受轻微锯齿。

5.3 颜色选择建议

高对比度：用于强调格子边界（如黑白、红蓝），适合纹理和材质；
低对比度：用于 UI 背景（如浅灰和白色），避免视觉干扰；
透明效果：将Color A或Color B设置为半透明，可生成带透明区域的棋盘格（如ColorA=float3(0,0,0,0.5)）。

5.4 扩展技巧：动态动画

通过动画Frequency或 UV 偏移，可生成滚动的棋盘格效果：

hlsl

// 滚动的棋盘格（UV随时间偏移）
float2 animatedUV = IN.uv_MainTex + _Time.y * 0.1; // 水平滚动
float3 movingChecker = CheckerboardNode.Out; // UV=animatedUV, ColorA=float3(1,0,0), ColorB=float3(0,1,0), Frequency=float2(6,6)