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投影映射/四邊形變形/角落針

回答

相關問題