企业官网建设流程全解析

1. 项目概述：为什么乘法节点是ShaderGraph的“瑞士军刀”？

如果你在Unity ShaderGraph里只让我选一个节点，那我大概率会选乘法节点（Multiply Node）。这听起来可能有点夸张，毕竟ShaderGraph里节点那么多，但听我解释完你就明白了。乘法节点远不止是做数学上的“乘”这么简单，它在图形学里扮演的角色，更像是一把“瑞士军刀”——功能看似单一，但通过不同的组合和用法，能解决渲染管线中超过一半的常见需求。从最基础的亮度调节、颜色混合，到复杂的UV动画、遮罩处理，再到顶点动画和光照计算，乘法节点的身影无处不在。

很多刚接触ShaderGraph的朋友，容易把它和加法节点（Add Node）搞混，或者觉得它太基础而忽视。实际上，理解乘法节点的本质，是理解Shader中“调制”（Modulation）这一核心概念的关键。所谓“调制”，就是用一个值去控制、影响另一个值。在视觉上，这通常表现为“变暗”、“变亮”、“混合”、“过滤”或“缩放”。乘法，正是实现“调制”最直接、最高效的数学工具。这篇文章，我们就来彻底拆解这个看似简单、实则强大的节点，我会结合大量实际项目中的案例，告诉你它到底能做什么，以及如何避开那些新手常踩的坑。

2. 乘法节点的核心原理与类型匹配

2.1 数学本质：不止于数字相乘

在ShaderGraph中，乘法节点的图标是一个“×”号，它接受两个输入（A和B），输出它们的乘积。但这里的“乘”是广义的，根据输入数据类型的不同，其背后的数学运算和图形学意义也截然不同。官方文档将其分为三种情况，我们逐一深入解读。

1. 标量（Float）乘法：最直观的“强度控制器”当A和B都是单个浮点数（Float）时，这就是最普通的乘法。在Shader中，浮点数常常代表一个强度值、一个系数或一个权重。

• 核心用途：缩放。比如，你有一个噪声纹理采样出来的值（范围0-1），想控制它的强度，就乘以一个0.5，让它效果减半。
• 图形学意义：线性缩放。输出值与输入值成严格的线性比例关系。这是所有调制操作的基础。

2. 矢量（Vector）乘法：逐通道的“调色盘”当A和B都是矢量（如Float2, Float3, Float4）时，乘法是逐通道（Component-wise）进行的。这是最常用、也最容易产生误解的情况。

• 运算规则：Out.r = A.r * B.r,Out.g = A.g * B.g,Out.b = A.b * B.b,Out.a = A.a * B.a。每个颜色通道独立相乘。
• 核心用途：颜色调制、UV偏移缩放。例如，用一个RGB颜色（比如(0.5, 1.0, 0.2)）去乘另一个颜色，结果是分别调整了R、G、B通道的亮度。用Float2 (2.0, 1.0) 去乘UV坐标，就是在U（水平）方向上将纹理拉伸为原来的2倍，而V（垂直）方向不变。
• 重要区别：这不是点乘（Dot Product）或叉乘（Cross Product）。点乘的结果是一个标量，用于计算夹角、投影等；叉乘的结果是一个矢量，用于计算法线、旋转等。ShaderGraph有独立的节点（Dot Product, Cross Product）来处理它们。乘法节点的矢量乘法，就是最朴素的逐通道相乘。

3. 矩阵（Matrix）乘法：空间变换的“引擎”当输入涉及矩阵时，乘法节点执行的是线性代数中的矩阵乘法。这在处理骨骼动画、坐标空间变换（如从模型空间到世界空间）时至关重要。

• 矢量 × 矩阵：通常用于将点或矢量从一个空间变换到另一个空间。例如，将模型空间下的顶点位置（Float3）乘以模型-世界变换矩阵（float4x4），得到世界空间的位置。注意，这里为了满足矩阵乘法规则，Shader内部可能会将Float3补全为Float4 (x, y, z, w)，对于点，w=1；对于方向矢量，w=0。
• 矩阵 × 矩阵：用于组合多个变换。例如，将缩放矩阵、旋转矩阵、平移矩阵依次相乘，得到一个完整的模型变换矩阵。矩阵乘法的顺序是固定的（从左到右），且不满足交换律（A×B ≠ B×A），这一点在操作时必须牢记。

