这些方程可以简化为以下形式：

我们可以进一步简化，使用

其中 $\times$ 是 $\mathbb{R}^3$ 中的叉积，$\cdot$ 是 $\mathbb{R}^3$ 中的点积。

将三元点积代入方程

最后一步是求解这两个二次方程中关于参数 $u$ 和 $v$ 的解。

最后一步是求解这两个二次方程中关于参数 $u$ 和 $v$ 的解。

该方程可用于计算三维空间中任意四边形的双线性插值系数 $u$ 和 $v$。这是因为，如果一个四边形嵌入到 $\mathbb{R}^3$ 中的任何平面上，都可以通过等距变换将其映射到 $z=0$ 平面上，并且等距映射后前提条件仍然成立。

值得注意的是，上述方程表明双线性插值系数 $u$ 和 $v$ 取决于四边形顶点 all four Euclidean coordinates。如果是静态网格，这些系数可以预先计算（运行时不需要）。但是，如果是动态（动画）网格，则需要在运行时计算这些系数。因此，我们需要使用一个图形管线阶段，在该阶段我们仍然可以访问四边形顶点的所有四个位置。

平行四边形

当渲染限于平行四边形的四边形时，解决方案要简单得多，因为 $\vec{Q} = \vec{0}$。可以从快速分析中推断出这一点。

向量 $\vec{Q}$ 描述为 $\vec{Q} = (C - B) + (A - D)$. 在平行四边形中，第一个括号内的向量 $\vec{C - B}$，根据定义，其长度与向量 $\vec{A - D}$ 相等，但方向相反。因此，这两个向量的和始终是零向量。

因此，当 $\vec{Q} = \vec{0}$

这个更简单的案例已经有所描述，解决方案可以在 如何使用现代GPU正确地在平行四边形上插值顶点属性？ 中找到。

硬件加速实现

上一节中提出的代数解决方案的硬件加速实现可以使用三个不同的图形管线阶段来实现：几何着色器、细分着色器和网格着色器。这种三向实现表明，该技术在 2008 年发布的 GPU 硬件上是可行的。以下源代码使用 GLSL 着色语言。

下表描述了实现所提出技术所需的 API 版本和扩展。

所提出方法实现的实现要求在片段着色器中具有当前处理片段的重心坐标。当以下扩展可用时，这是可能的。

• Vulkan® VK_KHR_fragment_shader_barycentric 扩展。

• DirectX® 12 Shader Model 6.1。

• OpenGL® 4 GL_NV_fragment_shader_barycentric 或 GL_AMD_shader_explicit_vertex_parameter。

如果 GPU 不支持上述扩展，则可以通过几何着色器、细分着色器或网格着色器阶段来生成它们。

本文提出的新方法的实现可以分为以下几个步骤：

1. 将四边形图元传递到图形管线。

   现代图形 API（不包括旧的 OpenGL GL_QUADS 和 GL_QUAD_STRIP 图元类型）中不提供四边形图元。为了支持类似四边形的图元，请使用以下方法：

   • 几何着色器：使用几何着色器阶段，邻接图元可用于模拟四边形图元。

     • OpenGL® GL_LINES_ADJACENCY

     • Vulkan® VK_PRIMITIVE_TOPOLOGY_LINE_LIST_WITH_ADJACENCY

     • DirectX® 12/11 D3D_PRIMITIVE_TOPOLOGY_LINELIST_ADJ

   • 通过细分阶段，引入了新的 Patch 图元。在这种拓扑结构中，网格中定义的顶点数量不是固定的，但所谓的控制点每个 Patch 的范围从 1 到 32。这些控制点可以被视为贝塞尔曲面的控制点，但也可以被视为多边形顶点。本文提出的解决方案的实现使用具有 4 个控制点的 Patch，并将其视为四边形的顶点。

   • 网格着色器：使用网格着色器，有多种方法可以将四边形图元引入图形管线。此阶段的开发是为了提供用户更大的灵活性。因此，由用户以某种方式生成包含四边形的网格块（这不属于本文的范围）。

