最爱午后红茶

Barycentric Coordinates

日期图标
2023-05-27

先给出结论,引入重心坐标是为了在三角形内部做任何属性的插值

Why

通常我们可以得到三角形三个顶点的属性数据,然后我们需要根据这三个顶点的属性去计算出三角形内部所有点的属性,并且计算出来的所有点组合起来能使整个三角形看起来是平滑过渡的。

What

我们需要用什么内容或者说属性来进行插值?它们通常可以是顶点的:

  • 纹理坐标(Texture coordinates)
  • 颜色(Colors)
  • 法线向量(Normal vectors)
  • ...

How

我们将通过重心坐标来对三角形内部属性进行插值。重心坐标是定义在单个三角形上的,也就是每个三角形都有自己的重心坐标系统。

三角形 ABCABC 所在平面上任何一个点 (x,y)(x, y) 都可以表示成三个顶点 AABBCC 坐标的线性组合

  • (x,y)=αA+βB+γC(x, y) = \alpha A + \beta B + \gamma C

其中 α+β+γ=1\alpha + \beta + \gamma = 1,我们用 (α,β,γ)(\alpha, \beta, \gamma) 作为重心坐标来描述点 (x,y)(x, y)

因为点 (x,y)是个二维坐标,(x, y) 是个二维坐标,实际上我们只需要两个值就能表示。

当满足 α0\alpha \geq 0 && β0\beta \geq 0 && γ0\gamma \geq 0 时,点 (x,y)(x, y) 在三角形内。

重心坐标(Barycentric coordinates)
图一:重心坐标

举例:点 AA 的重心坐标是什么?

因为 A=1×A+0×B+0×CA = 1 \times A + 0 \times B + 0 \times C,所以,AA 点的重心坐标 (x,y)=(1,0,0)(x, y) = (1, 0, 0)

扩展:如何计算三角形内任意点的重心坐标?

如下图二,用三角形内的一点 (x,y)(x, y) 把三角形划分成 3 个部分,每部分的面积分别是 AAA_AABA_BACA_C。则有:

  • α=AAAA+AB+AC\alpha = \frac{A_A}{A_A + A_B + A_C}
  • β=ABAA+AB+AC\beta = \frac{A_B}{A_A + A_B + A_C}
  • γ=ACAA+AB+AC\gamma = \frac{A_C}{A_A + A_B + A_C}
三角形内任意点的重心坐标
图二:三角形内任意点的重心坐标

可采用向量法或者重心连线法去证明,这里不做具体证明过程。

其中,三角形的重心(三条边中线交于一点)的重心坐标是:(13,13,13)(\frac{1}{3}, \frac{1}{3}, \frac{1}{3})

Apply

文章开头说了插值会用到顶点的属性,比如纹理坐标、颜色、法线向量等。结合上面的知识,我们知道了三角形三个顶点的属性,那我们就可以通过重心坐标的方法插值出三角形内任意点的属性:

  • V=αVA+βVB+γVCV = \alpha V_A + \beta V_B + \gamma V_C

比如颜色的插值:

通过重心坐标插值颜色
图三:通过重心坐标插值颜色

注意:重心坐标在投影变换后会发生改变(空间三角形投影到平面后形状会发生改变,重心坐标也会跟着变)。因此一些插值相关操作应该在做投影之前完成。

* 未经同意不得转载。