注意：ShaderGraph的节点是动态类型的。当你连接一个纹理采样节点的RGBA输出（Float4）到A端口，再连接一个浮点滑块（Float）到B端口时，ShaderGraph会自动进行广播（Broadcasting）：将那个Float值复制成一个Float4 (float, float, float, float)，然后再与A进行逐通道相乘。这非常方便，也是实现全局亮度/强度控制的关键。

2.2 动态类型系统与广播机制详解

ShaderGraph的“Dynamic”类型是它强大易用性的来源之一，但也带来了隐蔽的坑。乘法节点的输入输出端口类型都是“Dynamic”，意味着它能根据连线自动推断类型。

广播机制的工作流程：

1. 连接第一个输入：假设你将一个Texture2D节点的RGBA输出（Float4）连接到端口A。
2. 连接第二个输入：然后你将一个Float类型的Slider节点输出连接到端口B。
3. 自动推断与广播：ShaderGraph检测到类型不匹配（Float4 vs Float）。它会将Float类型的B“广播”为一个Float4，即(B, B, B, B)。
4. 执行运算：最终执行的是Float4(A) * Float4(B, B, B, B)，结果是每个通道都乘以了同一个标量值。

这个机制带来的便利与风险：

• 便利：无需手动使用Combine节点将Float打包成Vector，简化了图结构。比如用单个Float控制整体颜色亮度或纹理平铺次数。
• 风险：有时你不想要广播。例如，你有一个Float3的法线数据和一个Float3的色调调整颜色，你想让它们逐通道相乘来微调法线贴图的影响。如果你不小心接入了一个Float，广播机制会生效，但结果可能完全错误。你需要时刻留意节点右上角的预览小圆球显示的数据类型。

实操心得：我习惯在完成一个复杂功能模块后，逐个检查关键乘法节点的预览类型。右键点击节点，选择“Preview Node”，看看输入输出的值是否符合预期。对于矩阵运算，更要谨慎，因为预览可能不直观，最好通过一个简单的Position节点输出到片元着色器，用颜色可视化来检查变换结果是否正确。

3. 乘法节点的核心应用场景与实战解析

理解了原理，我们来看看乘法节点在实战中如何大显身手。我会按照从易到难的顺序，结合具体案例和节点图片段来说明。

3.1 基础应用：颜色与强度的调制

这是乘法节点最直白的用法，也是使用频率最高的场景。

场景一：控制纹理亮度与色调假设你有一张漫反射贴图（Diffuse Map），想根据游戏中的时间（白天/黑夜）动态调整它的亮度。

1. 采样纹理，得到颜色Color_Texture(Float4)。
2. 创建一个Time节点或通过脚本驱动一个Float参数Brightness，范围可以设为0.5（夜晚）到1.5（正午）。
3. 将两者接入乘法节点。Brightness为1时，颜色不变；小于1变暗；大于1变亮（注意可能超过1，导致过曝，需要根据情况使用Clamp节点限制）。
4. 进阶技巧：如果你不想整体变亮，而是想模拟暖色调的黄昏，可以创建一个Float3参数TintColor，例如(1.2, 0.9, 0.7)。用这个颜色矢量与纹理颜色进行逐通道乘法。这样会增强R通道，减弱G和B通道，整体呈现出暖黄色调。

场景二：混合纹理与细节叠加你想在墙壁的基底纹理上叠加一些污渍或水渍细节。

1. 有两张纹理：Base_Color（基底）和Detail_Color（细节，如污渍，黑色部分应为透明或极暗）。
2. 直接相乘：Result = Base_Color * Detail_Color。
3. 原理：在Detail_Color中，白色（1,1,1）部分会让Base_Color完全保留，黑色（0,0,0）部分会让Base_Color完全变黑，灰色部分则按比例变暗。这实现了非破坏性的细节叠加，比用Lerp节点混合更自然，因为它保留了基底纹理的明暗关系。
4. 注意事项：这种乘法混合模式（Multiply Blend Mode）在Photoshop里也很常见。它不适合用于叠加比基底更亮的细节（如高光），那通常需要使用加法（Add）或屏幕（Screen）混合模式。

