图形学基础：重心坐标插值原理与在Unity/Unreal中的平滑着色实践

1. 项目概述与核心价值

最近在几个独立游戏项目里，我反复遇到了一个看似基础但直接影响画面表现的问题：如何在3D模型的三角形面上，实现顶点颜色或纹理坐标的平滑过渡。比如，你想让一个低多边形的地形根据高度渐变颜色，或者让一个角色模型的皮肤光影过渡更自然。如果只是简单地在三个顶点上设置颜色，然后在面上进行线性插值，结果往往会得到生硬的色块，边缘的锯齿感非常明显，尤其是在移动视角或模型变形时，这种不连续感会破坏沉浸感。

这个问题的核心，就在于我们如何定义三角形内部任意一点的颜色。最朴素的想法是平均，但平均无法反映点与顶点之间的空间关系。这时，重心坐标插值法就登场了。它不仅是计算机图形学中一个基础得不能再基础的概念，更是现代GPU渲染管线（无论是Unity的ShaderLab还是Unreal的HLSL/Material Graph）进行光栅化插值的数学基石。理解它，你就能真正明白为什么你的顶点色可以平滑铺开，为什么法线贴图能在低模上生效，甚至能为后续更高级的着色器技巧打下坚实的基础。

简单来说，这个项目就是带你亲手揭开这层“魔法”的面纱。我们将不依赖引擎的黑盒插值，而是自己动手，在CPU侧（比如用C#脚本）实现重心坐标的计算，并应用到一个三角形网格的颜色插值上。我会分别在Unity和Unreal Engine中给出可运行的示例，让你不仅能看懂理论，更能立刻在编辑器中看到平滑的渐变效果。无论你是刚接触Shader的新手，还是想巩固图形学基础的老手，这个过程都能让你对渲染的理解更深一层。

2. 重心坐标插值法原理深度拆解

2.1 什么是重心坐标？

想象一个三角形，它有三个顶点A、B、C。对于这个三角形内的任意一点P，我们能否用A、B、C的某种组合来表示它呢？重心坐标 (Barycentric Coordinates) 给出了答案：存在三个权重系数 α, β, γ，使得：

P = α * A + β * B + γ * C

并且满足：α + β + γ = 1， 且α ≥ 0, β ≥ 0, γ ≥ 0。

这三个系数 (α, β, γ) 就是点P关于三角形ABC的重心坐标。它们的几何意义非常直观：

• α：表示点P“靠近”顶点A的程度。当P就是A点时，(α, β, γ) = (1, 0, 0)。
• β：表示点P“靠近”顶点B的程度。
• γ：表示点P“靠近”顶点C的程度。

如果某个系数为0，说明点P位于该系数对应顶点对面的边上。如果三个系数都大于0，则点P在三角形内部。这是一种基于面积的解释：α 的值正比于子三角形PBC的面积与总面积之比。

2.2 为什么它能实现平滑插值？

平滑过渡的关键在于“连续性”和“线性”。重心坐标提供了一种在三角形域内线性插值的完美工具。

假设我们三个顶点A、B、C分别有颜色Color_A,Color_B,Color_C。对于三角形内任意点P，其插值后的颜色Color_P可以定义为：

Color_P = α * Color_A + β * Color_B + γ * Color_C

由于α, β, γ随着点P的位置变化而连续、线性地变化，因此Color_P也会随之连续、线性地变化。从顶点A（α=1）到边BC（α=0），颜色的过渡是严格沿着一条直线的权重变化，这就保证了在三角形内部不会出现突兀的跳跃。当多个三角形共享顶点颜色时，只要共享顶点的颜色值相同，那么跨三角形的颜色过渡也必然是平滑的，因为沿着共享边的插值权重是一致的。

注意：这里说的“线性”是指在三角形这个二维空间内的线性，而不是指颜色空间（如sRGB）中的线性。在实际着色器中，我们通常在线性颜色空间进行计算以获得物理正确的结果。

2.3 与常见错误方法的对比

为了凸显重心坐标的优势，我们来看看两种常见的错误或简陋方法：

1. 顶点颜色平均（面着色）：直接取(Color_A + Color_B + Color_C) / 3作为整个三角形的颜色。结果就是每个三角形都是一个纯色块，模型看起来像低折纸，毫无平滑感。
2. 基于距离的权重：根据P点到A、B、C三个顶点的距离的倒数来分配权重。这个方法直觉上似乎可行，但它不是线性插值。在边上，其变化率可能不是线性的，导致插值结果不满足“在边上仅由两个顶点决定”的性质，容易在共享边处产生接缝或不连续。

