CSS 投影映射/四边形变形/Angular 销

Question

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

我使用 WebGL 所做的一切都是通过 Three.js 完成的，它使几何投影、光照和相机变得简单。但这更简单:不需要照明或摄像机 Angular ，只需输入四个 Angular 的绝对位置即可。如果我能达到这个较低的水平，我并不反对使用 Three.js。

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

<小时/>

更新

在我的元素中，我现在最终选择了 CSS，因为我可以拉伸(stretch)任何元素(canvas、img、div、video)，并且不会因非平面形状而撕裂......最终我可能会重新访问WebGL 选项。如果有人有将四个 Angular 拖动到任意位置的示例，我会将其添加到此处。

Answer 1

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

对于四边形的每个顶点，您发送其“UV 坐标”。 UV 坐标是 vec2 数据，它告诉纹理的哪一部分与顶点绑定(bind)。

例如，(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 坐标来拉伸(stretch)纹理。

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

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)
}

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

仔细阅读本文，之后创建四边形应该很容易: http://learningwebgl.com/blog/?p=507

希望这有帮助。

• • •  

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