webgl投影映射/四边形变形/角落针

我想将矩形纹理映射到四边形，并在与屏幕像素相对应的任意位置有一个角。类似drawQuad(x1,y1, x2,y2, x3,y3, x4,y4)。有没有使用WebGL做这个演示？webgl投影映射/四边形变形/角落针

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

我在Quartz Composer中发现an explanation with a GLSL vertex shader。

更新

在项目中，我结束了与CSS打算现在，因为我可以伸展的任何元素（帆布，IMG，DIV，视频），并没有得到与非撕裂平面形状...最终我可能会重新访问WebGL选项。如果有人有一个例子将四角拖到任意位置，我会在这里添加它。

来源

2013-05-10 forresto

实测值使用CSS3D演示：http://www.is-real.net/实验/ css3/wonder-webkit/ – forresto 2013-05-16 06:18:43

这里的c需要在CSS中执行此操作所需的矩阵数学的全面解释和演示：http://math.stackexchange.com/a/339033/78081 – forresto 2013-05-16 13:16:16

您需要css3或webgl代码？ – 2013-05-16 20:33:11

我强烈建议从 “学习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），（x1，，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结合了一个三角形所以每个片段会得到自己的，插值来回紫外线，因此将品尝不同的纹理数据的顶点之间的坐标。

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

希望这有助于。

直播例如：http://abstract-algorithm.com/quad.html

来源

2013-05-15 15:23:16

我完全可以从示例中学习，但动画正在改变x，y，z的旋转。直接定义四边形的四个角有多难？像'drawScene（x1，y1，x2，y2，x3，y3，x4，y4）' – forresto 2013-05-17 10:10:53

，你可以在实例的顶点数组的源代码中找到。通过改变它的值，你可以直接改变角落的位置。你可以编写函数draw_quad（xy1，xy2，xy3，xy4）来做你想做的事情。你也可以使用THREE.js或其他引擎，但是我不知道它会满足你的需求。 – 2013-05-17 10:15:06

我还需要更多的顶点和顶点着色器来插入角点，因为这种变形使得三角形变得明显：http://i.imgur.com/FvYeVzh.png – forresto 2013-05-17 12:04:21

webgl投影映射/四边形变形/角落针

回答

相关问题