下表清晰地对比了这几种方法：

由此可见，重心坐标法是唯一能同时保证三角形内部线性平滑和三角形之间连续性的正确方法，这也是它被GPU硬件广泛采用的原因。

3. 核心算法实现与代码解析

理解了原理，我们来实现它。计算点P在三角形ABC中的重心坐标，有多种方法，这里介绍两种最常用的：基于面积比的方法和基于向量求解的方法。

3.1 方法一：基于面积比的计算（几何直观）

根据几何意义，α = 面积(PBC) / 面积(ABC)， β = 面积(PCA) / 面积(ABC)， γ = 1 - α - β。 三角形面积可以通过二维向量叉积的模来计算。对于三维空间中的三角形，我们通常投影到某个平面（如三角形所在平面）来计算。

// C# 示例代码 (Unity) public static Vector3 Barycentric(Vector2 p, Vector2 a, Vector2 b, Vector2 c) { Vector2 v0 = b - a; Vector2 v1 = c - a; Vector2 v2 = p - a; float d00 = Vector2.Dot(v0, v0); float d01 = Vector2.Dot(v0, v1); float d11 = Vector2.Dot(v1, v1); float d20 = Vector2.Dot(v2, v0); float d21 = Vector2.Dot(v2, v1); float denom = d00 * d11 - d01 * d01; // 平行四边形面积平方 float v = (d11 * d20 - d01 * d21) / denom; // 对应 β float w = (d00 * d21 - d01 * d20) / denom; // 对应 γ float u = 1.0f - v - w; // 对应 α return new Vector3(u, v, w); // (α, β, γ) }

代码解读： 这段代码使用了更稳定的向量点积方法来计算面积比，避免了直接叉积可能带来的数值精度问题。denom是两倍三角形ABC面积的平方（的某种表示）。计算出的u, v, w分别对应 α, β, γ。这个方法在点P位于三角形外时，会计算出负的权重。

3.2 方法二：基于线性方程组的求解（通用高效）

将P = α*A + β*B + γ*C和α + β + γ = 1结合，可以推导出求解 β 和 γ 的方程组，然后得到 α。在二维情况下，公式非常简洁。

// C++ 示例代码 (Unreal Engine 风格) FVector2D Barycentric(const FVector2D& P, const FVector2D& A, const FVector2D& B, const FVector2D& C) { FVector2D v0 = B - A; FVector2D v1 = C - A; FVector2D v2 = P - A; float d00 = FVector2D::DotProduct(v0, v0); float d01 = FVector2D::DotProduct(v0, v1); float d11 = FVector2D::DotProduct(v1, v1); float d20 = FVector2D::DotProduct(v2, v0); float d21 = FVector2D::DotProduct(v2, v1); float denom = d00 * d11 - d01 * d01; float beta = (d11 * d20 - d01 * d21) / denom; float gamma = (d00 * d21 - d01 * d20) / denom; float alpha = 1.0f - beta - gamma; return FVector2D(alpha, beta); // γ 可以通过 1-α-β 得到 }

实操心得： 在真实项目中，尤其是处理大量三角形时（如软件光栅化），方法二的变体更为常用。对于三维空间中的点，你需要先将点P和三角形投影到二维平面（通常是剔除法向量的最大分量后的平面），以防止退化。Unity的Mesh类或Unreal的ProceduralMeshComponent中处理顶点数据时，本质上也是遵循这个逻辑。

3.3 颜色插值函数

一旦有了重心坐标，插值就水到渠成：

// Unity C# 颜色插值 Color InterpolateColor(Vector3 barycentricCoords, Color colorA, Color colorB, Color colorC) { float alpha = barycentricCoords.x; float beta = barycentricCoords.y; float gamma = barycentricCoords.z; // 对每个颜色通道进行线性插值 float r = alpha * colorA.r + beta * colorB.r + gamma * colorC.r; float g = alpha * colorA.g + beta * colorB.g + gamma * colorC.g; float b = alpha * colorA.b + beta * colorB.b + gamma * colorC.b; float a = alpha * colorA.a + beta * colorB.a + gamma * colorC.a; return new Color(r, g, b, a); }