2. 下一步是计算常量 $A_u, A_v, B$ （使用上述步骤之一），然后将其用于片段着色器。我们需要在上述某个管线阶段计算这些常量，因为在片段着色器中，我们无法访问四边形顶点的四个属性（如果存在，重心坐标扩展仅让我们能够访问三角形顶点的三个属性）。通过分析本文方法的代数解，我们可以看到这些常量取决于四边形顶点的位置。

以下函数需要在几何着色器、细分求值着色器或网格着色器中执行。

    vec3 calculateConstants(vec3 v0, vec3 v1, vec3 v2, vec3 v3)
    {
        const vec3 v10 = v1 - v0;
        const vec3 v30 = v3 - v0;
        const vec3 crossv10v30 = cross(v10, v30);
        const vec3 n = normalize(crossv10v30);
        const vec3 d = v0 - v1 + v2 - v3;
        float A_u = dot(n, cross(d, v30));
        float A_v = dot(n, cross(d, v10));
        const float B =  dot(n, crossv10v30);
        A_u = abs(A_u) < 0.00001 ? 0.0 : A_u;
        A_v = abs(A_v) < 0.00001 ? 0.0 : A_v;
        return vec3(A_u, A_v, B);
    }

其中 v0, v1, v2, v3 是按以下顺序排列的四边形顶点的欧几里得坐标。

计算出的 A_u, A_v 和 B 值随后传递给片段着色器。

2. 将顶点属性传递给片段着色器。

为了使双线性插值在片段着色器中正常工作，我们需要能够在其中获取所有四个顶点属性（例如纹理坐标、顶点法线和顶点颜色）。

• 如果存在重心坐标扩展，我们可以访问其中三个属性，因此另一个阶段必须导出四边形的缺失顶点属性。以下代码可用于片段着色器：

layout (location = 0) pervertexEXT in block
{
  vec3 Normal;
  flat vec3 NormalExtra;
  vec2 Texcoord;
  flat vec2 TexcoordExtra;
  vec4 Color;
  flat vec4 ColorExtra;
  flat vec3 BaryConstants;
} In[];

• 如果不存在重心坐标扩展，则需要将所有四个顶点属性导出为一个四元素数组，并计算一个变量来模拟重心坐标。以下代码可用于片段着色器：

layout(location = 0) in block
{
    flat vec3 Normal[4];
    flat vec2 Texcoord[4];
  flat vec4 Color[4];
  flat vec3 BaryConstants;
  vec3 BarycentricCoordinate;
} In;

3. 分割四边形时形成的三角形的重心坐标顺序。

在使用重心坐标进行顶点属性插值时，它们在三角形中的定义顺序无关紧要。然而，在本文件中所述的实现方法中，特定的顺序很重要。此顺序可以直观地表示如下：

其中 红色 表示 $\alpha$ 重心坐标的影响，绿色 表示 $\beta$，蓝色 表示 $\gamma$。

当存在适当的扩展时，硬件可以提供这种重心坐标顺序，或者可以在细分着色器或几何着色器阶段生成这些数据。

4. 计算 $u, v$ 双线性系数。

在片段着色器中，可以通过调用以下函数来计算双线性插值系数 $u$ 和 $v$。

    vec2 calculateBilinear(float beta, float gamma, float A_u, float A_v, float B)
    {
      const float B_u = B;
      const float B_v = -B;
      const float B2 = beta * A_v + gamma * A_u;
      const float t_u = B_u - B2;
      const float t_v = B_v - B2;
      const float b_u = t_u / A_u * 0.5;
      const float b_v = t_v / A_v * 0.5;
      const float c_u = gamma * B_v;
      const float c_v = beta * B_u;
      const float d_u = b_u * b_u - c_u / A_u;
      const float d_v = b_v * b_v - c_v / A_v;
      const float s_u = A_u >= 0.0 ? -1.0 : 1.0;
      const float s_v = A_v >= 0.0 ? 1.0 : -1.0;
      const float u = A_u != 0.0 ? (-b_u - s_u * sqrt(d_u)) : (-c_u / t_u);
      const float v = A_v != 0.0 ? (-b_v - s_v * sqrt(d_v)) : (-c_v / t_v);
      return vec2(u, v);
    }

其中 beta 是 $\beta$ 重心坐标，gamma 是 $\gamma$ 重心坐标，A_u, A_v, B 是在之前的图形管线阶段计算出的常量。

