webgl投影映射/四翘/角销

Question

我想将矩形纹理映射到具有与屏幕像素对应的任意位置的角的四边形。像drawQuad( x1,y1, x2,y2, x3,y3, x4,y4 )这样的东西。是否有使用WebGL执行此操作的演示？

我使用WebGL完成的所有操作都使用了Three.js，这使得几何投影，照明和相机变得简单。但这更简单：不需要照明或摄像机角度，只需输入四个角的绝对位置。如果我可以达到这个较低的水平，我不反对使用Three.js。

我在Quartz Composer中找到了an explanation with a GLSL vertex shader。

---

更新

在我的项目中，我现在最终使用CSS，因为我可以拉伸任何元素（画布，img，div，视频），并且不会撕裂非平面形状...最终我可能会再次访问WebGL选项。如果有人有一个例子将四个角拖到任意位置，我会在这里添加它。

Answer 1

我强烈建议您阅读“学习webGL”中的教程。

对于四边形的每个顶点，您都会发送其“UV坐标”。 UV坐标是vec2数据，用于指示纹理的哪个部分与顶点绑定。

因此，例如，（0,0）uv表示纹理的左上角，而（0.3,0.4）表示纹理上的位置，对应于纹理的30％宽度和40％的高度。

在GLSL着色器中，有一个特殊的功能 - texture2D，这里是用法：

uniform sampler2D uTexture;
varying vec2 vUV;
void main()
    vec4 color_from_texture = texture2D ( uTexture, vUV );
    gl_FragColor = color_from_texture;
}

这称为采样纹理，您可以通过调用texture2D函数从某个位置的纹理读取数据。

因此，对于四边形，顶点将具有位置（x1，y1），（x2，y1），（x1，y2），（x2，y2），并且它们对应的UV坐标将是（0.0,0.0），（1.0， 0,0），（0.0,1.0），（1.0,1.0）。 注意我们如何通过从一个点到另一个点完全定义UV坐标来拉伸纹理。

顶点着色器看起来像这样：

attribute vec2 aUV;
attribute vec2 aVertexPos;
varying vec2 vUV;
void main() {
    vUV = aUv;
    gl_Position = vec4( aVertexPos, 1.0); // maybe modelViewMatrix * projMatrix * vec4(aVertexPos, 1.0)
}

着色器会在组合一个三角形的顶点之间插入UV坐标，这样每个片段都会获得自己的UV内插值，从而对不同的纹理数据进行采样。

仔细阅读，之后，创建四元组应该很容易： http://learningwebgl.com/blog/?p=507

希望这有帮助。

实例：http://abstract-algorithm.com/quad.html