重要提示：在图形学中，除了颜色，法线、纹理坐标（UV）、顶点切线等属性都需要进行插值。但法线插值后必须重新归一化（Normalize），否则长度会变，影响光照计算。而深度值（Z）在透视投影下需要进行透视校正插值，这是一个关键进阶知识点。简单的屏幕空间线性插值会导致纹理扭曲。不过在我们这个颜色插值的入门示例中，可以暂不考虑。

4. Unity引擎实战示例

让我们在Unity中创建一个可视化的例子。我们将动态生成一个三角形网格，并为每个顶点赋予不同的颜色，然后在Update中根据鼠标位置计算重心坐标并实时插值，显示一个跟随鼠标的采样点颜色。

4.1 场景搭建与脚本编写

1. 创建对象：在Unity中新建一个空物体，命名为BarycentricDemo。
2. 添加组件：为其添加Mesh Filter和Mesh Renderer组件。在Mesh Renderer的材质中，使用Standard或Unlit/Color着色器。
3. 创建脚本：新建一个C#脚本BarycentricInterpolation.cs并挂载到该物体上。

using UnityEngine; [RequireComponent(typeof(MeshFilter), typeof(MeshRenderer))] public class BarycentricInterpolation : MonoBehaviour { public Color colorA = Color.red; public Color colorB = Color.green; public Color colorC = Color.blue; private Mesh mesh; private Vector3[] vertices; private Color[] vertexColors; void Start() { CreateTriangleMesh(); UpdateVertexColors(); } void Update() { // 示例：在屏幕上显示插值逻辑，实际插值由Shader完成。 // 这里演示CPU计算，我们可以画一个Gizmo或UI来展示。 DebugDrawInterpolation(); } void CreateTriangleMesh() { MeshFilter meshFilter = GetComponent<MeshFilter>(); mesh = new Mesh(); meshFilter.mesh = mesh; // 定义三角形的三个顶点（在模型本地空间） vertices = new Vector3[] { new Vector3(0, 0, 0), // A new Vector3(1, 0, 0), // B new Vector3(0, 1, 0) // C }; // 定义三角形（顶点索引，顺时针或逆时针决定正面） int[] triangles = { 0, 2, 1 }; // Unity通常使用顺时针为正面 // 分配顶点颜色数组 vertexColors = new Color[vertices.Length]; mesh.vertices = vertices; mesh.triangles = triangles; mesh.RecalculateNormals(); // 计算法线用于基础光照 } void UpdateVertexColors() { // 为每个顶点赋予预设颜色 vertexColors[0] = colorA; vertexColors[1] = colorB; vertexColors[2] = colorC; mesh.colors = vertexColors; // 关键：将顶点颜色数组赋给mesh } void DebugDrawInterpolation() { // 获取鼠标在屏幕上的位置，并转换为世界空间射线 Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition); RaycastHit hit; // 如果射线击中了当前物体的碰撞器（需要添加MeshCollider） if (Physics.Raycast(ray, out hit) && hit.collider.gameObject == this.gameObject) { // hit.barycentricCoordinate 是Unity RaycastHit提供的重心坐标！ Vector3 barycentric = hit.barycentricCoordinate; Color interpolatedColor = colorA * barycentric.x + colorB * barycentric.y + colorC * barycentric.z; // 在场景中绘制该点的颜色 Debug.DrawRay(hit.point, hit.normal * 0.2f, interpolatedColor, 0f); // 也可以在UI上显示RGB值 // Debug.Log($"插值颜色: {interpolatedColor}"); } } // 在Scene视图绘制Gizmo，可视化三角形和顶点 void OnDrawGizmosSelected() { if (vertices == null) return; Gizmos.color = colorA; Gizmos.DrawSphere(transform.TransformPoint(vertices[0]), 0.05f); Gizmos.color = colorB; Gizmos.DrawSphere(transform.TransformPoint(vertices[1]), 0.05f); Gizmos.color = colorC; Gizmos.DrawSphere(transform.TransformPoint(vertices[2]), 0.05f); } }

4.2 关键步骤解析与避坑指南

1. Mesh Collider：为了让Physics.Raycast生效，你必须为BarycentricDemo物体添加一个Mesh Collider组件。否则射线无法检测到三角形面。
2. hit.barycentricCoordinate：这是Unity提供的一个极其便利的属性。当射线击中一个三角形网格碰撞器时，它会自动返回击中点在那个三角形上的重心坐标。这省去了我们手动计算的麻烦，非常适合调试和可视化。
3. 顶点颜色赋值：mesh.colors = vertexColors;这一行是将颜色数据传递给GPU的关键。在默认的Standard Shader中，顶点颜色（COLOR语义）可能不会被使用，你需要一个能响应顶点颜色的Shader。Unlit/Color着色器或自定义Shader可以。
4. 着色器中的插值：在真正的渲染流程中，我们不需要在CPU端为每个像素计算颜色。CPU脚本只负责将colorA, colorB, colorC作为顶点属性传递给Shader。GPU在光栅化阶段，会自动利用硬件加速的重心坐标插值，为每个片段（像素）计算出插值后的颜色、UV、法线等。我们的脚本演示的是原理，而GPU做的是高效实践。

常见问题排查：

• 看不到颜色渐变：检查使用的材质球着色器是否支持顶点颜色。尝试使用Unlit/Color或创建一个简单的自定义Shader，在片段着色器中直接返回v2f i : COLOR的值。
• 射线检测无效：确认Mesh Collider已添加，并且其Convex选项对于简单三角形网格通常不需要勾选。确保射线检测的层（Layer）正确。
• 插值颜色不对：检查hit.barycentricCoordinate的顺序。它返回的(u, v, w)对应的是被击中三角形的三个顶点索引（mesh.triangles中的顺序），确保你的colorA/B/C赋值顺序与顶点顺序匹配。

5. Unreal Engine引擎实战示例

在Unreal Engine中，我们可以通过ProceduralMeshComponent动态创建三角形，并利用其顶点颜色数据实现插值。同时，我们也可以用蓝图或C++实现鼠标交互采样。

5.1 使用ProceduralMeshComponent创建彩色三角形

1. 创建Actor：在UE编辑器中，创建一个新的C++类或蓝图Actor，命名为BP_BarycentricDemo。
2. 添加组件：在蓝图编辑器中，添加一个Procedural Mesh Component。
3. 构建网格：在Actor的BeginPlay或构造脚本中，生成三角形。

以下是蓝图节点的核心逻辑示意（用文字描述）：

• 设置顶点（Vertices）：添加三个FVector，例如 (0,0,0), (100,0,0), (0,100,0)。
• 设置三角形索引（Triangles）：添加三个整数，顺序决定正面（UE默认逆时针为正面），例如 0, 2, 1。
• 设置顶点颜色（Vertex Colors）：添加三个FLinearColor，分别对应红、绿、蓝。
• 调用Create Mesh Section：将以上数组传递给Procedural Mesh Component的Create Mesh Section节点。记得勾选Enable Collision以便后续射线检测。

5.2 C++实现重心坐标计算与采样

在UE C++中，我们可以编写一个函数来计算重心坐标，并在点击事件中调用。

// 在您的Actor头文件（.h）中声明函数 public: UFUNCTION(BlueprintCallable, Category = "Barycentric") static FLinearColor CalculateBarycentricColor(const FVector& Point, const FVector& A, const FVector& B, const FVector& C, const FLinearColor& ColorA, const FLinearColor& ColorB, const FLinearColor& ColorC); // 在源文件（.cpp）中实现 FLinearColor ABarycentricDemoActor::CalculateBarycentricColor(const FVector& P, const FVector& A, const FVector& B, const FVector& C, const FLinearColor& ColorA, const FLinearColor& ColorB, const FLinearColor& ColorC) { // 转换为二维（假设三角形在XY平面上，忽略Z。更健壮的做法是投影到三角形平面） FVector2D v0(B.X - A.X, B.Y - A.Y); FVector2D v1(C.X - A.X, C.Y - A.Y); FVector2D v2(P.X - A.X, P.Y - A.Y); float d00 = FVector2D::DotProduct(v0, v0); float d01 = FVector2D::DotProduct(v0, v1); float d11 = FVector2D::DotProduct(v1, v1); float d20 = FVector2D::DotProduct(v2, v0); float d21 = FVector2D::DotProduct(v2, v1); float denom = d00 * d11 - d01 * d01; if (FMath::Abs(denom) < KINDA_SMALL_NUMBER) { return FLinearColor::White; // 退化三角形，返回默认色 } float beta = (d11 * d20 - d01 * d21) / denom; float gamma = (d00 * d21 - d01 * d20) / denom; float alpha = 1.0f - beta - gamma; // 线性插值颜色 FLinearColor Result = ColorA * alpha + ColorB * beta + ColorC * gamma; return Result; }

然后，在蓝图中，你可以：

1. 在Event Tick或鼠标点击事件中，进行射线检测（Line Trace by Channel）。
2. 如果击中自己的ProceduralMeshComponent，从Hit Result中获取击中点（Impact Point）和碰撞组件。
3. 由于UE的射线检测不直接提供重心坐标，你需要获取三角形的三个顶点数据。这需要你存储创建网格时的顶点数据，或者通过碰撞组件的接口查询（更复杂）。对于演示，一个简单的方法是：如果你知道三角形是Actor下唯一的ProcMesh部分，且顶点位置固定，可以直接使用预设的A、B、C顶点位置和颜色。
4. 调用上面编写的CalculateBarycentricColor函数，传入击中点和预设的顶点信息，得到插值颜色。
5. 用这个颜色来更新某个Decal、UI Text或Dynamic Material的参数，实现可视化反馈。

5.3 Unreal Material中的顶点颜色插值

更符合引擎常规工作流的方式是直接在材质中使用顶点颜色。当你通过Create Mesh Section设置了顶点颜色后：

1. 创建一个新的材质M_VertexColor。
2. 在材质图表中，添加Vertex Color节点。
3. 将其RGB输出连接到Base Color输入。
4. 将这个材质赋给你的ProceduralMeshComponent。

这样，GPU就会自动完成重心坐标插值，并在屏幕上渲染出平滑过渡的三角形。这是最高效、最标准的方式。

Unreal实战要点：

• 顶点顺序：Unreal中逆时针绕序的三角形被认为是正面。如果你的三角形不可见，可能是顶点顺序错了，尝试调整Triangles数组的顺序（如 0, 1, 2）。
• 坐标空间：注意ProceduralMeshComponent的顶点坐标是相对于该组件的本地空间。
• 性能：ProceduralMeshComponent适合动态创建简单几何体。对于复杂或静态网格，建议使用静态网格体（Static Mesh）。
• 材质域：如果只显示颜色，材质域（Material Domain）使用Surface即可。如果需要后期效果，可能需要Post Process。

6. 常见问题、优化与扩展应用

6.1 常见问题速查表

6.2 性能优化考量

• CPU vs GPU：重心坐标插值的核心计算应交给GPU在光栅化阶段完成，这是硬件优化的。我们的CPU代码仅用于理解原理、工具制作或特定算法（如拾取、网格处理）。不要在每帧用CPU为大量像素计算插值颜色。
• 预计算与缓存：如果需要在CPU端频繁对同一网格的固定点进行插值（如布料模拟的锚点），可以预计算这些点相对于某个三角形网格的重心坐标并缓存。
• 数值稳定性：当三角形面积非常小（退化三角形）时，面积计算的分母可能接近零。在代码中必须添加容错判断，返回一个默认值或跳过该三角形。

6.3 扩展应用场景

掌握了重心坐标插值，你就打开了一扇门，可以应用到许多更酷炫的效果中：

1. 纹理动画与变形：通过随时间改变顶点的UV坐标，并利用插值，可以实现纹理在网格表面的平滑流动和变形效果。
2. 顶点动画与蒙皮：在骨骼动画中，每个顶点受多个骨骼影响，其最终位置是骨骼变换矩阵根据权重（可视为一种广义重心坐标）插值的结果。
3. 地形着色与混合：根据地形的海拔、坡度等信息，为顶点分配不同的材质索引或混合权重，在像素着色器中利用插值后的权重混合多个纹理，实现逼真的地形材质过渡。
4. 软阴影与光照：如PCF（百分比渐近过滤）软阴影技术中，需要对阴影贴图进行多次采样并平均，采样点的分布可以利用重心坐标在像素内的小三角形上进行插值。
5. 屏幕空间效果：在后期处理中，对全屏四边形进行插值，传递UV等参数。

重心坐标插值法是连接离散顶点数据与连续像素表现的桥梁。它如此基础，又如此重要。我建议你在理解这个示例后，尝试修改代码，比如为三角形添加第四个顶点做成四边形（由两个三角形组成），观察颜色在接缝处是如何连续过渡的；或者尝试插值顶点的法线，并实现一个简单的朗伯光照模型，亲眼看看平滑的光照效果是如何产生的。这些动手实验，比读十篇理论文章都管用。