5. 顶点属性的双线性插值。

计算出双线性插值系数 $u$ 和 $v$ 后，可以使用函数实现顶点属性的插值。

vec4 interpolateBilinear(vec4 v0, vec4 v1, vec4 v2, vec4 v3, vec2 uv)
{
    return mix(mix(v0, v1, uv.y), mix(v2, v3, uv.y), uv.x);
}
vec3 interpolateBilinear(vec3 v0, vec3 v1, vec3 v2, vec3 v3, vec2 uv)
{
    return mix(mix(v0, v1, uv.y), mix(v2, v3, uv.y), uv.x);
}
vec2 interpolateBilinear(vec2 v0, vec2 v1, vec2 v2, vec2 v3, vec2 uv)
{
    return mix(mix(v0, v1, uv.y), mix(v2, v3, uv.y), uv.x);
}
float interpolateBilinear(float v0, float v1, float v2, float v3, vec2 uv)
{
    return mix(mix(v0, v1, uv.y), mix(v2, v3, uv.y), uv.x);
}

其中 v0, v1, v2, v3 是四边形顶点属性。

平行四边形

对于仅限于平行四边形的四边形，实现本文所述技术更为简单。

• 在细分着色器、几何着色器或网格着色器阶段，当仍有四个顶点属性的数据可用时，需要计算一个额外的常量数据（每个属性）。

vec4 calculateConstants(vec4 A, vec4 B, vec4 C, vec4 D)
{
    return A - B + C - D;
}
vec3 calculateConstants(vec3 A, vec3 B, vec3 C, vec3 D)
{
    return A - B + C - D;
}
vec2 calculateConstants(vec2 A, vec2 B, vec2 C, vec2 D)
{
    return A - B + C - D;
}
float calculateConstants(float A, float B, float C, float D)
{
    return A - B + C - D;
}

其中 A, B, C, D 是按规定顺序排列的顶点属性。

每个顶点属性的计算值需要传递给片段着色器。

• 在片段着色器中，执行以下操作：

vec4 interpolateBilinear(vec4 attribute, vec2 barycentric, vec4 extraVal)
{
    return attribute + barycentric.x * barycentric.y * extraVal;
}
vec3 interpolateBilinear(vec3 attribute, vec2 barycentric, vec3 extraVal)
{
    return attribute + barycentric.x * barycentric.y * extraVal;
}
vec2 interpolateBilinear(vec2 attribute, vec2 barycentric, vec2 extraVal)
{
    return attribute + barycentric.x * barycentric.y * extraVal;
}
float interpolateBilinear(float attribute, vec2 barycentric, float extraVal)
{
    return attribute + barycentric.x * barycentric.y * extraVal;
}

其中 attribute 表示通过传统重心插值（在片段着色器中可用）插值的值，barycentric 是一个 vec2 数据类型，包含片段的 $\beta$ 和 $\gamma$ 重心坐标，extra 是在之前的几何、细分、网格着色器阶段计算出的常量。

结果

本文提出的代数解决方案在不同实现中的输出保持一致。根据顶点属性的类型，结果可以总结在下表中：

顶点属性	重心插值	使用本文提出的解决方案进行双线性插值
颜色
纹理坐标
法线
颜色
纹理坐标
法线
颜色
纹理坐标
法线
网格示例
动画示例

总结

如本文所述，使用重心坐标进行双线性插值的代数解决方案可以通过 Vulkan® 或 DirectX® 等 API 来实现。此实现利用 GPU 上的硬件加速渲染。本文提出了三种不同的实现，基于 GPU 支持的可用图形管线。这些实现使得在从 2008 年发布的型号到最新版本的 GPU（包括 PC 和移动设备）上使用新方法成为可能。

Blender 是 Blender Foundation 在欧盟和美国的注册商标。DirectX 是 Microsoft Corporation 在美国和其他司法管辖区的注册商标。OpenGL® 和椭圆形标志是 Hewlett Packard Enterprise 在美国和/或其他国家/地区的商标或注册商标。Vulkan 和 Vulkan 标志是 Khronos Group Inc. 的注册商标。