3.2 核心应用：UV动画与变换

UV坐标本质上是Float2的矢量，因此乘法节点可以对它进行缩放，这是实现纹理流动、旋转（结合其他节点）的基础。

场景一：纹理平铺（Tiling）让一张纹理在模型表面重复多次。

1. 获取UV坐标（通过UV节点）。
2. 创建一个Float2常量，例如(3, 3)。
3. 将UV与该常量相乘：Tiled_UV = UV * float2(3, 3)。
4. 结果：原来在[0,1]区间的UV被放大到[0,3]区间，相当于纹理在U和V方向上都重复了3次。
5. 常见问题：直接相乘会导致纹理在整数边界处可能产生接缝（取决于纹理的Wrap Mode）。更专业的做法是使用Tiling And Offset节点，或者在乘法后使用Fraction节点只取小数部分，确保UV始终在[0,1)循环。

场景二：简单的滚动动画实现一个水面纹理的横向滚动。

1. 获取UV。
2. 创建一个基于时间的偏移量：Time * Speed，其中Speed是一个Float控制滚动速度。
3. 将这个偏移量与一个方向矢量相乘：Offset = Time * Speed * float2(1, 0)。这样就得到了一个始终指向U轴正方向的偏移矢量。
4. 将偏移量与UV相加？等等，这里为什么用加法？因为滚动是“平移”，不是缩放。这里是个关键点：乘法节点用于确定滚动的“速率”和“方向”，而实际的位移是通过加法节点与UV相加完成的。Scrolling_UV = UV + (Time * Speed * Direction)。乘法节点在这里的作用是生成了那个动态的偏移矢量。

3.3 高级应用：遮罩（Mask）与数据通道分离

这是体现乘法节点“调制”精髓的高级用法。遮罩通常是一张灰度图（单通道）或RGBA图中的某个通道，其值在0到1之间。用遮罩去乘某个属性，可以实现局部控制。

场景一：顶点动画局部化你想让旗帜的飘动只发生在旗帜的下半部分。

1. 创建一个顶点偏移量VertexOffset（基于正弦波和时间的复杂计算，输出Float3）。
2. 创建一个遮罩。简单的方法是用模型空间的Y坐标（通过Position节点获取）经过Remap和Clamp处理，生成一个从顶部（Y值大）为0到底部（Y值小）为1的渐变遮罩Mask（Float）。
3. 将VertexOffset与Mask相乘：FinalOffset = VertexOffset * Mask。
4. 结果：旗帜顶部（Mask≈0）偏移几乎为0，固定不动；底部（Mask≈1）偏移完全生效，飘动幅度最大；中间部分平滑过渡。乘法节点在这里完美地将全局的动画效果“约束”在了局部区域。

场景二：混合两种材质属性你想让物体的上半部分是金属，下半部分是布料。

1. 准备两套材质属性：Metallic_A,Smoothness_A和Metallic_B,Smoothness_B。
2. 使用同一张基于世界空间或模型空间坐标生成的渐变遮罩Mask。
3. 混合计算：FinalMetallic = Metallic_A * Mask + Metallic_B * (1 - Mask)。看，这里乘法节点和加法节点一起工作。乘法节点用于将每种属性用遮罩进行“加权”，加法节点再将两者合并。这是Lerp（线性插值）节点的底层实现原理之一。理解这一点，你就能自己构建更复杂的混合逻辑。

场景三：利用纹理的Alpha通道很多纹理的Alpha通道储存了额外信息，如透明度、自发光强度、粗糙度等。

