Webgl 计算任意四边形纹理的投影变换

我想计算一个投影变换，在webgl中对任意四边形进行纹理处理（如果可能/必要，使用三个.js和着色器）

是我想从答案中得到的

每件事都在帖子里描述得很好，所以我想只要稍微努力，我就能解决这个问题。以下是解决方案的伪代码：

precompute A matrix (should be trivial since texture coordinates are in [0,1] interval)
compute B matrix according to the vertex positions (not possible in the vertex shader since we need the four coordinates of the points)
use B in the fragment shader to compute the correct texture coordinate at each pixel

然而，我想知道在webgl中是否有更简单的方法来实现这一点

----相关主题的链接----

有一种类似的方法来解决数学上描述的问题，但由于它是一种计算多对多点映射的解决方案，所以对我来说，这似乎是一种过火的做法

我原以为这是OpenGL中的一个解决方案，但意识到这是一个执行简单透视正确插值的解决方案，这在默认情况下是幸运的

我在梯形上发现了很多东西，这是我想解决的更一般问题的一个简单版本：，和。我首先认为这些会有帮助，但相反，它们会导致我大量阅读和误解

最后，这描述了一个解决问题的解决方案，但我怀疑它是否是最简单和最常见的解决方案。现在我想这可能是正确的

----结论----

---

我一直在寻找解决方案，不是因为这是一个特别复杂的问题，而是因为我在寻找一个简单、典型/通用的解决方案。我认为在很多情况下（每个视频映射应用程序）这是一个很容易解决的问题，而且会有一些琐碎的答案。

好的，我用three.js和coffeescript成功地解决了这个问题（我必须实现缺失的Matrix3功能）：

下面是片段着色器：

    #ifdef GL_ES
    precision highp float;
    #endif

    uniform sampler2D texture;
    uniform vec2 resolution;

    uniform mat4 matC;

    void main() {
        vec4 fragCoordH = vec4(gl_FragCoord.xy/resolution, 1, 0);
        vec4 uvw_t = matC*fragCoordH;
        vec2 uv_t = vec2(uvw_t.x/uvw_t.z, uvw_t.y/uvw_t.z);
        gl_FragColor = texture2D(texture, uv_t);
    }

附加说明

Maptastic是一个Javascript/CSS投影映射实用程序。

---

这太好了。这正是我为我的项目所做的。您有没有可能有一个完整的使用此代码的工作示例（例如，JSFIDLE）？作为一个亮点，它将非常有用。是的，我在另一台计算机上安装了它，我会在有时间的时候尝试在github上推广它。你为什么对这个算法感兴趣？我是开源数字微流体自动化平台的共同创造者之一。我们的控制界面软件扭曲网络摄像头视频馈送，以校正透视效果，使其与叠加图案对齐。当前版本的GUI（Microdrop）是一个独立的应用程序，使用GTK和GStreamer在PC上运行。但是，我们想使用WebGL移动到浏览器UI，并且需要复制我们现有的视频透视注册。谢谢，如果您有机会将代码推高，我将不胜感激。

    #ifdef GL_ES
    precision highp float;
    #endif

    uniform sampler2D texture;
    uniform vec2 resolution;

    uniform mat4 matC;

    void main() {
        vec4 fragCoordH = vec4(gl_FragCoord.xy/resolution, 1, 0);
        vec4 uvw_t = matC*fragCoordH;
        vec2 uv_t = vec2(uvw_t.x/uvw_t.z, uvw_t.y/uvw_t.z);
        gl_FragColor = texture2D(texture, uv_t);
    }