关于three.js：webgl投影映射/四边形变形/角钉


webgl projection mapping / quad warping / corner pin

我想将一个矩形纹理映射到一个四边形，并在与屏幕像素相对应的任意位置上拐角。 drawQuad( x1,y1, x2,y2, x3,y3, x4,y4 )之类的东西。 是否有使用WebGL进行此操作的演示？

我对WebGL所做的一切都与Three.js有关，这使几何投影，照明和摄影机变得容易。 但这比较简单：只需输入四个角的绝对位置，就无需照明或摄像机角度。 如果可以达到较低的水平，我不反对使用Three.js。

我在Quartz Composer中找到了GLSL顶点着色器的解释。

更新资料

在我的项目中，我现在最终使用CSS，因为我可以拉伸任何元素(画布，img，div，视频)，并且不会撕裂非平面形状...最终，我可能会重新使用WebGL选项 。 如果有人举个例子将四个角拖到任意位置，我将在此处添加。

meemoo mapper

相关讨论

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

对于四边形的每个顶点，都发送其" UV坐标"。 UV坐标是vec2数据，可告诉纹理的哪一部分与顶点绑定。

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

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

1
2
3
4
5
6
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坐标来拉伸纹理。

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

1
2
3
4
5
6
7
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插值，从而对不同的纹理数据进行采样。

请仔细阅读，然后，创建quad应该很容易：
http://learningwebgl.com/blog/?p=507

希望这可以帮助。

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

相关讨论