如何在 GLSL 顶点着色器中实现薄板样条算法？答案

【问题标题】：How can I implement the Thin Plate Spline algorithm in a GLSL vertex shader?如何在 GLSL 顶点着色器中实现薄板样条算法？
【发布时间】：2019-10-29 11:00:52
【问题描述】：

我想制作一个 GLSL 着色器，用于使用 TPS 算法扭曲图像/纹理。我将如何为此编写 GLSL 顶点着色器？

【问题讨论】：

你试过什么？你被困在哪里了？
不幸的是，我一直在试图理解 TPS 算法。在 GLSL 中，我设法制作了 2 个控制点矩阵：源和目标，我猜我必须推断控制点之间的某种插值。然后调整我正在阅读的纹理的坐标。我有一个非常粗略的测试，还没有做我想要的，在这里：jsfiddle.net/codingdude/ak3bveuj
我发现了一篇有趣的文章：testdrive-archive.azurewebsites.net/Graphics/Warp/Default.html，它几乎满足了我的需求。现在我必须根据自己的需要调整它

标签： algorithm glsl vertex-shader

【解决方案1】：

答案是我需要制作一个顶点着色器，而不是片段着色器。

我需要的是用 GLSL 实际扭曲图像，似乎这篇文章描述了如何做到这一点：https://testdrive-archive.azurewebsites.net/Graphics/Warp/Default.html

attribute vec2 aPosition;
varying vec2 vTexCoord;
#define MAXPOINTS 9
uniform vec2 p1[MAXPOINTS]; // where the reference points
uniform vec2 p2[MAXPOINTS]; // where the warp points
void main() {
  vTexCoord = aPosition;
  vec2 position = aPosition * 2.0 - 1.0; // convert 0 - 1 range to -1 to +1 range
  for (int i = 0; i < MAXPOINTS; i++)
  {
      float dragdistance = distance(p1[i], p2[i]);
      float mydistance = distance(p1[i], position);

      if (mydistance < dragdistance)
      {
          vec2 maxdistort = (p2[i] - p1[i]) / 4.0;

          float normalizeddistance = mydistance / dragdistance;

          float normalizedimpact = (cos(normalizeddistance*3.14159265359)+1.0)/2.0;

          position += (maxdistort * normalizedimpact);
      }
  }      
  //gl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);
  gl_Position = vec4(position, 0.0, 1.0);
}

【讨论】：