在网格中的三角形顶点之间进行插值

Posted 2023-02-22

【中文标题】在网格中的三角形顶点之间进行插值

【英文标题】：Interpolating between triangle vertices in a grid

【发布时间】：2017-02-14 11:11:20

【问题描述】：

我有一张六边形地图，并尝试在其上构建战争迷雾。我正在做的是构建一个顶点为六角中心的 VBO。然后，我根据其可见性（0.0f、0.5f、1.0f）为每个平铺中心分配 alpha 值。 这是顶点着色器：

#ifdef GL_ES                                        

precision highp float;

#endif

attribute vec4 a_position;
attribute float a_alpha;

uniform  mat4 u_MVPMatrix;

varying float v_alpha;

void main()

    gl_Position = u_MVPMatrix * a_position;
    v_alpha = a_alpha;
                                                    

还有我的片段着色器：

#ifdef GL_ES

precision highp float;

#endif

varying float v_alpha;

void main()
 
    gl_FragColor = vec4(v_alpha, v_alpha, v_alpha, 1.0);

我试图从雾图中挖一个洞来尝试一下，我得到了这个：

插值有什么问题？为什么有这么明显的三角形结构？

【问题讨论】：

这是线性插值的产物。也许你可以看看你是否可以改变你的片段着色器属性的插值方法。这里有一些关于它们的信息：khronos.org/opengl/wiki/…

这不是一个真正的插值人工制品。它是一种感知人工制品。如果仔细观察，您会发现颜色值是连续的。唯一改变的是梯度方向（不连续）。这种不连续性被我们的大脑放大了。所以，确实。解决这个问题的唯一方法是在三角形上使用不同的插值方法。但这在很大程度上取决于您的需求，也可能不太容易实现。

好的，我明白了。我相信没有简单的方法可以改变可变 var 的插值方法。有没有简单的方法来实现平滑过渡（除了使用纹理隐藏渐变）？

【参考方案1】：

正如 Nico 指出的，这是一种视错觉。

基本上，您所拥有的是两个三角形之间的不连续性。共享边具有相同的颜色值，但由于两侧的渐变不同，它会在它们之间创建外观。三角形边缘的梯度变化并不平滑。

从数学上讲，你在这条线上有 C0 连续性，但不是 C1 连续性。

而且人眼/感知非常习惯于平滑事物。因此，当某些事情不顺利时，我们会感知不连续性。

您对此无能为力。您可能可以使用插值方案，但您能做的最好的事情就是简单地纹理十六进制。纹理频繁变化的颜色将有助于掩盖渐变的不连续性。