1. 采样一张纹理，分离其RGBA通道。
2. 用RGB通道作为颜色。
3. 用A（Alpha）通道作为一个Float，与自发光强度（Emission Strength）参数相乘：FinalEmission = EmissionColor * (BaseColor_RGB * Alpha_Channel)。
4. 这样，纹理中Alpha越白（值越接近1）的地方，自发光越强；越黑的地方，自发光越弱。乘法节点精准地实现了基于纹理的强度控制。

4. 性能考量与最佳实践

在Shader中，乘法运算本身是极其高效的，几乎在所有GPU上都是单周期指令。性能问题的关键不在于使用乘法节点本身，而在于如何高效、合理地组织Shader图，避免不必要的计算和纹理采样。

1. 优先使用标量乘法进行全局控制如果一个效果需要全局调整强度，尽量使用一个Float参数去乘，而不是一个Float3或Float4。因为标量乘法消耗的资源更少。例如，调整整体镜面反射强度，用FinalSpecular = SpecularColor * SpecularStrength（Float * Float3），优于为RGB三个通道分别创建参数。

2. 警惕在顶点着色器中进行不必要的复杂乘法顶点着色器的调用频率远低于片元着色器（取决于顶点数量 vs 像素数量）。但是，如果某个乘法计算（特别是涉及纹理采样或复杂函数）的结果在顶点间是线性或可插值的，那么应该在顶点着色器中计算一次，然后通过插值器传递给片元着色器，而不是在每个像素上都重新计算。例如，基于世界空间Y轴生成的遮罩，完全可以在顶点着色器中计算Mask = (WorldPos.y - MinY) / (MaxY - MinY)，然后输出到片元着色器。

3. 合并连续的乘法运算如果有一系列连续的乘法，例如A * B * C * D，Shader编译器通常会帮你优化。但为了图的清晰和手动优化的可能性，可以考虑是否有些乘数是常量。如果是常量，可以预先计算好乘积再传入Shader。在ShaderGraph内部，连续的乘法节点连接，编译器会将其折叠为单个连乘操作，一般无需担心。

4. 注意精度与范围在HDR（高动态范围）渲染管线中，颜色值可以超过1。此时，乘法可能导致数值急剧增大，产生意料之外的过亮效果。对于颜色乘法，要清楚你的输入范围。必要时，在乘法后使用Clamp节点或Saturate节点（将值限制在0-1）来确保结果可控。对于非颜色数据（如位置偏移），则要明确其物理意义和合理范围。

5. 善用预览与调试ShaderGraph的强大之处在于实时预览。对于每一个乘法节点，养成习惯：

• 右键预览：查看输入输出的具体数值，确认广播机制是否按预期工作。
• 分离查看：对于矢量结果，可以连接一个Split节点，将RGBA通道分别预览，检查每个通道的乘法结果是否正确。这在调试颜色混合或遮罩效果时非常有用。
• 使用自定义函数节点：对于极其复杂或重复使用的乘法-混合逻辑，可以将其封装到Custom Function Node中。这不仅使主图更简洁，有时还能让编译器进行更好的优化。

5. 常见问题排查与实战技巧

即使理解了原理，在实际操作中还是会遇到各种奇怪的问题。下面是我总结的几个典型“坑”及其解决方法。

问题一：为什么我的颜色相乘后变全黑了？

• 现象：将一个纹理颜色与另一个颜色相乘，结果预览窗口一片漆黑。
• 排查步骤：
  1. 检查输入源：分别预览两个输入颜色。很可能其中一个颜色是(0,0,0,0)或接近黑色。常见原因是连接了错误的数据，比如误将深度图、法线图（其颜色值在视觉上可能看起来是灰色的，但RGB值可能不在[0,1]范围）当作普通颜色图进行乘法。
  2. 检查数据类型：确保不是用了一个Float4去乘了一个Matrix4x4，这会导致类型错误，结果不可预测。
  3. 检查节点预览：右键点击乘法节点，选择“Preview Node”，查看输出值。如果输出是(0,0,0,0)，那肯定是输入有问题。
• 解决：修正输入数据。如果是法线贴图，通常不应该直接用于颜色乘法。如果需要用法线贴图的信息（比如它的蓝色通道通常表示凹凸程度），请先用Split节点分离出特定通道，再进行后续计算。

