webgl投影映射/四翘/角销

Question

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

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

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

---

更新

在我的项目中,我现在最终使用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