6

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

我使用 WebGL 所做的一切都是使用 Three.js，它使几何投影、照明和相机变得容易。但这更简单：不需要照明或摄像机角度，只需输入四个角的绝对位置。如果我能达到这个较低的水平，我不反对使用 Three.js。

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

更新

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

meemoo 映射器

4

1 回答 1

3

我强烈建议阅读“Learning 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

于 2013-05-15T15:23:16.580 回答