CSS投影映射 / 四边形变形 / 角落固定

Question

CSS投影映射 / 四边形变形 / 角落固定

6

我想将一个矩形纹理映射到一个四边形上，该四边形的角落位于与屏幕像素相对应的任意位置。类似于drawQuad(x1,y1,x2,y2,x3,y3,x4,y4)。有没有使用WebGL实现这个功能的演示？我在WebGL方面所做的一切都是使用Three.js完成的，它可以使几何投影、光照和摄像机变换变得容易。但这次更简单：不需要光照或摄像机角度，只需输入四个角的绝对位置。如果能够达到这个更低的级别，我也不反对使用Three.js。我在Quartz Composer中找到了使用GLSL顶点着色器的说明。

更新

在我的项目中，我目前选择了CSS，因为我可以拉伸任何元素（画布、图片、div、视频），并且不会出现非平面形状的撕裂...最终我可能会重新考虑WebGL选项。如果有人有将四个角拖动到任意位置的示例，请在此处添加。

- forresto

发现了一个使用CSS3D的演示：http://www.is-real.net/experiments/css3/wonder-webkit/ - forresto

以下是 CSS 中所需的矩阵数学的全面解释和演示：http://math.stackexchange.com/a/339033/78081 - forresto

你需要CSS3还是WebGL代码？ - Dragan Okanovic

探索各种选项，但这个问题是关于WebGL的。 - forresto

1

我已修改答案。请查看实时示例。 - Dragan Okanovic

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dragan Okanovic · Accepted Answer

我强烈建议阅读“学习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)
}

Shader会在连接一个三角形的各个顶点之间插值UV坐标，因此每个片段都将获得自己的插值UV值，并因此采样不同的纹理数据。

认真阅读后，创建四边形应该很容易：http://learningwebgl.com/blog/?p=507

希望这有所帮助。

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