问题二：使用乘法做UV缩放，纹理边缘出现接缝或闪烁。

• 现象：用UV * Tiling缩放纹理后，在模型UV边界处出现难看的接缝，或者在动画中闪烁。
• 原因：直接乘法放大了UV值。当UV值超过1时，纹理的环绕模式（Wrap Mode）开始起作用。如果是“Repeat”模式，纹理会重复，但在整数边界处，由于浮点数精度问题，采样可能发生轻微偏差，导致颜色突变（接缝）。如果是“Clamp”模式，超出部分会被钳制在边缘颜色，导致纹理拉伸。
• 解决方案：
  1. 使用Fraction节点：在乘法之后，连接一个Fraction节点。Fraction节点会返回输入值的小数部分。这样，无论UV乘以多大的数，最终进入采样器的UV始终在[0, 1)区间内，完美实现无缝平铺。公式：Tiled_UV = Fraction(UV * Tiling)。
  2. 使用Tiling And Offset节点：这是Unity提供的一个专用节点，内部已经处理好了平铺逻辑，更稳定也更直观。
  3. 检查纹理导入设置：确保纹理的Wrap Mode设置为“Repeat”，并且没有启用“Border Mipmaps”等可能影响边缘采样的选项。

问题三：用乘法节点混合两个效果，结果过渡不自然，有硬边。

• 现象：用一个灰度遮罩图去混合两个纹理或两个参数，交界处是一条明显的硬线，没有平滑过渡。
• 原因：遮罩图本身没有平滑的渐变。可能是你使用的遮罩纹理分辨率太低、压缩失真，或者你直接使用了如Step这样的节点生成了非0即1的硬遮罩。
• 解决方案：
  1. 软化遮罩：在遮罩输入乘法节点之前，先经过一个Smoothstep节点。Smoothstep可以让你指定一个过渡区间，在这个区间内产生平滑的插值。例如SoftMask = Smoothstep(0.3, 0.7, HardMask)，这样原来在0.3到0.7之间的硬过渡就变成了平滑过渡。
  2. 使用高质量遮罩纹理：确保你的遮罩纹理是高质量的，并且其渐变区域足够宽。在制作遮罩纹理时，使用羽化笔刷或高斯模糊来柔化边缘。
  3. 结合使用：有时，硬边和柔边都需要。你可以创建两个遮罩，一个硬边遮罩用于定义核心区域，一个柔边遮罩用于混合，然后用乘法或减法组合它们，实现中心硬、边缘羽化的复杂遮罩效果。

问题四：矩阵乘法顺序导致变换错误。

• 现象：用矩阵乘法实现物体的旋转和缩放，结果物体的朝向、大小完全不对。
• 原因：矩阵乘法不满足交换律。在三维变换中，顺序至关重要。通常，变换顺序是：缩放(S) -> 旋转(R) -> 平移(T)。对应的矩阵乘法顺序是T * R * S * Vertex（假设顶点是列向量，右乘）。如果你把顺序搞反了，比如先平移再缩放，物体会在缩放的基础上被平移，导致位置错误。
• 解决方案：
  1. 牢记变换顺序：在ShaderGraph中手动用矩阵节点构建变换时，必须严格按照你想要的变换顺序连接乘法节点。例如，先连接Scale Matrix和Rotation Matrix相乘，得到SR矩阵，再与Translation Matrix相乘，得到最终的Transform Matrix。
  2. 利用Unity内置变量：在绝大多数情况下，你不需要自己构造模型变换矩阵。ShaderGraph提供了Transform节点，可以直接将顶点/法线等从一种空间（如Object Space）变换到另一种空间（如World Space）。这个节点内部已经正确处理了矩阵乘法和顺序。
  3. 可视化调试：如果必须自定义矩阵，一个调试技巧是将变换后的位置（哪怕是错误的）直接输出为颜色。例如，将世界空间坐标的X、Y、Z分量映射到R、G、B通道。通过观察模型表面的颜色变化，可以直观地判断平移、旋转是否按预期工作。